带有Observable集合的WPF listbox datatemplate [英] WPF listbox datatemplate with Observable collection

问题描述

我有3个不同的列表框和一个ObservableCollection



让我们说ObservableCollection tagCollection

Hi,

I have 3 different list box and one ObservableCollection

Let say ObservableCollection of tagCollection

tagCollection tag1 = new tagCollection{ name="tag1" priority="1" }
tagCollection tag2 = new tagCollection{ name="tag2" priority="2" }
tagCollection tag3 = new tagCollection{ name="tag3" priority="3" }
tagCollection tag4 = new tagCollection{ name="tag4" priority="1" }
tagCollection tag5 = new tagCollection{ name="tag5" priority="2" }
tagCollection tag6 = new tagCollection{ name="tag6" priority="3" }

ListBox是

ListBox is of

<ListBox   ItemsSource="{Binding Path=TagValue}" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden" >
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="Padding" Value="0 0 0 0" />
              
                    </Style>
                </ListBox.ItemContainerStyle>
                <ListBox.ItemTemplate>
                    <DataTemplate >
                    
                            <Grid VerticalAlignment="Top" HorizontalAlignment="Stretch" Margin="1">
                                <Button Content="{Binding Path=name}" 
                            Height="70" 
                            Width="100"
                            FontSize="12" 
                            FontWeight="Bold"
                            HorizontalAlignment="Stretch"
                            Command="{Binding Path=DataContext.GetChildrenCommand}" 
                            CommandParameter="{Binding}"/>
                            </Grid>
                    
                      
                    </DataTemplate>
                </ListBox.ItemTemplate>
              
            </ListBox>

其中TagValue返回tagCollection。



我需要用tagCollection优先级=1项填充列表框1，

列表框2，带tagCollection优先级=2项，

列表框3，带tagCollection优先级=3项目。





怎么做？任何人都可以帮助我吗？

Where TagValue returns the tagCollection.

I need to fill the Listbox 1 with tagCollection Priority ="1" items,
Listbox 2 with tagCollection Priority ="2" items,
Listbox 3 with tagCollection Priority ="3" items.


How to do this ? Can anybody help me out of this ?

推荐答案

创建一个可观察的集合，如

Create an observable collection like

tagCollection = new ObservableCollection<Tag>();
tagCollection.Add(new Tag() { Name = "two", Priority = "2" });
tagCollection.Add(new Tag() { Name = "another 2", Priority = "2" });
tagCollection.Add(new Tag() { Name = "three", Priority = "3" });
tagCollection.Add(new Tag() { Name = "one", Priority = "1" });

和

and

listbox1.itemsource=tagCollection.Where(tag=>tag.Priority=1)
listbox2.itemsource=tagCollection.Where(tag=>tag.Priority=2)
listbox3.itemsource=tagCollection.Where(tag=>tag.Priority=3)

我在考虑使用转换器，我们可以将ItemsSource绑定转换为每个列表框。

但棘手的部分是，每次添加/删除时，都应该引发propertychange事件来触发转换器。我这里有一个肮脏的解决方案



这是viewmodel，我添加了一个ClickCommand，以便我们可以测试添加部分。

I was thinking of using a converter where we can convert the ItemsSource binding to each listbox.
But the tricky part is that everytime you add/remove, you should raise a propertychange event to trigger the converter. I have here a dirty solution.

Here's the viewmodel, I added a ClickCommand so that we can test the adding part.

public class TagVM: INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    public void RaisePropertyChanged(string PropertyName)
    {            
        PropertyChanged(this, new PropertyChangedEventArgs(PropertyName));
    }
    ObservableCollection<Tag> tagCollection;
    public TagVM()
    {
        tagCollection = new ObservableCollection<Tag>();
        tagCollection.Add(new Tag() { Name = "two", Priority = "2" });
        tagCollection.Add(new Tag() { Name = "another 2", Priority = "2" });
        tagCollection.Add(new Tag() { Name = "three", Priority = "3" });
        tagCollection.Add(new Tag() { Name = "one", Priority = "1" });
    }

    public ObservableCollection<Tag> TagCollection
    {
        get { return tagCollection; }
        set
        {
            tagCollection = value;
            RaisePropertyChanged("TagCollection");
        }
    }

    public ICommand ClickCommand
    {
        get
        {
            return new RelayCommand(() => { tagCollection.Add(new Tag() { Name = "another 3 ", Priority = "3" }); RaisePropertyChanged("TagCollection"); });
        }

    }
}

这是我们使用参数的转换器在哪里部分：

Here's the converter where we use the parameter in the where part:

public class ItemsConverter: IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (value != null)
        {
            ObservableCollection<Tag> oval = value as ObservableCollection<Tag>;
            if (oval != null)
            {
                return oval.Where(x => x.Priority == parameter.ToString()).ToList();
            }
        }
        return null;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

最后，这是我们绑定项目源的视图，使用itemconverter和转换器参数：

And lastly, here's the view where we bind the items source, used the itemconverter and a converterparameter:

<window x:class="WpfApplication9.MainWindow" xmlns:x="#unknown">
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication9"
        Title="MainWindow" Height="350" Width="525">
    <stackpanel>
        <stackpanel.resources>
            <local:itemsconverter x:key="itemConverter" xmlns:local="#unknown" />
        </stackpanel.resources>
        <listbox itemssource="{Binding TagCollection, Converter={StaticResource itemConverter}, ConverterParameter=1}">
            <listbox.itemtemplate>
                <datatemplate>
                    <textblock text="{Binding Name}" />
                </datatemplate>
            </listbox.itemtemplate>
        </listbox>
        <listbox itemssource="{Binding TagCollection, Converter={StaticResource itemConverter}, ConverterParameter=2}">
            <listbox.itemtemplate>
                <datatemplate>
                    <textblock text="{Binding Name}" />
                </datatemplate>
            </listbox.itemtemplate>
        </listbox>
        <listbox itemssource="{Binding TagCollection, Converter={StaticResource itemConverter}, ConverterParameter=3}">
            <listbox.itemtemplate>
                <datatemplate>
                    <textblock text="{Binding Name}" />
                </datatemplate>
            </listbox.itemtemplate>
        </listbox>
        <button content="Add Another 3">
                Command="{Binding ClickCommand}" />
    </button></stackpanel>
</window>

我希望有所帮助。 ：）

I hope that helped. :)

嗨兄弟，

试试这个链接，它可能对你有所帮助

http://wpftutorial.net/ListBoxDataTemplate.html [ ^ ]

这篇关于带有Observable集合的WPF listbox datatemplate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！