FlexGrid では、行の詳細テンプレートを使用して各行に関する情報を柔軟に表示できます。行の詳細テンプレートは、詳細を表示するために各行に追加できるデータパネルです。テキスト、UI 要素、InputPanel などのデータ連結コントロールを行詳細テンプレートに埋め込むことができます。行ごとに、行のサマリーを表示するデータテンプレートを挿入し、グリッドのサイズに影響することなくテキストボックスなどの他のコントロールで詳細を表示/提供することができます。このテンプレートを使用して、グループ化されたデータを表示する階層グリッドを作成することもできます。

次の図に、行詳細テンプレートから表示される各行の詳細を示します。

FlexGridに行の詳細テンプレートを追加します

1. XAMLデザイナーにC1FlexGridコントロールを追加し、コントロールの名前を"grid"として設定します。
2. XAMLコードでは、<Grid>タグ内に3つの列を作成し、製品ID、製品名、注文日などのデータフィールドを表示します。

   XAML	コードのコピー
   <FlexGrid:C1FlexGrid.Columns> <FlexGrid:Column Header="Product ID" Binding="{Binding ProductId}" Width="75" /> <FlexGrid:Column Header="Product Name" Binding="{Binding ProductName}" Width="150" /> <FlexGrid:Column Header="Order Date" Binding="{Binding OrderDate}" Width="300" /> </FlexGrid:C1FlexGrid.Columns>

3. StackPanel内にImageコントロールと6つのTextBlockコントロールを含めるための行の詳細テンプレートを作成します。

   XAML

   コードのコピー

   <FlexGrid:C1FlexGrid.RowDetailsTemplate> <DataTemplate> <StackPanel Background="GhostWhite"> <Image HorizontalAlignment="Left" Name="img" Source="{Binding ImgSource}" Height="64" Margin="10" /> <Grid Margin="0, 10"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <TextBlock Text="Product ID: " FontWeight="Bold" /> <TextBlock Text="{Binding ProductId}" Grid.Column="1" /> <TextBlock Text="Product Name: " FontWeight="Bold" Grid.Row="1" /> <TextBlock Text="{Binding ProductName}" Grid.Column="1" Grid.Row="1" /> <TextBlock Text="Order Date: " FontWeight="Bold" Grid.Row="2" /> <TextBlock Text="{Binding OrderDate}" Grid.Column="1" Grid.Row="2" /> </Grid> </StackPanel> </DataTemplate> </FlexGrid:C1FlexGrid.RowDetailsTemplate>

4. プロジェクト名を右クリックし、メニューから追加|新しいフォルダーを選択して、Resourcesというフォルダを追加します。
5. Resources フォルダーにイメージを追加します。
6. コードビューに切り替え、ProductDetailsというクラスを作成してFlexGridにデータを追加します。
   • Visual Basic
   • C#

   • Visual Basic

   Public Class ProductDetails
       Public Property ProductId() As Integer
           Get
               Return m_ProductId
           End Get
           Set
               m_ProductId = Value
           End Set
       End Property
       Private m_ProductId As Integer
       Public Property ProductName() As String
           Get
               Return m_ProductName
           End Get
           Set
               m_ProductName = Value
           End Set
       End Property
       Private m_ProductName As String
       Public Property OrderDate() As DateTime
           Get
               Return m_OrderDate
           End Get
           Set
               m_OrderDate = Value
           End Set
       End Property
       Private m_OrderDate As DateTime
       Public Property ImgSource() As ImageSource
           Get
               Return m_ImgSource
           End Get
           Set
               m_ImgSource = Value
           End Set
       End Property
       Private m_ImgSource As ImageSource
   End Class
   

   • C#

   public class ProductDetails
   {
       public int ProductId { get; set; }
       public string ProductName { get; set; }
       public DateTime OrderDate { get; set; }
       public ImageSource ImgSource { get; set; }
   }
   

7. 製品のリストを作成し、そのリストにデータを追加し、ItemsSourceプロパティを使用して、FlexGridコントロールをリストに連結します。
   
   • Visual Basic
   • C#

   • Visual Basic

   'リストを作成します
   Dim users As New List(Of ProductDetails)()
   'リストに項目を追加します
   users.Add(New ProductDetails() With {
     .ProductId = 101,
     .ProductName = "飲料",
     .OrderDate = New DateTime(1971, 7, 23, 8, 0, 20),
     .ImgSource = New BitmapImage(New Uri("ms-appx:///Resources/Beverage.png"))
   })
   users.Add(New ProductDetails() With {
     .ProductId = 102,
     .ProductName = "調味料",
     .OrderDate = New DateTime(1974, 1, 17, 12, 30, 10),
     .ImgSource = New BitmapImage(New Uri("ms-appx:///Resources/Condiments.png"))
   })
   users.Add(New ProductDetails() With {
     .ProductId = 103,
     .ProductName = "お菓子",
     .OrderDate = New DateTime(1991, 9, 2, 2, 42, 45),
     .ImgSource = New BitmapImage(New Uri("ms-appx:///Resources/Confections.png"))
   })
   users.Add(New ProductDetails() With {
     .ProductId = 104,
     .ProductName = "家禽",
     .OrderDate = New DateTime(1991, 10, 24, 6, 20, 49),
     .ImgSource = New BitmapImage(New Uri("ms-appx:///Resources/Poultry.png"))
   })
   'グリッドにデータを設定します
   grid.ItemsSource = users
   

   • C#

   //リストを作成します
   List<ProductDetails> users = new List<ProductDetails>();
   
   //リストに項目を追加します
   users.Add(new ProductDetails() { ProductId = 101, ProductName = "飲料",
     OrderDate = new DateTime(1971, 7, 23, 8, 0,20),
     ImgSource = new BitmapImage(new Uri("ms-appx:///Resources/Beverage.png"))});
   users.Add(new ProductDetails() { ProductId = 102, ProductName = "調味料",
     OrderDate = new DateTime(1974, 1, 17, 12,30,10),
     ImgSource = new BitmapImage(new Uri("ms-appx:///Resources/Condiments.png"))});
   users.Add(new ProductDetails() { ProductId = 103, ProductName = "お菓子",
     OrderDate = new DateTime(1991, 9, 2, 2,42,45),
     ImgSource = new BitmapImage(new Uri("ms-appx:///Resources/Confections.png"))});
   users.Add(new ProductDetails() { ProductId = 104, ProductName = "家禽",
     OrderDate = new DateTime(1991, 10, 24, 6,20,49),
     ImgSource = new BitmapImage(new Uri("ms-appx:///Resources/Poultry.png"))});
   
   //グリッドにデータを設定します
   grid.ItemsSource = users;