방법: DataGrid 컨트롤에 행 세부 정보 추가How to: Add Row Details to a DataGrid Control

컨트롤을 사용 하는 경우 DataGrid 행 세부 정보 섹션을 추가 하 여 데이터 표시를 사용자 지정할 수 있습니다.When using the DataGrid control, you can customize the data presentation by adding a row details section. 행 세부 정보 섹션을 추가 하면 선택적으로 표시 하거나 축소할 수 있는 일부 데이터를 템플릿에서 그룹화 할 수 있습니다.Adding a row details section enables you to group some data in a template that is optionally visible or collapsed. 예를 들어의 DataGrid 각 행에 대 한 데이터 요약만 제공 하 고 DataGrid 사용자가 행을 선택할 때 더 많은 데이터 필드를 표시 하는 행 세부 정보를에 추가할 수 있습니다.For example, you can add row details to a DataGrid that presents only a summary of the data for each row in the DataGrid, but presents more data fields when the user selects a row. 속성에서 행 세부 정보 섹션의 템플릿을 정의 합니다 RowDetailsTemplate .You define the template for the row details section in the RowDetailsTemplate property. 다음 그림에서는 행 세부 정보 섹션의 예를 보여 줍니다.The following illustration shows an example of a row details section.

행 세부 정보가 표시된 DataGridDataGrid shown with row details

행 세부 정보 템플릿을 인라인 XAML 또는 리소스로 정의 합니다.You define the row details template as either inline XAML or as a resource. 다음 절차에서는 두 가지 방법을 모두 보여 줍니다.Both approaches are shown in the following procedures. 리소스로 추가 된 데이터 템플릿은 템플릿을 다시 만들지 않고 프로젝트 전체에서 사용할 수 있습니다.A data template that is added as a resource can be used throughout the project without re-creating the template. 인라인 XAML로 추가 된 데이터 템플릿은 해당 템플릿이 정의 된 컨트롤 에서만 액세스할 수 있습니다.A data template that is added as inline XAML is only accessible from the control where it is defined.

인라인 XAML을 사용 하 여 행 세부 정보를 표시 하려면To display row details by using inline XAML

  1. DataGrid데이터 원본의 데이터를 표시 하는를 만듭니다.Create a DataGrid that displays data from a data source.

  2. DataGrid 요소에서 RowDetailsTemplate 요소를 추가합니다.In the DataGrid element, add a RowDetailsTemplate element.

  3. DataTemplate행 세부 정보 섹션의 모양을 정의 하는을 만듭니다.Create a DataTemplate that defines the appearance of the row details section.

    다음 XAML은 DataGrid 및 인라인을 정의 하는 방법을 보여 줍니다 RowDetailsTemplate .The following XAML shows the DataGrid and how to define the RowDetailsTemplate inline. DataGrid 각 행에 3 개의 값을 표시 하 고 행을 선택 하면 3 개의 값을 더 합니다.The DataGrid displays three values in each row and three more values when the row is selected.

    <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 .The following code shows the query that is used to select the data that is displayed in the DataGrid. 이 예제에서 쿼리는 고객 정보를 포함 하는 엔터티에서 데이터를 선택 합니다.In this example, the query selects data from an entity that contains customer information.

    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
    

리소스를 사용 하 여 행 세부 정보를 표시 하려면To display row details by using a resource

  1. DataGrid데이터 원본의 데이터를 표시 하는를 만듭니다.Create a DataGrid that displays data from a data source.

  2. 요소를 Resources 컨트롤 또는 컨트롤과 같은 루트 요소에 추가 Window Page 하거나 Resources Application app.xaml (또는 app.xaml) 파일의 클래스에 요소를 추가 합니다.Add a Resources element to the root element, such as a Window control or a Page control, or add a Resources element to the Application class in the App.xaml (or Application.xaml) file.

  3. Resources 요소에서 DataTemplate 행 세부 정보 섹션의 모양을 정의 하는을 만듭니다.In the resources element, create a DataTemplate that defines the appearance of the row details section.

    다음 XAML은 클래스에 정의 된를 보여 줍니다 RowDetailsTemplate Application .The following XAML shows the RowDetailsTemplate defined in the Application class.

    <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 지시어 를 데이터 템플릿을 고유 하 게 식별 하는 값으로 설정 합니다.On the DataTemplate, set the x:Key Directive to a value that uniquely identifies the data template.

  5. 요소에서 DataGrid RowDetailsTemplate 속성을 이전 단계에서 정의한 리소스로 설정 합니다.In the DataGrid element, set the RowDetailsTemplate property to the resource defined in the previous steps. 리소스를 정적 리소스로 할당 합니다.Assign the resource as a static resource.

    다음 XAML에서는 RowDetailsTemplate 이전 예제의 리소스로 설정 된 속성을 보여 줍니다.The following XAML shows the RowDetailsTemplate property set to the resource from the previous example.

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

행 세부 정보에 대 한 표시 여부를 설정 하 고 가로 스크롤을 방지 하려면To set visibility and prevent horizontal scrolling for row details

  1. 필요한 경우 RowDetailsVisibilityMode 속성을 값으로 설정 DataGridRowDetailsVisibilityMode 합니다.If needed, set the RowDetailsVisibilityMode property to a DataGridRowDetailsVisibilityMode value.

    기본적으로 이 값은 VisibleWhenSelected로 설정되어 있습니다.By default, the value is set to VisibleWhenSelected. Visible모든 행에 대 한 세부 정보를 표시 하거나 Collapsed 모든 행에 대 한 세부 정보를 숨기도록로 설정할 수 있습니다.You can set it to Visible to show the details for all of the rows or Collapsed to hide the details for all rows.

  2. 필요한 경우 속성을로 설정 하 여 AreRowDetailsFrozen true 행 세부 정보 섹션의 가로 스크롤을 방지 합니다.If needed, set the AreRowDetailsFrozen property to true to prevent the row details section from scrolling horizontally.