Cenni preliminari su GridView
Aggiornamento: novembre 2007
La modalità di visualizzazione GridView rappresenta una delle modalità di visualizzazione di un controllo ListView. La classe GridView e le relative classi di supporto consentono agli utenti di visualizzare insiemi di elementi in una tabella che utilizza in genere i pulsanti come intestazioni di colonna interattive. In questo argomento viene presentata la classe GridView e ne viene definito l'utilizzo.
Nel presente argomento sono contenute le seguenti sezioni.
- Definizione di visualizzazione GridView
- Layout e stile di una GridView
- Interazioni dell'utente con una GridView
- Come ottenere altre visualizzazioni personalizzate
- Classi che supportano GridView
- Argomenti correlati
Definizione di visualizzazione GridView
La modalità di visualizzazione GridView consente di elencare gli elementi dei dati associando i campi dati alle colonne e visualizzando un'intestazione di colonna che identifichi il campo. Lo stile GridView predefinito implementa i pulsanti come intestazioni di colonna. Utilizzando i pulsanti per le intestazioni di colonna, è possibile implementare importanti funzionalità di interazione dell'utente; ad esempio, gli utenti possono fare clic sull'intestazione della colonna per ordinare i dati GridView in base al contenuto di una specifica colonna.
Nota
Il pulsante consente di controllare che gli utilizzi di GridView per le intestazioni di colonna siano derivati da ButtonBase.
Nell'immagine seguente viene mostrata una visualizzazione GridView del contenuto di ListView.
Visualizzazione GridView del contenuto di ListView
.png)
Le colonne GridView sono rappresentate da oggetti GridViewColumn che è possibile ridimensionare automaticamente in base al contenuto. Se si desidera, è possibile impostare in modo esplicito un oggetto GridViewColumn su una larghezza specifica. È possibile ridimensionare le colonne trascinando la barra gripper tra le intestazioni di colonna. È possibile inoltre aggiungere in modo dinamico, rimuovere, sostituire e riordinare le colonne, dal momento che tali funzionalità sono incorporate in GridView. Tuttavia, GridView non è in grado di aggiornare direttamente i dati visualizzati.
Nell'esempio seguente viene illustrato come definire un oggetto GridView in cui vengono visualizzati i dati dei dipendenti. In questo esempio, ListView definisce l'oggetto EmployeeInfoDataSource come ItemsSource. Le definizioni delle proprietà di GridViewColumn associano il contenuto DisplayMemberBinding alle categorie di dati EmployeeInfoDataSource. Per l'esempio completo, vedere Esempio di ListView che utilizza una GridView.
<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>
Nella figura seguente viene mostrata la tabella creata nell'esempio precedente.
Visualizzazione GridView dei dati provenienti da ItemsSource
.jpg)
Layout e stile di una GridView
Le celle e l'intestazione delle colonne di un oggetto GridViewColumn hanno la stessa larghezza. Per impostazione predefinita, la larghezza di ogni colonna viene ridimensionata in base al contenuto. Se lo si desidera, è possibile impostare una colonna su una larghezza fissa.
Il contenuto dei dati correlati viene visualizzato nelle righe orizzontali. Ad esempio, nell'illustrazione precedente, il cognome, il nome e il numero ID di ciascun dipendente vengono visualizzati come un insieme, poiché sono disposti su una riga orizzontale.
Definizione e applicazione di stili alle colonne in una GridView
Nella definizione del campo dati da visualizzare in un oggetto GridViewColumn, utilizzare le proprietà DisplayMemberBinding, CellTemplate o CellTemplateSelector. La proprietà DisplayMemberBinding ha la precedenza sulle proprietà dei modelli.
Per specificare l'allineamento del contenuto in una colonna di un oggetto GridView, definire una proprietà CellTemplate. Non utilizzare le proprietà HorizontalContentAlignment e VerticalContentAlignment per il contenuto ListView visualizzato utilizzando un oggetto GridView.
Per specificare le proprietà di modello e stile per le intestazioni di colonna, utilizzare le classi GridView, GridViewColumn e GridViewColumnHeader. Per ulteriori informazioni, vedere Panoramica sui modelli e sugli stili di intestazione delle colonne in GridView.
Aggiunta di elementi visivi a una GridView
Per aggiungere elementi visivi, ad esempio i controlli CheckBox e Button, a una modalità di visualizzazione GridView, utilizzare i modelli o gli stili.
Se si definisce in modo esplicito un elemento visivo come elemento dei dati, sarà possibile visualizzarlo solo una volta in un oggetto GridView. Questa limitazione è dovuta al fatto che un elemento può avere un solo elemento padre e pertanto potrà essere visualizzato solo una volta nella struttura ad albero visuale. Per un esempio della procedura di aggiunta di un oggetto CheckBox a una colonna in una modalità di visualizzazione GridView, vedere Esempio di ListView con GridView e controlli CheckBox.
Applicazione di stili alle righe in una GridView
Utilizzare le classi GridViewRowPresenter e GridViewHeaderRowPresenter per formattare e visualizzare le righe di un oggetto GridView. Per un esempio della procedura di applicazione di stili alle righe in una modalità di visualizzazione GridView, vedere Procedura: applicare uno stile a una riga in un ListView che implementa una GridView.
Problemi di allineamento durante l'utilizzo di ItemContainerStyle
Per evitare problemi di allineamento tra le intestazioni di colonna e le celle, non impostare una proprietà o specificare un modello che incida sulla larghezza di un elemento in un oggetto ItemContainerStyle. Ad esempio, non impostare la proprietà Margin o specificare un oggetto ControlTemplate che aggiunge un oggetto CheckBox a un elemento ItemContainerStyle definito in un controllo ListView. Specificare invece le proprietà e i modelli che incidono direttamente sulla larghezza delle colonne nelle classi che definiscono una modalità di visualizzazione GridView.
Ad esempio, per aggiungere un oggetto CheckBox alle righe nella modalità di visualizzazione GridView, aggiungere l'oggetto CheckBox a un oggetto DataTemplate e impostare quindi la proprietà CellTemplate su tale oggetto DataTemplate. Per un esempio della procedura di aggiunta di un oggetto CheckBox a una colonna in una modalità di visualizzazione GridView, vedere Esempio di ListView con GridView e controlli CheckBox.
Interazioni dell'utente con una GridView
Quando si utilizza un oggetto GridView nell'applicazione, gli utenti possono interagire con l'oggetto GridView e modificarne la formattazione. Possono, ad esempio, riordinare le colonne, ridimensionare una colonna, selezionare gli elementi di una tabella e scorrere il contenuto. È anche possibile definire un gestore eventi che risponda quando un utente fa clic sul pulsante dell'intestazione di colonna. Il gestore eventi può eseguire operazioni quali l'ordinamento dei dati visualizzati nell'oggetto GridView in base al contenuto di una colonna.
Nell'elenco seguente vengono analizzate più dettagliatamente le funzionalità offerte dall'utilizzo di GridView in relazione all'interazione dell'utente:
Riordinare le colonne con il metodo di trascinamento della selezione.
Gli utenti possono riordinare le colonne in un oggetto GridView premendo il pulsante sinistro del mouse quando è posizionato su un'intestazione di colonna e trascinando quindi quella colonna in una nuova posizione. Mentre l'utente trascina l'intestazione di colonna, viene visualizzata una versione mobile dell'intestazione, nonché una linea nera continua che indica dove inserire la colonna.
Se si desidera modificare lo stile predefinito per la versione mobile di un'intestazione, specificare un oggetto ControlTemplate per un tipo GridViewColumnHeader che viene attivato quando la proprietà Role è impostata su Floating. Per ulteriori informazioni, vedere Procedura: creare uno stile per un'intestazione di colonna GridView trascinata.
Ridimensionare una colonna in base al contenuto.
Gli utenti possono fare doppio clic sulla barra gripper a destra di un'intestazione di colonna per adattare le dimensioni di una colonna al relativo contenuto.
Nota
È possibile impostare la proprietà Width su Double.NaN per ottenere lo stesso risultato.
Selezionare gli elementi di una riga.
Gli utenti possono selezionare uno o più elementi di un oggetto GridView.
Se si desidera modificare lo Style di un elemento selezionato, vedere Procedura: utilizzare i trigger per applicare uno stile agli elementi selezionati in un controllo ListView.
Scorrere il contenuto per visualizzare gli elementi inizialmente non visibili sullo schermo.
Se le dimensioni dell'oggetto GridView non sono abbastanza ampie da visualizzare tutti gli elementi, gli utenti possono scorrere in senso orizzontale o verticale utilizzando le barre di scorrimento, fornite da un controllo ScrollViewer. Un oggetto ScrollBar viene nascosto se tutto il contenuto è visibile in una direzione specifica. Le intestazioni di colonna non scorrono mediante una barra di scorrimento verticale, ma scorrono in senso orizzontale.
Interagire con le colonne facendo clic sui pulsanti delle intestazioni di colonna.
Quando gli utenti fanno clic su un pulsante dell'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 dell'intestazione di colonna in modo da rendere disponibili funzionalità quali 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 eventi in modo che gestisca l'evento Click per tutte le intestazioni di colonna, specificare per tale gestore il controllo ListView. Per ulteriori informazioni e un esempio, vedere Esempio di ListView con ordinamento dei dati.
Come ottenere altre visualizzazioni personalizzate
La classe GridView, derivata dalla classe astratta ViewBase, rappresenta solo una delle possibili modalità di visualizzazione della classe ListView. È possibile creare altre visualizzazioni personalizzate per ListView derivandole dalla classe ViewBase. Per un esempio di una modalità di visualizzazione personalizzata, vedere Procedura: creare una modalità di visualizzazione personalizzata per un oggetto ListView.
Classi che supportano GridView
Le classi seguenti supportano la modalità di visualizzazione GridView.
Vedere anche
Attività
Procedura: ordinare una colonna GridView quando si fa clic su un'intestazione
Concetti
Panoramica sul controllo ListView