Databinding ObservableCollection to a ListBox

Question

I have been trying to figure out the proper way to bind an ObservableCollection of a class to a ListBox with a TextBox DataTemplate. I've tried to implement the code in WPF binding: Set Listbox Item text color based on property but that hasn't gotten me very far as of yet. I'm new to WPF DataBinding, having at most programatically set the ItemsSource in simple cases.

I have this class

public class item
{
    public string guid;
    public bool found;
    public bool newItem;
    public Brush color;
}

and the following ObservableCollection

public ObservableCollection<item> _items;

public Window()
{
    InitializeComponent();
    _items = new ObservableCollection<item>();
}

Elsewhere in the code I add items to the collection via

_items.Add(new item() { guid = sdr.GetString(0), found = false, newItem = false, color = Brushes.Red });

Here's simplified XAML for the ListBox

<ListBox x:Name="ListBox_Items">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text=GUID_HERE Foreground=COLOR_HERE/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

I've tried several different ways to get this to work properly, yet for none of them the ListBox is updating. Is anyone able to help point me in the right direction here?

d.moncada d.moncada · Accepted Answer · 2014-08-05T20:01:18

Four things:

Your item class needs to use public properties:

public class item
{
    public string guid { get; set; }
    public bool found { get; set; }
    public bool newItem { get; set; }
    public Brush color { get; set; }
}

You need to set the ItemsSource to the collection, and set the current DataContext

public Window()
{
    InitializeComponent();
    DataContext = this;

    _items = new ObservableCollection<item>();
    ListBox_Items.ItemsSource = _items;     
}

You need to update your DataTemplate to use the property names of your POCO

<ListBox x:Name="ListBox_Items">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding guid}" Foreground="{Binding color}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Databinding ObservableCollection to a ListBox

2 Answers