WPF ListBox Binding Update

Question

I'm brand new to WPF and I just managed to bind a list of specific class items to a ListBox. The ListBox now successfully displays them. Here's some code, the class first:

public class OrderItem
{
    public int Quantity { get; set; }
    public string Name { get; set; }
    public Double Price { get; set; }
}

Some dummy data and the binding, which all happens in the constructor of the main program:

List<OrderItem> currentOrderItems = new List<OrderItem>();
        currentOrderItems.Add(new OrderItem() { Quantity = 5, Name = "Test", Price = 5 });
        currentOrderItems.Add(new OrderItem() { Quantity = 15, Name = "Test test", Price = 6.66 });
        currentOrderItems.Add(new OrderItem() { Quantity = 1, Name = "Test 3", Price = 15.88 });
        listOrderItems.ItemsSource = currentOrderItems;

And the XAML:

<ListBox HorizontalAlignment="Left" Margin="150,27,0,23" Name="listOrderItems" Width="150" FontFamily="Times New Roman" FontSize="12">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid Margin="4">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="{Binding Quantity}" FontWeight="Bold"  />
                    <TextBlock Grid.Column="1" Text="{Binding Name }" />
                    <TextBlock Grid.Column="2" Text="{Binding Price }" />
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

My question is how can I update the ListBox to display a new item that I'm adding to the List containing the data a.k.a. the OrderItems. If I add, remove or modify the List in any way, this is not reflected in the ListBox. Thanks!

Answer 1

For your case best way use mvvm patern. In brief: Your model OrderItem should implement interface INotifyPropertyChanged. If property changed, it notified about this. Then create viewmodel and set it in datacontext. In viewModel add ObservableCollection with OrderItems, this collection should notified view about changes in it. for more information read some articles like this: MVVM

Answer 2

Instead of using a List<OrderItem> use ObservableCollection<OrderItem>. This will notify that something was added/removed so your ListBox knows to refresh.

Additionally, your OrderItem needs to implement INotifyPropertyChanged and your setters need to call OnPropertyChanged.

Answer 3

You can also rebind your ListBox in code behind:

List<OrderItem> currentOrderItems = new List<OrderItem>();
currentOrderItems.Add(new OrderItem() { Quantity = 5, Name = "Test", Price = 5 });
currentOrderItems.Add(new OrderItem() { Quantity = 15, Name = "Test test", Price = 6.66 });
currentOrderItems.Add(new OrderItem() { Quantity = 1, Name = "Test 3", Price = 15.88 });

In code behind:

private ObservableCollection<OrderItem> _OrderItemCollection;
public ObservableCollection<OrderItem> OrderItemCollection
{
    get
    {
        if (_OrderItemCollection == null)
            _OrderItemCollection = new ObservableCollection<OrderItem>();
        return _OrderItemCollection;
    }
    set => _OrderItemCollection = value;
}

private CollectionViewSource _OrderItemCollectionViewSource;
public ICollectionView OrderItemCollectionViewSource => _OrderItemCollectionViewSource.View;


public void loadData()
{
    _OrderItemCollectionViewSource = new CollectionViewSource();
    _OrderItemCollectionViewSource.Source = new ObservableCollection<OrderItem>(currentOrderItems) ;
    Binding b = new Binding("OrderItemCollectionViewSource") { Source = this };
    listOrderItems.SetBinding(ListBox.ItemsSourceProperty, b);
}

And the XAML:

<ListBox HorizontalAlignment="Left" Margin="150,27,0,23" Name="listOrderItems" Width="150" FontFamily="Times New Roman" FontSize="12">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid Margin="4">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding Quantity}" FontWeight="Bold"  />
                <TextBlock Grid.Column="1" Text="{Binding Name }" />
                <TextBlock Grid.Column="2" Text="{Binding Price }" />
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>