방법: DataGrid 컨트롤에 행 세부 정보 추가

아티클
05/04/2023

DataGrid 컨트롤을 사용할 때 행 세부 정보 섹션을 추가하여 데이터 프레젠테이션을 사용자 지정할 수 있습니다. 행 세부 정보 섹션을 추가하면 선택적으로 표시되거나 축소된 템플릿의 일부 데이터를 그룹화할 수 있습니다. 예를 들어, DataGrid의 각 행에 대한 데이터 요약만 표시하지만 사용자가 행을 선택할 때 더 많은 데이터 필드를 표시하는 DataGrid에 행 세부 정보를 추가할 수 있습니다. RowDetailsTemplate 속성에서 행 세부 정보 섹션에 대한 템플릿을 정의합니다. 다음 그림에서는 행 세부 정보 섹션의 예를 보여 줍니다.

행 세부 정보가 표시된 DataGrid

행 세부 정보 템플릿을 인라인 XAML 또는 리소스로 정의합니다. 다음 절차에서는 두 가지 접근 방식을 모두 보여 줍니다. 리소스로 추가된 데이터 템플릿은 템플릿을 다시 만들지 않고도 프로젝트 전체에서 사용할 수 있습니다. 인라인 XAML로 추가된 데이터 템플릿은 정의된 컨트롤에서만 액세스할 수 있습니다.

인라인 XAML을 사용하여 행 세부 정보를 표시하려면

데이터 원본의 데이터를 표시하는 DataGrid를 만듭니다.
DataGrid 요소에서 RowDetailsTemplate 요소를 추가합니다.

행 세부 정보 섹션의 모양을 정의하는 DataTemplate을 만듭니다.

다음 XAML은 DataGrid와 RowDetailsTemplate 인라인을 정의하는 방법을 보여 줍니다. DataGrid는 각 행에 세 개의 값을 표시하고 행을 선택하면 세 개의 값을 더 표시합니다.

<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 요소를 추가합니다.

리소스 요소에서 행 세부 정보 섹션의 모양을 정의하는 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을 사용하여 행 세부 정보를 표시하려면

리소스를 사용하여 행 세부 정보를 표시하려면

행 세부 정보에 대한 표시 여부를 설정하고 가로 스크롤을 방지하려면

피드백

추가 리소스