次の方法で共有

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

  • [アーティクル]

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

DataGrid shown with row details

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

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

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

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

  3. 行の詳細セクションの外観を定義する 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

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

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

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

  3. 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>

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

  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 に設定して、行の詳細セクションが水平方向にスクロールしないようにします。