Condividi tramite


Panoramica di GridView

La modalità di visualizzazione GridView è una delle modalità di visualizzazione del controllo ListView. La classe GridView e le relative classi di supporto consentono a te e ai tuoi utenti di visualizzare le raccolte di elementi in una tabella che usualmente usa pulsanti come intestazioni di colonna interattive. In questo argomento viene presentata la classe GridView e ne viene descritto l'uso.

Che cos'è una visualizzazione GridView?

La modalità di visualizzazione GridView visualizza un elenco di elementi di dati associando i campi dati alle colonne e visualizzando un'intestazione di colonna per identificare il campo. Il modello predefinito GridView implementa i pulsanti come intestazioni di colonna. Usando i pulsanti per le intestazioni di colonna, è possibile implementare importanti funzionalità di interazione utente; ad esempio, gli utenti possono fare clic sull'intestazione di colonna per ordinare GridView dati in base al contenuto di una colonna specifica.

Nota

I controlli dei pulsanti che GridView utilizza per le intestazioni di colonna derivano da ButtonBase.

La figura seguente mostra una visualizzazione GridView del contenuto di ListView.

Screenshot che mostra la vista GridView del contenuto ListView.

GridView colonne sono rappresentate da oggetti GridViewColumn, che possono ridimensionarsi automaticamente in base al loro contenuto. Facoltativamente, è possibile impostare in modo esplicito un GridViewColumn su una larghezza specifica. È possibile ridimensionare le colonne trascinando la maniglia tra le intestazioni delle colonne. È anche possibile aggiungere, rimuovere, sostituire e riordinare le colonne in modo dinamico perché questa funzionalità è incorporata in GridView. Tuttavia, GridView non può aggiornare direttamente i dati visualizzati.

Nell'esempio seguente viene illustrato come definire un GridView che visualizza i dati dei dipendenti. In questo esempio, ListView definisce il EmployeeInfoDataSource come ItemsSource. Le definizioni delle proprietà di DisplayMemberBinding associano il contenuto di GridViewColumn alle categorie di dati EmployeeInfoDataSource.


<ListView ItemsSource="{Binding Source={StaticResource EmployeeInfoDataSource}}">

    <ListView.View>

        <GridView AllowsColumnReorder="true" ColumnHeaderToolTip="Employee Information">

            <GridViewColumn DisplayMemberBinding="{Binding Path=FirstName}" Header="First Name" Width="100"/>

            <GridViewColumn DisplayMemberBinding="{Binding Path=LastName}" Width="100">
                <GridViewColumnHeader>Last Name
                    <GridViewColumnHeader.ContextMenu>
                        <ContextMenu MenuItem.Click="LastNameCM_Click" Name="LastNameCM">
                            <MenuItem Header="Ascending" />
                            <MenuItem Header="Descending" />
                        </ContextMenu>
                    </GridViewColumnHeader.ContextMenu>
                </GridViewColumnHeader>
            </GridViewColumn>

            <GridViewColumn DisplayMemberBinding="{Binding Path=EmployeeNumber}" Header="Employee No." Width="100"/>
        </GridView>

    </ListView.View>
</ListView>

La figura seguente mostra la tabella creata dall'esempio precedente. Il controllo GridView visualizza i dati di un oggetto ItemsSource:

Screenshot che mostra un controllo ListView con output GridView.

Layout e stile GridView

Le celle di colonna e l'intestazione di colonna di un GridViewColumn hanno la stessa larghezza. Per impostazione predefinita, ogni colonna ridimensiona la larghezza per adattarne il contenuto. Facoltativamente, è possibile impostare una colonna su una larghezza fissa.

Il contenuto dei dati correlato viene visualizzato in righe orizzontali. Nell'illustrazione precedente, ad esempio, il cognome, il nome e il numero ID di ogni dipendente vengono visualizzati come set perché vengono visualizzati in una riga orizzontale.

Definizione e applicazione di stili alle colonne nel GridView

Quando si definisce il campo dati da visualizzare in un GridViewColumn, usare le proprietà DisplayMemberBinding, CellTemplateo CellTemplateSelector. La proprietà DisplayMemberBinding ha la precedenza su una delle proprietà del modello.

Per specificare come allineare il contenuto in una colonna del GridView, definire un CellTemplate. Non utilizzare le proprietà HorizontalContentAlignment e VerticalContentAlignment per il contenuto ListView visualizzato utilizzando un GridView.

Per specificare le proprietà di modello e stile per le intestazioni di colonna, usare le classi GridView, GridViewColumne GridViewColumnHeader. Per ulteriori informazioni, vedere Stili e modelli di intestazione delle colonne di GridView.

Aggiunta di elementi visivi in un GridView

Per aggiungere elementi visivi, ad esempio controlli CheckBox e Button, a una modalità di visualizzazione GridView, usare modelli o stili.

