UI の作成

ユーザーインターフェイスは、２つのデータグリッド（Categories と Products）と３つのボタン（項目の追加、項目の削除、変更のコミット）で構成されます。

ユーザーインターフェイスを作成するには、MainPage.xaml ファイルを開き、ソースビューで次の XAML をページにコピーします。

	コードのコピー
<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" > <!-- メイングリッドレイアウト --> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="" /> <RowDefinition Height="Auto" /> <RowDefinition Height="2" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <!-- ページタイトル --> <TextBlock Text="Silverlight マスター詳細サンプル" Margin="5" FontSize="20" FontWeight="Bold" /> <!-- マスターデータグリッド --> <TextBlock Text="カテゴリ" Margin="5" Grid.Row="1" FontSize="16" FontWeight="Bold" Foreground="Blue" /> <swc:DataGrid x:Name="_gridCategories" Margin="5" Grid.Row="2" /> <!-- 詳細データグリッド --> <TextBlock Text="製品" Margin="5" Grid.Row="3" FontSize="16" FontWeight="Bold" Foreground="Blue" /> <swc:DataGrid x:Name="_gridProducts" Margin="5" Grid.Row="4" /> <!-- コントロールパネル --> <StackPanel Margin="5" Orientation="Horizontal" Grid.Row="5" > <Button x:Name="_btnAdd" Content=" 項目の追加 " Margin="0,0,20,0" FontSize="14" VerticalAlignment="Center" /> <Button x:Name="_btnRemove" Content=" 項目の削除 " Margin="0,0,20,0" FontSize="14" VerticalAlignment="Center" /> <Button x:Name="_btnCommit" Content=" 変更を反映 " Margin="0,0,20,0" FontSize="14" VerticalAlignment="Center" /> <TextBlock x:Name="_tbStatus" Text=" 準備完了 " VerticalAlignment="Center" FontSize="12" Foreground="Gray" /> </StackPanel> </Grid> </UserControl>

コードのコピー

<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" >
 
    <!-- メイングリッドレイアウト -->
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="2*" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
 
    <!-- ページタイトル -->
    <TextBlock Text="Silverlight マスター詳細サンプル" Margin="5"
      FontSize="20" FontWeight="Bold" />
 
    <!-- マスターデータグリッド -->
    <TextBlock Text="カテゴリ" Margin="5" Grid.Row="1"
      FontSize="16" FontWeight="Bold" Foreground="Blue" />
    <swc:DataGrid x:Name="_gridCategories" Margin="5" Grid.Row="2" />
 
    <!-- 詳細データグリッド -->
    <TextBlock Text="製品" Margin="5" Grid.Row="3"
      FontSize="16" FontWeight="Bold" Foreground="Blue" />
    <swc:DataGrid x:Name="_gridProducts" Margin="5" Grid.Row="4" />
 
    <!-- コントロールパネル -->
    <StackPanel Margin="5" Orientation="Horizontal" Grid.Row="5" >
      <Button x:Name="_btnAdd" Content=" 項目の追加 "
        Margin="0,0,20,0" FontSize="14" VerticalAlignment="Center" />
      <Button x:Name="_btnRemove" Content=" 項目の削除 "
        Margin="0,0,20,0" FontSize="14" VerticalAlignment="Center" />
      <Button x:Name="_btnCommit" Content=" 変更を反映 "
        Margin="0,0,20,0" FontSize="14" VerticalAlignment="Center" />
      <TextBlock x:Name="_tbStatus" Text=" 準備完了 "
        VerticalAlignment="Center" FontSize="12" Foreground="Gray" />
    </StackPanel>
  </Grid>
</UserControl>

これまでの作業に問題がないことを確認するため、ここでアプリケーションを実行してみます。２つの空のグリッドが表示されるはずです。