FlexGrid for WPF
行詳細テンプレート
基本操作 > 行 > 行詳細テンプレート

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

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

Row details through row details template

 

次のセクションでは、FlexGrid .NET 4.5.2および.NET 5 バージョンで行の詳細を実装する方法を学習します。

FlexGrid で行詳細テンプレートを追加するには

  1. WPF アプリケーションで、XAML デザイナにグリッドコントロールをドラッグします。
  2. グリッドに、Product ID、Product Name、Order Date データフィールドを表示する 3 つの列を作成します。
    XAML
    コードのコピー 
    <c1:C1FlexGrid.Columns>
    <c1:Column Header="Product ID" Binding="{Binding ProductId}" Width="75" />
    <c1:Column Header="Product Name" Binding="{Binding ProductName}" Width="150" />
    <c1:Column Header="Order Date" Binding="{Binding OrderDate}" Width="300" />                
</c1:C1FlexGrid.Columns>


  3. XAML で、DockPanel に 1 つの画像コントロールと 6 つのテキストブロックコントロールが埋め込まれた行詳細テンプレートを作成します。
    XAML
    コードのコピー 
    <c1:C1FlexGrid.RowDetailsTemplate>
      <DataTemplate>
          <DockPanel Background="GhostWhite">
              <Image DockPanel.Dock="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, StringFormat=d}" 
                             Grid.Column="1" Grid.Row="2" />
              </Grid>
          </DockPanel>                   
      </DataTemplate>
  </c1:C1FlexGrid.RowDetailsTemplate>

  4. MainWindow.xaml.cs ファイルで、グリッドにデータを追加するためのクラス User を作成します。 
    Public Class User
    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

    public class User
{
    public int ProductId { get; set; }

    public string ProductName { get; set; }

    public DateTime OrderDate { get; set; }

    public ImageSource ImgSource{ get; set; }
            
}

  5. リストを作成してグリッドにデータを挿入し、ItemsSource プロパティを使用してグリッドをリストに連結します。 
    Public Sub New()
    InitializeComponent()

    'Create a list
    Dim users As New List(Of User)()

    'Add items to the list
    users.Add(New User() With {
    .ProductId = 101,
    .ProductName = "Beverages",
    .OrderDate = New DateTime(1971, 7, 23),
    .ImgSource = New BitmapImage(New Uri("pack://application:,,,/Resources/Beverage.png"))
})
    users.Add(New User() With {
    .ProductId = 102,
    .ProductName = "Condiments",
    .OrderDate = New DateTime(1974, 1, 17),
    .ImgSource = New BitmapImage(New Uri("pack://application:,,,/Resources/Condiments.png"))
})
    users.Add(New User() With {
    .ProductId = 103,
    .ProductName = "Confections",
    .OrderDate = New DateTime(1991, 9, 2),
    .ImgSource = New BitmapImage(New Uri("pack://application:,,,/Resources/Confections.png"))
})
    users.Add(New User() With {
    .ProductId = 104,
    .ProductName = "Poultry",
    .OrderDate = New DateTime(1991, 10, 24),
    .ImgSource = New BitmapImage(New Uri("pack://application:,,,/Resources/Poultry.png"))
})

    'Populate the grid
    grid.ItemsSource = users
End Sub

    public MainWindow()
{
    InitializeComponent();

    //Create a list
    List<User> users = new List<User>();

    //Add items to the list
    users.Add(new User() { ProductId = 101, ProductName = "Beverages", OrderDate = new DateTime(1971, 7, 23),
        ImgSource = new BitmapImage(new Uri(@"pack://application:,,,/Resources/Beverage.png")) });
    users.Add(new User() { ProductId = 102, ProductName = "Condiments", OrderDate = new DateTime(1974, 1, 17),
        ImgSource = new BitmapImage(new Uri(@"pack://application:,,,/Resources/Condiments.png")) });
    users.Add(new User() { ProductId = 103, ProductName = "Confections", OrderDate = new DateTime(1991, 9, 2),
        ImgSource = new BitmapImage(new Uri(@"pack://application:,,,/Resources/Confections.png")) });
    users.Add(new User() { ProductId = 104, ProductName = "Poultry", OrderDate = new DateTime(1991, 10, 24),
        ImgSource = new BitmapImage(new Uri(@"pack://application:,,,/Resources/Poultry.png")) });

    //Populate the grid
    grid.ItemsSource = users;             
}

FlexGrid で行詳細テンプレートを追加するには

  1. WPF コアアプリケーションで、XAML デザイナにグリッドコントロールをドラッグします。
  2. グリッドに、ProductID、Product Name、Order Date データフィールドを表示する 3 つの列を作成します。
    XAML
    コードのコピー 
    <c1:FlexGrid.Columns>
    <c1:GridColumn Header="ProductID" Binding="ProductId" Width="75" />
    <c1:GridColumn Header="Product Name" Binding="ProductName" Width="150" />
    <c1:GridColumn Header="Order Date" Binding="OrderDate" Width="300" />
</c1:FlexGrid.Columns>


  3. XAML で、DockPanel に 1 つの画像コントロールと 6 つのテキストブロックコントロールが埋め込まれた行詳細テンプレートを作成します。
    XAML
    コードのコピー 
    <DataTemplate>
      <DockPanel Background="GhostWhite">
          <Image DockPanel.Dock="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, StringFormat=d}" 
           Grid.Column="1" Grid.Row="2" />
          </Grid>
      </DockPanel>
  </DataTemplate>

  4. MainWindow.xaml.cs ファイルで、グリッドにデータを追加するためのクラス User を作成します。
    C#
    コードのコピー 
    public class User
{
    public int ProductId { get; set; }
    public string ProductName { get; set; }
    public DateTime OrderDate { get; set; }
    public ImageSource ImgSource { get; set; }

}

  5. リストを作成してグリッドにデータを挿入し、ItemsSource プロパティを使用してグリッドをリストに連結します。
    C#
    コードのコピー 
    InitializeComponent();

//Create a list
List<User> users = new List<User>();

//Add items to the list
users.Add(new User()
{
    ProductId = 101,
    ProductName = "Beverages",
    OrderDate = new DateTime(1971, 7, 23),
    ImgSource = new BitmapImage(new Uri(@"pack://application:,,,/Resources/Beverage.png"))
});
users.Add(new User()
{
    ProductId = 102,
    ProductName = "Condiments",
    OrderDate = new DateTime(1974, 1, 17),
    ImgSource = new BitmapImage(new Uri(@"pack://application:,,,/Resources/Condiments.png"))
});
users.Add(new User()
{
    ProductId = 103,
    ProductName = "Confections",
    OrderDate = new DateTime(1991, 9, 2),
    ImgSource = new BitmapImage(new Uri(@"pack://application:,,,/Resources/Confections.png"))
});
users.Add(new User()
{
    ProductId = 104,
    ProductName = "Poultry",
    OrderDate = new DateTime(1991, 10, 24),
    ImgSource = new BitmapImage(new Uri(@"pack://application:,,,/Resources/Poultry.png"))
});

//Populate the grid
grid.ItemsSource = users;

 

 

Copyright © MESCIUS inc. All rights reserved.