WPF listbox datatemplate with Observable collection

Question

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 25-Mar-13 21:21pm

Member 8786335

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

josh-jw · Answer 1 · 2013-03-27T02:01:00

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)

Lance Contreras · Answer 2 · 2013-03-26T03:56:00

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. :)

Alexanbu · Answer 3 · 2013-11-19T18:54:00

Solution 3

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

Posted 19-Nov-13 18:54pm

Alexanbu

WPF listbox datatemplate with Observable collection

3 solutions

Solution 2

Solution 1

Solution 3

Add your solution here

Preview 0