
Creating the Details View
One of the most common scenarios when displaying data is a master/details or parent/child scenario. This means that selecting an item in a master list causes detail display to update with the corresponding child data.
This section shows how to select an item in the master list and display its details. First, you will create the additional UI to contain the list item details.
To create the details view
Open Page.xaml.
After the closing </ListBox> tag, but before the closing </StackPanel> tag, add the following XAML in the main stack panel.
The following XAML adds a StackPanel which contains a rectangle and a stack panel named BookDetails. The rectangle serves as a dividing line between the master and the details data. The BookDetails stack panel contains four TextBlock controls to display the book title, ISBN, published date, and price. Each text block has a binding that associates its text property with the book property it should display.
<StackPanel>
<!--Visual division between the list and the details-->
<Rectangle HorizontalAlignment="Left" Width="400" Height="2"
Fill="Red" Margin="0,10,0,10"/>
<!--The UI for the details view-->
<StackPanel x:Name="BookDetails">
<TextBlock Text="{Binding ISBN, Mode=OneWay}" />
<TextBlock Text="{Binding Title, Mode=OneWay}" />
<TextBlock Text="{Binding PublishDate, Mode=OneWay }" />
<TextBlock Text="{Binding Price, Mode=OneWay}" />
</StackPanel>
</StackPanel>