Click here to Skip to main content
15,070,139 members
Please Sign up or sign in to vote.
5.00/5 (2 votes)
See more:
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 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>



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 ?
Posted

Create an observable collection like

C#
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

C#
listbox1.itemsource=tagCollection.Where(tag=>tag.Priority=1)
listbox2.itemsource=tagCollection.Where(tag=>tag.Priority=2)
listbox3.itemsource=tagCollection.Where(tag=>tag.Priority=3)
   
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.
C#
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:
C#
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();
    }
}


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. :)
   
v3
Comments
Member 8786335 27-Mar-13 0:43am
   
Thanks Lance


I have tried with you code .
In my case the TagCollection is in Mainwindow which extends window . So i cant able to use the RaisePropertyChanged.
So that the Converter is not called.
Lance Contreras 27-Mar-13 6:47am
   
I see, the best practice is that you put the TagCollection inside a viewmodel(i.e.TagVM) and then set the MainWindow's DataContext to an instance of TagVM.

But if you're strict with the implementation, and you really need to implement it the way you said it, what you can do is implement an INotifyPropertyChange in your main window. You'll be having a PropertyChange event when you implement that interface and you should also implement your own method of RaisePropertyChange. I'll update the solution without using a ViewModelbase. Please see my updates.




Hi Bro,
Try this Link, it may be helpful for you
http://wpftutorial.net/ListBoxDataTemplate.html[^]
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900