Se si definisce in modo esplicito un elemento visivo come elemento dati, può essere visualizzato una sola volta in un GridView. Questa limitazione esiste perché un elemento può avere un solo elemento padre e pertanto può apparire una sola volta nella struttura ad albero visuale.

Applicare stili alle righe in una struttura GridView

Usare le classi GridViewRowPresenter e GridViewHeaderRowPresenter per formattare e visualizzare le righe di un GridView. Per un esempio di come stilizzare le righe in una modalità di visualizzazione GridView, vedere Stilizzare una riga in un ListView che implementa un GridView.

Problemi di allineamento quando si usa ItemContainerStyle

Per evitare problemi di allineamento tra le intestazioni di colonna e le celle, non impostare una proprietà o specificare un modello che influenzi la larghezza di un elemento all'interno di un ItemContainerStyle. Ad esempio, non impostare la proprietà Margin o specificare un ControlTemplate che aggiunge un CheckBox a un ItemContainerStyle definito in un controllo ListView. Specificare invece le proprietà e i modelli che influiscono sulla larghezza delle colonne direttamente nelle classi che definiscono una modalità di visualizzazione GridView.

Ad esempio, per aggiungere un CheckBox alle righe in modalità di visualizzazione GridView, aggiungere il CheckBox a un DataTemplatee quindi impostare la proprietà CellTemplate a quel DataTemplate.

Interazioni utente con gridView

Quando si usa un GridView nell'applicazione, gli utenti possono interagire e modificare la formattazione del GridView. Ad esempio, gli utenti possono riordinare le colonne, ridimensionare una colonna, selezionare gli elementi in una tabella e scorrere il contenuto. È anche possibile definire un gestore di eventi che risponde quando un utente clicca sul pulsante dell'intestazione della colonna. Il gestore eventi può eseguire operazioni come l'ordinamento dei dati visualizzati nella GridView in base al contenuto di una colonna.

L'elenco seguente illustra in modo più dettagliato le funzionalità dell'uso di GridView per l'interazione dell'utente:

  • Riordinare le colonne utilizzando il trascinamento.

    Gli utenti possono riordinare le colonne in un GridView premendo il pulsante sinistro del mouse mentre si trova su un'intestazione di colonna e quindi trascinando tale colonna in una nuova posizione. Mentre l'utente trascina l'intestazione di colonna, viene visualizzata una versione fluttuante dell'intestazione e una linea nera continua che mostra dove inserire la colonna.

    Se si desidera modificare lo stile predefinito per la versione galleggiante di un'intestazione, specificare un ControlTemplate per un tipo di GridViewColumnHeader che viene attivato quando la proprietà Role è impostata su Floating. Per ulteriori informazioni, consultare Crea uno stile per l'intestazione di una colonna GridView trascinata.

  • Ridimensionare una colonna al relativo contenuto.

    Gli utenti possono fare doppio clic sul gripper a destra di un'intestazione di colonna per ridimensionare una colonna per adattarne il contenuto.

    Nota

    È possibile impostare la proprietà Width su Double.NaN per produrre lo stesso effetto.

  • Selezionare gli elementi di riga.

    Gli utenti possono selezionare uno o più elementi in un GridView.

    Per modificare il Style di un elemento selezionato, consulta utilizzare meccanismi per applicare uno stile agli elementi selezionati in un ListView.

  • Scorrere per visualizzare il contenuto che inizialmente non è visibile sullo schermo.

    Se le dimensioni del GridView non sono sufficienti per visualizzare tutti gli elementi, gli utenti possono scorrere orizzontalmente o verticalmente usando barre di scorrimento, fornite da un controllo ScrollViewer. Un ScrollBar è nascosto se tutto il contenuto è visibile in una direzione specifica. Intestazioni di colonna non scorrono quando si utilizza una barra di scorrimento verticale, ma scorrono orizzontalmente.

  • Interagire con le colonne facendo clic sui pulsanti dell'intestazione di colonna.

    Quando gli utenti fanno clic su un pulsante di intestazione di colonna, possono ordinare i dati visualizzati nella colonna se hai fornito un algoritmo di ordinamento.

    È possibile gestire l'evento Click associato ai pulsanti delle intestazioni di colonna per implementare funzionalità come un algoritmo di ordinamento. Per gestire l'evento Click per una singola intestazione di colonna, impostare un gestore eventi nel GridViewColumnHeader. Per impostare un gestore eventi che gestisce l'evento Click per tutte le intestazioni di colonna, impostare il gestore sul controllo ListView.

Recupero di altre visualizzazioni personalizzate

La classe GridView, derivata dalla classe astratta ViewBase, è solo una delle possibili modalità di visualizzazione per la classe ListView. È possibile creare altre viste personalizzate per ListView derivando dalla classe ViewBase. Per un esempio di modalità di visualizzazione personalizzata, vedere Creare una modalità visualizzazione personalizzata per un controllo ListView.

Classi di supporto di GridView

Le classi seguenti supportano la modalità di visualizzazione GridView.

Vedere anche