方法: DataGrid コントロールに行の詳細を追加する

DataGrid コントロールを使用するときに、行の詳細セクションを追加して、データ表示をカスタマイズできます。 行の詳細セクションを追加すると、テンプレート内のデータをグループ化して、必要に応じて表示と非表示を切り替えることができます。 たとえば、DataGrid 内の各行の概要のみを表示する DataGrid に行の詳細を追加して、ユーザーが行を選択したときに詳細なデータ フィールドが表示されるようにします。 RowDetailsTemplate プロパティの行の詳細セクションに対して、テンプレートを定義します。 次の図に、行の詳細セクションの例を示します。

行の詳細テンプレートは、インライン XAML またはリソースとして定義します。 両方の手順について次に示します。 リソースとして追加されたテンプレートは、テンプレートを再作成しなくてもプロジェクト全体で使用できます。 インライン XAML として追加されたデータ テンプレートは、それが定義されているコントロールからのみアクセスできます。

インライン XAML を使用して行の詳細を表示するには

1. データ ソースのデータを表示する DataGrid を作成します。

2. DataGrid 要素に、RowDetailsTemplate 要素を追加します。

3. 行の詳細セクションの外観を定義する DataTemplate を作成します。

   次の XAML は、DataGrid、および RowDetailsTemplate をインラインで定義する方法を示しています。 DataGrid は、各行内の 3 つの値、および行が選択されたときにさらに表示される 3 つの値を表示します。

   <Window x:Class="WpfApplication1.MainWindow"
           xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
           Title="MainWindow" Height="350" Width="525" 
           Loaded="Window_Loaded">
       <Grid>
           <DataGrid Name="dataGrid1" IsReadOnly="True" AutoGenerateColumns="False" >
               <DataGrid.Columns>
                   <DataGridTextColumn Header="Company Name" Binding="{Binding CompanyName}"></DataGridTextColumn>
                   <DataGridTextColumn Header="Contact First Name" Binding="{Binding FirstName}"></DataGridTextColumn>
                   <DataGridTextColumn Header="Contact Last Name" Binding="{Binding LastName}"></DataGridTextColumn>
               </DataGrid.Columns>
               <DataGrid.RowDetailsTemplate>
                   <DataTemplate>
                       <Border BorderThickness="0" Background="BlanchedAlmond" Padding="10">
                           <StackPanel Orientation="Vertical">
                               <StackPanel Orientation="Horizontal">
                                   <TextBlock FontSize="12" Text="Email: " VerticalAlignment="Center" />
                                   <TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding EmailAddress}" VerticalAlignment="Center" />
                               </StackPanel>
                               <StackPanel Orientation="Horizontal">
                                   <TextBlock FontSize="12" Text="Phone: " VerticalAlignment="Center" />
                                   <TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding Phone}" VerticalAlignment="Center" />
                               </StackPanel>
                               <StackPanel Orientation="Horizontal">
                                   <TextBlock FontSize="12" Text="Sales Person: " VerticalAlignment="Center" />
                                   <TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding SalesPerson}" VerticalAlignment="Center" />
                               </StackPanel>
                           </StackPanel>
                       </Border>
                   </DataTemplate>
               </DataGrid.RowDetailsTemplate>
           </DataGrid>
       </Grid>
   </Window>
   

   次のコードは、DataGrid に表示されるデータを選択する際に使用されるクエリを示しています。 この例では、クエリによって、顧客情報を含むエンティティのデータが選択されます。

   Dim advenWorksEntities As AdventureWorksLT2008Entities = New AdventureWorksLT2008Entities
   
   Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
       Dim customers As ObjectQuery(Of Customer) = advenWorksEntities.Customers
       Dim query = _
           From customer In customers _
           Order By customer.CompanyName _
           Select _
             customer.LastName, _
             customer.FirstName, _
             customer.CompanyName, _
             customer.Title, _
             customer.EmailAddress, _
             customer.Phone, _
             customer.SalesPerson
   
       dataGrid1.ItemsSource = query.ToList()
   End Sub
   

   private void Window_Loaded(object sender, RoutedEventArgs e)
   {
       AdventureWorksLT2008Entities advenWorksEntities = new AdventureWorksLT2008Entities();
   
       ObjectQuery<Customer> customers = advenWorksEntities.Customers;
   
       var query =
       from customer in customers
       orderby customer.CompanyName
       select new
       {
           customer.LastName,
           customer.FirstName,
           customer.CompanyName,
           customer.Title,
           customer.EmailAddress,
           customer.Phone,
           customer.SalesPerson
       };
   
       dataGrid1.ItemsSource = query.ToList();
   }
   

リソースを使用して行の詳細を表示するには

1. データ ソースのデータを表示する DataGrid を作成します。

2. Resources 要素を Window コントロールや Page コントロールなどのルート要素に追加するか、または Resources 要素を App.xaml (または Application.xaml) ファイル内の Application クラスに追加します。

3. リソース要素に、行の詳細セクションの外観を定義する DataTemplate を作成します。

   次の XAML は、Application クラスに定義された RowDetailsTemplate を示しています。

   <Application.Resources>
       <DataTemplate x:Key="CustomerDetail">
           <Border BorderThickness="0" Background="BlanchedAlmond" Padding="10">
               <StackPanel Orientation="Vertical">
                   <StackPanel Orientation="Horizontal">
                       <TextBlock FontSize="12" Text="Email: " VerticalAlignment="Center" />
                       <TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding EmailAddress}" VerticalAlignment="Center" />
                   </StackPanel>
                   <StackPanel Orientation="Horizontal">
                       <TextBlock FontSize="12" Text="Phone: " VerticalAlignment="Center" />
                       <TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding Phone}" VerticalAlignment="Center" />
                   </StackPanel>
                   <StackPanel Orientation="Horizontal">
                       <TextBlock FontSize="12" Text="Sales Person: " VerticalAlignment="Center" />
                       <TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding SalesPerson}" VerticalAlignment="Center" />
                   </StackPanel>
               </StackPanel>
           </Border>
       </DataTemplate>
   </Application.Resources>
   

4. DataTemplate で、x:Key ディレクティブ に、データ テンプレートを一意に識別する値を設定します。

5. DataGrid 要素で、RowDetailsTemplate プロパティを、前の手順で定義したリソースに設定します。 リソースを静的リソースとして割り当てます。

   次の XAML は、RowDetailsTemplate プロパティが前の例のリソースに設定された状態を示しています。

   <DataGrid Name="dataGrid1" IsReadOnly="True" AutoGenerateColumns="False" RowDetailsTemplate="{StaticResource CustomerDetail}" >
       <DataGrid.Columns>
           <DataGridTextColumn Header="Company Name" Binding="{Binding CompanyName}"></DataGridTextColumn>
           <DataGridTextColumn Header="Contact First Name" Binding="{Binding FirstName}"></DataGridTextColumn>
           <DataGridTextColumn Header="Contact Last Name" Binding="{Binding LastName}"></DataGridTextColumn>
       </DataGrid.Columns>
   </DataGrid>
   

行の詳細の表示を設定し、水平方向にスクロールできないようにするには

1. 必要に応じて、RowDetailsVisibilityMode プロパティを DataGridRowDetailsVisibilityMode の値に設定します。

   既定では、値は VisibleWhenSelected に設定されます。 すべての行の詳細を表示するには、この値を Visible に設定し、すべての行の詳細を非表示にするには、この値を Collapsed に設定します。

2. 必要に応じて、AreRowDetailsFrozen プロパティを true に設定して、行の詳細セクションを水平方向にスクロールできないようにします。