Procedura: Aggiungere i dettagli della riga a un controllo DataGrid

Articolo
12/17/2024

Quando si usa il controllo DataGrid, è possibile personalizzare la presentazione dei dati aggiungendo una sezione dei dettagli della riga. L'aggiunta di una sezione dei dettagli di riga consente di raggruppare alcuni dati in un modello che è facoltativamente visibile o compresso. Ad esempio, è possibile aggiungere i dettagli della riga a un DataGrid che presenta solo un riepilogo dei dati per ogni riga nel DataGrid, ma presenta più campi dati quando l'utente seleziona una riga. Definisci il modello per la sezione dei dettagli della riga nella proprietà RowDetailsTemplate. La figura seguente mostra un esempio di sezione dei dettagli di una riga.

DataGrid visualizzato con i dettagli della riga

Definisci il modello dei dettagli della riga come XAML inline o come risorsa. Entrambi gli approcci sono illustrati nelle procedure seguenti. Un modello di dati aggiunto come risorsa può essere usato in tutto il progetto senza creare nuovamente il modello. Un modello di dati aggiunto come XAML inline è accessibile solo dal controllo in cui è definito.

Per visualizzare i dettagli delle righe tramite XAML inline

Creare un DataGrid che mostri i dati da una fonte di dati.
Nell'elemento DataGrid aggiungere un elemento RowDetailsTemplate.

Creare un DataTemplate che definisce l'aspetto della sezione dei dettagli della riga.

Il codice XAML seguente mostra il DataGrid e come definire il RowDetailsTemplate inline. Il DataGrid visualizza tre valori in ogni riga e altri tre valori quando viene selezionata la riga.

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

Nel codice seguente viene illustrata la query usata per selezionare i dati visualizzati nella DataGrid. In questo esempio la query seleziona i dati da un'entità che contiene informazioni sui clienti.

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

Per visualizzare i dettagli delle righe tramite una risorsa

Crea un DataGrid che visualizza i dati da un'origine dati.
Aggiungere un elemento Resources all'elemento radice, ad esempio un controllo Window o un controllo Page oppure aggiungere un elemento Resources alla classe Application nel file App.xaml (o Application.xaml).

Nell'elemento delle risorse, creare un DataTemplate che definisce l'aspetto della sezione dei dettagli delle righe.

Il codice XAML seguente mostra la RowDetailsTemplate definita nella classe 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>

Nella DataTemplateimpostare la Direttiva x:Key a un valore che identifica in modo univoco il data template.

Nell'elemento DataGrid impostare la proprietà RowDetailsTemplate sulla risorsa definita nei passaggi precedenti. Assegnare la risorsa come risorsa statica.

Il codice XAML seguente mostra la proprietà RowDetailsTemplate impostata sulla risorsa dell'esempio precedente.

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

Per impostare la visibilità e impedire lo scorrimento orizzontale per i dettagli della riga

Se necessario, impostare la proprietà RowDetailsVisibilityMode su un valore DataGridRowDetailsVisibilityMode.

Per impostazione predefinita, il valore è impostato su VisibleWhenSelected. È possibile impostarlo su Visible per visualizzare i dettagli per tutte le righe o Collapsed per nascondere i dettagli per tutte le righe.
Se necessario, impostare la proprietà AreRowDetailsFrozen su true per impedire lo scorrimento orizzontale della sezione dei dettagli della riga.

Condividi tramite

Procedura: Aggiungere i dettagli della riga a un controllo DataGrid

Per visualizzare i dettagli delle righe tramite XAML inline

Per visualizzare i dettagli delle righe tramite una risorsa

Per impostare la visibilità e impedire lo scorrimento orizzontale per i dettagli della riga

Risorse aggiuntive