Panoramica di GridView

GridView modalità di visualizzazione è una delle opzioni di visualizzazione per un controllo ListView. La GridView classe e le classi di supporto consentono a voi e ai vostri utenti di visualizzare le raccolte di elementi in una tabella che generalmente utilizza pulsanti come intestazioni di colonna interattive. In questo argomento viene presentata la GridView classe e ne viene descritto l'uso.

Che cos'è una visualizzazione GridView?

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

La figura seguente mostra una GridView visualizzazione del ListView contenuto.

GridView le colonne sono rappresentate da GridViewColumn oggetti, che possono ridimensionare automaticamente il contenuto. Facoltativamente, è possibile impostare in modo esplicito un oggetto 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 è possibile aggiornare direttamente i dati visualizzati.

Nell'esempio seguente viene illustrato come definire un GridView oggetto che visualizza i dati dei dipendenti. In questo esempio, ListView definisce l'oggetto 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>

Layout e stile di GridView

Le celle di colonna e l'intestazione di colonna di un oggetto 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 stile delle colonne in un GridView

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

Per specificare l'allineamento del contenuto in una colonna di un GridView, definire un CellTemplate. Non utilizzare le proprietà HorizontalContentAlignment e VerticalContentAlignment per il contenuto ListView visualizzato tramite un GridView.

Per specificare le proprietà di modello e stile per le intestazioni di colonna, usare le GridViewclassi , GridViewColumne GridViewColumnHeader . Per ulteriori informazioni, vedere Panoramica degli Stili e dei Modelli dell'Intestazione delle Colonne di GridView.

Aggiunta di elementi visivi a un controllo GridView

Per aggiungere elementi visivi, come i controlli CheckBox e Button, nella modalità di visualizzazione GridView, utilizzare modelli o stili.

Se si definisce in modo esplicito un elemento visivo come elemento dati, può essere visualizzato una sola volta in un oggetto 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.

Stilizzazione delle righe in un GridView

Usare le GridViewRowPresenter classi e GridViewHeaderRowPresenter per formattare e visualizzare le righe di un oggetto GridView. Per un esempio di come applicare stili alle righe in modalità di visualizzazione GridView, consultare Applicare uno stile a una riga in un controllo ListView che implementa un controllo GridView.

Problemi di allineamento quando si usa ItemContainerStyle

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

Ad esempio, per aggiungere un oggetto CheckBox alle righe in modalità di visualizzazione GridView, aggiungere un DataTemplate a CheckBox e quindi impostare la proprietà CellTemplate su tale oggetto DataTemplate.

Interazioni utente con gridView

Quando si usa un oggetto GridView nell'applicazione, gli utenti possono interagire con e modificare la formattazione di 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 eventi che risponde quando un utente fa clic sul pulsante dell'intestazione di colonna. Il gestore eventi può eseguire operazioni come l'ordinamento dei dati visualizzati nell'oggetto GridView in base al contenuto di una colonna.

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

• Riordinare le colonne usando il metodo trascina e rilascia.

  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 mobile dell'intestazione e una linea nera continua che mostra dove inserire la colonna.

  Se si desidera modificare lo stile predefinito per la versione flottante di un'intestazione, specificare un ControlTemplate per un tipo GridViewColumnHeader che viene attivato quando la proprietà Role è impostata su Floating. Per altre informazioni, vedere Creare uno stile per un'intestazione di 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.

  Annotazioni

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

• Selezionare gli elementi di riga.

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

  Per modificare il Style di un elemento selezionato, vedere Usare trigger per applicare uno stile agli elementi selezionati in un ListView.

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

  Se le dimensioni di GridView non sono sufficienti per visualizzare tutti gli elementi, gli utenti possono scorrere orizzontalmente o verticalmente usando barre di scorrimento, fornite da un ScrollViewer controllo . Un ScrollBar oggetto viene nascosto se tutto il contenuto è visibile in una direzione specifica. Le intestazioni delle colonne non scorrono con 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 è stato fornito un algoritmo di ordinamento.

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

Recupero di altre visualizzazioni personalizzate

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

Classi di supporto di GridView

Le classi seguenti supportano la GridView modalità di visualizzazione.

• GridViewColumn

• GridViewColumnHeader

• GridViewRowPresenter

• GridViewHeaderRowPresenter

• GridViewColumnCollection

• GridViewColumnHeaderRole

Stili e modelli

È possibile personalizzare l'aspetto delle intestazioni della colonna GridView modificandone gli stili e i modelli. In questa sezione viene illustrato l'ordine di precedenza delle proprietà che si usano per personalizzare l'intestazione di una colonna nella modalità di visualizzazione GridView di un controllo ListView. Per altre informazioni, vedere Che cosa sono gli stili e i modelli? e Come creare un modello per un controllo.

Personalizzazione di un'intestazione di colonna in un controllo GridView

Le proprietà che definiscono il contenuto, il layout e lo stile di un'intestazione di colonna in un GridView sono disponibili in molte classi correlate. Alcune di queste proprietà hanno funzionalità simili o uguali.

Le righe nella tabella seguente mostrano gruppi di proprietà che eseguono la stessa funzione. È possibile usare queste proprietà per personalizzare le intestazioni di colonna in un GridView. L'ordine di precedenza per le proprietà correlate è da destra a sinistra, dove la proprietà nella colonna destra più lontana ha la precedenza più alta. Ad esempio, se un ContentTemplate oggetto è impostato sull'oggetto GridViewColumnHeader e l'oggetto HeaderTemplateSelector è impostato sull'oggetto associato GridViewColumn, ha la ContentTemplate precedenza. In questo scenario, HeaderTemplateSelector non ha alcun effetto.

Proprietà correlate per le intestazioni di colonna in un controllo GridView

¹Per le Proprietà del modello di intestazione, se si impostano sia le proprietà del modello che quelle del selettore del modello, la proprietà del modello ha la precedenza. Ad esempio, se si impostano le proprietà ContentTemplate e ContentTemplateSelector, la proprietà ContentTemplate ha la precedenza.

Vedere anche

• ListView
• ListViewItem
• GridViewColumn
• GridViewColumnHeader
• GridViewRowPresenter
• GridViewHeaderRowPresenter
• ViewBase
• ListView
• Ordinare una colonna della GridView quando si fa clic su un'intestazione
• ListView