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

[アーティクル]
01/24/2025

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

行の詳細が表示された DataGrid と共に表示される

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

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

データソースからのデータを表示する DataGrid を作成します。
DataGrid 要素に、RowDetailsTemplate 要素を追加します。

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

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

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://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に表示されるデータを選択するために使用されるクエリを示しています。この例では、クエリは顧客情報を含むエンティティからデータを選択します。

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();
}

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

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

データソースからのデータを表示する DataGrid を作成します。
Window コントロールや Page コントロールなどの Resources 要素をルート要素に追加するか、App.xaml (または Application.xaml) ファイルの Application クラスに Resources 要素を追加します。

resources 要素で、行の詳細セクションの外観を定義する 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>

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

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>

可視性を設定し、行の詳細を水平スクロールしないようにするには

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

既定では、値は VisibleWhenSelectedに設定されます。 Visible に設定してすべての行の詳細を表示したり、すべての行の詳細を非表示にする Collapsed したりできます。
必要に応じて、行の詳細セクションが水平方向にスクロールされないように、AreRowDetailsFrozen プロパティを true に設定します。

次の方法で共有

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

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

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

可視性を設定し、行の詳細を水平スクロールしないようにするには

その他のリソース