Postupy: Přidání podrobností řádku do ovládacího prvku DataGrid

Článek
12/19/2024

Když používáte ovládací prvek DataGrid, můžete přidat oddíl podrobností řádku a tím přizpůsobit prezentaci dat. Přidání sekce podrobností řádku ti umožňuje seskupit některá data do šablony, která je podle potřeby viditelná nebo skrytá. Můžete například přidat podrobnosti řádku do DataGrid, který zobrazí pouze souhrn dat pro každý řádek v DataGrid, ale zobrazí více datových polí, když uživatel vybere řádek. Šablonu pro sekci podrobností řádku definujete ve vlastnosti RowDetailsTemplate. Následující obrázek ukazuje příklad části podrobností řádku.

DataGrid zobrazené s podrobnostmi řádku

Šablonu podrobností řádku definujete jako vložený XAML nebo jako zdroj. Oba přístupy jsou uvedené v následujících postupech. Datovou šablonu přidanou jako zdroj je možné použít v celém projektu bez opětovného vytvoření šablony. Šablona dat přidaná jako vložená XAML je přístupná pouze z ovládacího prvku, ve kterém je definována.

Zobrazení podrobností řádku pomocí vloženého kódu XAML

Vytvořte DataGrid, který zobrazuje data ze zdroje dat.
Do elementu DataGrid přidejte prvek RowDetailsTemplate.

Vytvořte DataTemplate, který určuje vzhled sekce podrobností řádku.

Následující XAML ukazuje DataGrid a jak definovat RowDetailsTemplate přímo. DataGrid zobrazí tři hodnoty v každém řádku a tři další hodnoty, když je řádek vybrán.

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

Následující kód ukazuje dotaz, který slouží k výběru dat zobrazených v DataGrid. V tomto příkladu dotaz vybere data z entity, která obsahuje informace o zákaznících.

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

Zobrazení podrobností řádku pomocí prostředku

Vytvořte DataGrid, které zobrazuje data ze zdroje dat.
Přidejte Resources element do kořenového elementu, například ovládací prvek Window nebo ovládací prvek Page, nebo do Application třídy v souboru App.xaml (nebo Application.xaml) přidejte prvek Resources.

V elementu resources vytvořte DataTemplate, který definuje vzhled části řádkových detailů.

Následující XAML ukazuje RowDetailsTemplate definované ve třídě Application.

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

Na DataTemplatenastavte direktivu x:Key na hodnotu, která jedinečně identifikuje šablonu dat.

V DataGrid elementu nastavte vlastnost RowDetailsTemplate na prostředek definovaný v předchozích krocích. Přiřaďte prostředek jako statický prostředek.

Následující XAML ukazuje vlastnost RowDetailsTemplate nastavenou na prostředek z předchozího příkladu.

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

Nastavení viditelnosti a zabránění vodorovného posouvání podrobností řádku

V případě potřeby nastavte vlastnost RowDetailsVisibilityMode na hodnotu DataGridRowDetailsVisibilityMode.

Ve výchozím nastavení je hodnota nastavena na VisibleWhenSelected. Můžete ho nastavit na Visible a zobrazit tak podrobnosti pro všechny řádky nebo Collapsed a skrýt tak podrobnosti pro všechny řádky.
V případě potřeby nastavte vlastnost AreRowDetailsFrozen na true, aby se oddíl podrobností řádku neposouval vodorovně.

Sdílet prostřednictvím

Postupy: Přidání podrobností řádku do ovládacího prvku DataGrid

Zobrazení podrobností řádku pomocí vloženého kódu XAML

Zobrazení podrobností řádku pomocí prostředku

Nastavení viditelnosti a zabránění vodorovného posouvání podrobností řádku

Další materiály