How to Populate a Dual Column ListBox

Question

I have a ListBox which has two columns. On a button click event I am adding the column data to an ObservableCollection, and I need to bind the collection to the ListBox to display the ObservableCollection data. I am having trouble figuring out how to do this.

MainPage.xaml

<ListBox x:Name="HistoryListBox" ItemsSource="{Binding Items}" Grid.Row="1" Grid.ColumnSpan="2">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>

                                <TextBlock Grid.Column="0" Text="{Binding ConnectionType}"/>
                                <TextBlock Grid.Column="1" Text="{Binding DateTime}"/>
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>

MainPage.xaml.cs

public ObservableCollection<History> Items { get; set; }

public MainPage()
    {
        InitializeComponent();

        Items = new ObservableCollection<History>();
        HistoryListBox.DataContext = Items;
    }

private void TestButton_Click(object sender, RoutedEventArgs e)
    {
        ...

        PopulateHistoryListBox();
    }

private void PopulateHistoryListBox()
    {
        Items.Add(new History { ConnectionType = ConnectionTypeResultTextBlock.Text, DateTime = DateTime.Now });
    }

I am not sure how to properly bind the ObservableCollection items to the ListBox? Also, I somehow need to persist this data historically for when the application reloads. How can I do this with IsolatedStorage?

Answer 1

You should assign ItemsSource ,

HistoryListBox.ItemsSource = Items; 

If you are using MVVM,

Assign the ViewModel to the page, not to the listBox,

 this.DataContext = ViewModel;

 <ListBox x:Name="HistoryListBox"  ItemsSource="{Binding Items}"  Grid.Row="1" Grid.ColumnSpan="2">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>

                                    <TextBlock Grid.Column="0" Text="{Binding Network}"/>
                                    <TextBlock Grid.Column="1" Text="{Binding Date}"/>
                                </Grid>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
    </ListBox>

Answer 2

<ListBox ItemsSource="{Binding Items, Mode=TwoWay}">
...
</ListBox>