Difference between ItemsSource and DataContext as pertains to ListBox

Question

I am not quite grokking the difference between ItemsSource and DataContext. Can someone explain it and back it up with examples? When would I use one or the other.

I am reading the docs and it says that I can bind using DataContext, but I throw an ObservableCollection at it and nothing shows up in the list. If I throw the same collection at the ItemsSource, it works fine.

Answer 1

Controls (including the ListBox) don't do anything with the value of DataContext at all. Its purpose is to provide a context for data bindings.

Lets assume you have a ListBox "myList" and a MyData "myData". The MyData type has a property "People" of type ObservableCollection<Person> and in turn the Person type has the string properties "Forename" and "Surname".

All of the following are equivalent:-

 myList.ItemsSource = myData.People;

or

 myList.DataContext = myData;
 myList.SetBinding(ItemsControl.ItemsSourceProperty, new Binding("People"));

or

 myList.DataContext = myData.People;
 myList.SetBinding(ItemsControl.ItemsSourceProperty, new Binding());

Typically though bindings are configured in Xaml and the DataContext of the LayoutRoot is assigned the data object:-

 LayoutRoot.DataContext = myData;

you might have the following Xaml:-

 <Grid x:Name="LayoutRoot">
   <ListBox x:Name="myList" ItemsSource="{Binding People}">
     <ListBox.ItemTemplate>
       <DataTemplate>
         <StackPanel Orientation="Horizontal">
           <TextBlock Text="{Binding Forename}" Margin="2" />
           <TextBlock Text="{Binding Surname}" Margin="2" />
         </StackPanel>
       </DataTemplate>
     </ListBox.ItemTemplate>
   </ListBox>
 </Grid>

You'll note a couple of things here. The DataContext of "myList" is not assigned at all. In this case the control's ancestor tree is walked until an ancestor is found that does have a value assigned to the DataContext property.

Also each ListBoxItem dynamically generated for each Person instance has that Person instance assigned as its DataContext which is how the Forename and Surname bindings manage to work.