Create the UI

The user interface consists of two data grids (Categories and Products), and a few buttons used to add and delete items and to commit the changes.

To create the user interface, open the MainPage.xaml file and in Source view, copy the following XAML onto the page:

XAML	Copy Code
<UserControl x:Class="MasterDetail.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:swc= "clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"> <Grid x:Name="LayoutRoot" Background="White" > <!-- Main grid layout --> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="" /> <RowDefinition Height="Auto" /> <RowDefinition Height="2" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <!-- Page title --> <TextBlock Text="Master-Detail Sample in Silverlight" Margin="5" FontSize="20" FontWeight="Bold" /> <!-- Master data grid --> <TextBlock Text="Categories" Margin="5" Grid.Row="1" FontSize="16" FontWeight="Bold" Foreground="Blue" /> <swc:DataGrid x:Name="_gridCategories" Margin="5" Grid.Row="2" /> <!-- Detail data grid --> <TextBlock Text="Products" Margin="5" Grid.Row="3" FontSize="16" FontWeight="Bold" Foreground="Blue" /> <swc:DataGrid x:Name="_gridProducts" Margin="5" Grid.Row="4" /> <!-- Control panel --> <StackPanel Margin="5" Orientation="Horizontal" Grid.Row="5" > <Button x:Name="_btnAdd" Content=" Add Item " Margin="0,0,20,0" FontSize="14" VerticalAlignment="Center" /> <Button x:Name="_btnRemove" Content=" Remove Item " Margin="0,0,20,0" FontSize="14" VerticalAlignment="Center" /> <Button x:Name="_btnCommit" Content=" Commit Changes " Margin="0,0,20,0" FontSize="14" VerticalAlignment="Center" /> <TextBlock x:Name="_tbStatus" Text="Ready" VerticalAlignment="Center" FontSize="12" Foreground="Gray" /> </StackPanel> </Grid> </UserControl>

XAML

Copy Code

<UserControl x:Class="MasterDetail.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:swc=
"clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data">
  <Grid x:Name="LayoutRoot" Background="White" >

    <!-- Main grid layout -->
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="2*" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <!-- Page title -->
    <TextBlock Text="Master-Detail Sample in Silverlight" Margin="5"
      FontSize="20" FontWeight="Bold" />

    <!-- Master data grid -->
    <TextBlock Text="Categories" Margin="5" Grid.Row="1"
      FontSize="16" FontWeight="Bold" Foreground="Blue" />
    <swc:DataGrid x:Name="_gridCategories" Margin="5" Grid.Row="2" />

    <!-- Detail data grid -->
    <TextBlock Text="Products" Margin="5" Grid.Row="3"
      FontSize="16" FontWeight="Bold" Foreground="Blue" />
    <swc:DataGrid x:Name="_gridProducts" Margin="5" Grid.Row="4" />

    <!-- Control panel -->
    <StackPanel Margin="5" Orientation="Horizontal" Grid.Row="5" >
      <Button x:Name="_btnAdd" Content=" Add Item "
        Margin="0,0,20,0" FontSize="14" VerticalAlignment="Center" />
      <Button x:Name="_btnRemove" Content=" Remove Item "
        Margin="0,0,20,0" FontSize="14" VerticalAlignment="Center" />
      <Button x:Name="_btnCommit" Content=" Commit Changes "
        Margin="0,0,20,0" FontSize="14" VerticalAlignment="Center" />
      <TextBlock x:Name="_tbStatus" Text="Ready"
        VerticalAlignment="Center" FontSize="12" Foreground="Gray" />
    </StackPanel>
  </Grid>
</UserControl>

Try running the application now to make sure everything is OK so far. It consists of two empty grids: