Coding4Fun

Dissecting MainWindow.xaml

Since it can be difficult to explain exactly how you take a set of skeleton controls and turn them into a fully functioning UI, we'll dissect MainWindow.xaml into the three pieces, labeled 1, 2, and 3 in Figure 4-12. You can refer back to this screenshot to follow along with the expected UI.

Figure 4-12. The three Grid columns in MainWindow.xaml

Setting the MainWindow.xaml data context

Previously we defined a global variable named InnerTubeFeeds that holds the list of feeds and the corresponding list of videos. To data bind all of the controls in Main Window to InnerTubeFeeds, we will set the DataContext for the window using the Window_Loaded event, as shown in Example 4-55 and Example 4-56.

Example 4-55.  C# code to set the MainWindow.xaml data context

private void Window_Loaded(object sender, RoutedEventArgs e)
{
...
    this.DataContext = App.InnerTubeFeeds;
}

Example 4-56.  Visual Basic code to set the MainWindow.xaml data context

Private Sub Window_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
...
  Me.DataContext = App.InnerTubeFeeds
 End Sub

Part 1: The Feed List ListBox

For the Feed List UI, we will use a templated ListBox control, as shown in Example 4-57 ...