Procedura: aggiungere dettagli di riga un controllo DataGrid

  • Articolo

Quando si usa il DataGrid controllo , è possibile personalizzare la presentazione dei dati aggiungendo una sezione dettagli 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 dettagli di riga a un DataGrid oggetto che presenta solo un riepilogo dei dati per ogni riga in DataGrid, ma presenta più campi dati quando l'utente seleziona una riga. Definire il modello per la sezione dei dettagli della riga nella RowDetailsTemplate proprietà . La figura seguente mostra un esempio di sezione dei dettagli di riga.

DataGrid shown with row details

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

  1. Creare un oggetto DataGrid che visualizza i dati da un'origine dati.

  2. Nell'elemento DataGrid aggiungere un elemento RowDetailsTemplate.

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

    Il codice XAML seguente illustra e DataGrid come definire l'inline RowDetailsTemplate . Visualizza DataGrid 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 in 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

  1. Creare un oggetto DataGrid che visualizza i dati da un'origine dati.

  2. Aggiungere un Resources elemento all'elemento radice, ad esempio un Window controllo o un Page controllo, oppure aggiungere un Resources elemento alla Application classe nel file App.xaml (o Application.xaml).

  3. Nell'elemento resources creare un oggetto DataTemplate che definisce l'aspetto della sezione dei dettagli della riga.

    Il codice XAML seguente mostra l'oggetto RowDetailsTemplate definito nella Application classe .

    <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. DataTemplateIn impostare la direttiva x:Key su un valore che identifica in modo univoco il modello di dati.

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

    Il codice XAML seguente mostra la RowDetailsTemplate proprietà 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

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

    Per impostazione predefinita, il valore è impostato su VisibleWhenSelected. È possibile impostarla su Visible per visualizzare i dettagli per tutte le righe o Collapsed per nascondere i dettagli per tutte le righe.

  2. Se necessario, impostare la AreRowDetailsFrozen proprietà su true per impedire lo scorrimento orizzontale della sezione dei dettagli della riga.