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

[アーティクル]
05/04/2023

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

DataGrid shown with row details

行の詳細テンプレートは、インライン 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 を作成します。
Resources 要素を Window コントロールや Page コントロールなどのルート要素に追加するか、Resources 要素を App.xaml (または Application.xaml) ファイルの Application クラスに追加します。

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 Directive をデータテンプレートを一意に識別する値に設定します。

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 を使用して行の詳細を表示するには

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

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

フィードバック

その他のリソース