Procedura dettagliata: costruzione di un layout dinamico basato sui dati

Aggiornamento: novembre 2007

In WPF (Windows Presentation Foundation) sono disponibili controlli che supportano layout dinamici basati su dati. L'utilizzo di questi controlli con Progettazione Windows Presentation Foundation (WPF) per Visual Studio°semplifica°la creazione di questi tipi di layout. Nelle applicazioni è possibile utilizzare i controlli seguenti:

• ListView

• GridView

Il controllo ListView fornisce l'infrastruttura per la visualizzazione di un set di elementi dei dati in layout diversi. In genere GridView viene utilizzato insieme al controllo ListView per la visualizzazione di dati in colonne. Per ulteriori informazioni, vedere Panoramica sul controllo ListView e Cenni preliminari su GridView.

In questa procedura dettagliata vengono eseguite le attività seguenti:

• Preparazione di un'origine dati.

• Creazione di un'applicazione WPF.

• Configurazione del controllo Panel Grid predefinito.

• Aggiunta e configurazione di un controllo ListView.

• Aggiunta e configurazione di un controllo GridView in XAML.

• Aggiunta e configurazione di un controllo Button.

• Aggiunta di codice per l'associazione dati.

• Test dell'applicazione.

Nella figura seguente è illustrata l'applicazione finale.

Nota:
È possibile che le finestre di dialogo e i comandi di menu visualizzati siano diversi da quelli descritti nella Guida, a seconda delle impostazioni attive o dell'edizione del programma. Per modificare le impostazioni, scegliere Importa/esporta impostazioni dal menu Strumenti. Per ulteriori informazioni, vedere Impostazioni di Visual Studio.

Prerequisiti

Per completare questa procedura dettagliata, è necessario disporre dei seguenti componenti:

• Visual Studio 2008

Preparazione dell'origine dati

Per questa procedura dettagliata, è necessario disporre di un'origine dati di esempio da utilizzare per l'associazione. Verrà creata un'origine dati su file CSV semplice.

Per preparare l'origine dati

1. Creare una nuova cartella e denominarla Dati.

2. Nella cartella Data creare un nuovo file di testo e denominarlo employees.csv.

   Nota:
   È possibile utilizzare qualsiasi editor di testo, ad esempio il Blocco note, per creare il file.

3. Aggiungere quanto segue al file di testo:

   LastName,FirstName,Title
   Davis,Sara,Sales Representative
   Funk,Don,Vice President, Sales
   Levin,Danny,Sales Representative
   Penor,Lori,Sales Representative
   Buschmann,Monika,Sales Manager
   Suominen,Ari,Sales Representative
   King,Russell,Sales Representative
   Cameron,Maria,Inside Sales Coordinator
   Doyle,Patricia,Sales Representative
   

4. Salvare e chiudere il file.

   Suggerimento:
   È possibile aprire il file in Excel e confermare che i valori separati da virgola dovranno essere visualizzati in colonne separate.

5. Nella cartella Data creare un nuovo file di testo e denominarlo schema.ini. Nel file di schema viene descritto il formato dei file di testo contenuti nella cartella di dati.

6. Aggiungere quanto segue al file di testo:

   [employees.csv]
   Format=CSVDelimited
   ColNameHeader=True
   

   Suggerimento:
   In questa procedura dettagliata il file CSV include intestazioni di colonna. Per eseguire l'associazione a un file CSV che non include intestazioni di colonna, impostare ColNameHeader=True su ColNameHeader=False.

7. Salvare e chiudere il file.

Creazione del progetto

La procedura successiva consiste nella creazione del progetto°Visual Studio per l'applicazione.

Per creare il progetto

1. In Visual Basic o Visual C# creare un nuovo progetto di applicazione WPF denominato DataDrivenLayout. Per ulteriori informazioni, vedere Procedura: creare un nuovo progetto di applicazione WPF.

   Window1.xaml verrà aperto in WPF Designer.

2. Scegliere Salva tutto dal menu File.

Configurazione del controllo Panel predefinito della griglia

Per impostazione predefinita, la nuova applicazione WPF contiene un oggetto Window con un pannello Grid. In questa procedura verranno aggiunte due righe alla griglia. Impostare l'altezza di una riga su Auto, in modo che le dimensioni vengano adattate al contenuto. Impostare l'altezza della riga su *, in modo che venga utilizzata l'altezza disponibile rimanente.

Per configurare il controllo pannello griglia predefinito

1. In visualizzazione Progettazione selezionare Grid. Per ulteriori informazioni, vedere Procedura: selezionare e spostare elementi sull'area di progettazione.

2. Nella finestra Proprietà individuare la proprietà RowDefinitions e fare clic sul pulsante con i puntini di sospensione nella colonna del valore della proprietà.

   Verrà visualizzato l'Editor dell'insieme.

3. Fare due volte clic su Aggiungi per aggiungere due righe.

4. Impostare la proprietà Height della prima riga su *.

5. Impostare la proprietà Height della seconda riga su Auto.

6. Scegliere OK per chiudere l'Editor dell'insieme e tornare a WPF Designer.

   Nella griglia sono ora presenti due righe, ma ne viene visualizzata solo una. La riga la cui proprietà Height è impostata su Auto viene temporaneamente nascosta perché è priva di contenuto. Per questa procedura, tale impostazione risulta appropriata. Per evitare tale comportamento in futuro, è possibile utilizzare il ridimensionamento proporzionale durante la progettazione e impostare il valore su Auto al termine.

7. Scegliere Salva tutto dal menu File.

Aggiunta e configurazione di un oggetto ListView

In questa procedura viene aggiunto un oggetto ListView. Assegnare a ListView un nome in modo che sia possibile farvi riferimento dal file code-behind. Configurare le proprietà di layout.

Per aggiungere e configurare un oggetto ListView

1. In visualizzazione Progettazione selezionare Grid.

2. Dal gruppo Controlli della Casella degli strumenti trascinare un controllo ListView in Grid.

3. Nella finestra Proprietà impostare le seguenti proprietà per ListView:

   Proprietà	Valore
   Name	lvEmployees
   Grid.Column	0
   Grid.ColumnSpan	1
   Grid.Row	0
   Grid.RowSpan	1
   Width	Auto
   Height	Auto
   HorizontalAlignment	Stretch
   VerticalAlignment	Stretch
   Margin	0

4. Scegliere Salva tutto dal menu File.

Aggiunta e configurazione di un oggetto GridView

In questa procedura viene aggiunto un oggetto GridView con tre colonne per visualizzare i dati del file di testo. Assegnare nomi alle colonne perché è necessario farvi riferimento dal file code-behind per associare i dati alle colonne singolarmente. Per ulteriori informazioni, vedere Procedura: visualizzare il contenuto di ListView utilizzando un oggetto GridView.

Per aggiungere e configurare un oggetto GridView

1. Nell'editor XAML individuare l'elemento ListView, che sarà analogo al seguente:

   <ListView <ATTRIBUTES> />
   

   Suggerimento:
   Per evidenziare facilmente gli elementi in visualizzazione XAML, fare clic sul controllo in visualizzazione Progettazione o utilizzare la finestra Struttura documento.

2. Sostituire l'elemento ListView con quanto riportato di seguito:

   <ListView x:Name="lvEmployees">
       <ListView.View>
           <GridView AllowsColumnReorder="True">
               <GridViewColumn x:Name="c1Employees" Header="Last Name"></GridViewColumn>
               <GridViewColumn x:Name="c2Employees" Header="First Name"></GridViewColumn>
               <GridViewColumn x:Name="c3Employees" Header="Title"></GridViewColumn>
           </GridView>
       </ListView.View>
   </ListView>
   

3. Scegliere Salva tutto dal menu File.

Aggiunta e configurazione di un oggetto Button

In questa procedura viene un oggetto Button e viene specificato il relativo evento Click.

Per aggiungere e configurare un oggetto Button

1. In visualizzazione Progettazione selezionare Grid.

   Suggerimento:
   Poiché ListView copre Grid, può risultare difficile selezionare Grid. È possibile utilizzare il tasto TAB o la finestra Struttura documento per selezionare Grid.

2. Dal gruppo Controlli della Casella degli strumenti trascinare un controllo Button in Grid.

3. Nella finestra Proprietà impostare le seguenti proprietà per Button:

   Proprietà	Valore
   Name	btnGetData
   Contenuto	Get Data
   Grid.Column	0
   Grid.ColumnSpan	1
   Grid.Row	1
   Grid.RowSpan	1
   Width	75
   Height	23
   HorizontalAlignment	Right
   VerticalAlignment	Bottom
   Margin	5

4. Nell'editor XAML individuare l'elemento Button, che sarà analogo al seguente:

   <Button <ATTRIBUTES>>Button</Button>
   

   Suggerimento:
   Per evidenziare facilmente gli elementi in visualizzazione XAML, fare clic sul controllo in visualizzazione Progettazione o utilizzare la finestra Struttura documento.

5. Modificare il codice XAML per aggiungere un attributo dell'evento Click. Il risultato dovrebbe essere analogo al seguente:

   <Button Click="btnGetData_Click"<ATTRIBUTES>>Button</Button>
   

6. Scegliere Salva tutto dal menu File.

Aggiunta di codice per l'associazione dati

In questa procedura viene aggiunto il codice per l'evento Click di Button: in fase di progettazione fare clic sul pulsante per ottenere i dati e associarlo a ListView e a GridView.

Per aggiungere il codice per l'associazione dati

1. Aprire il file code-behind, ovvero Window1.xaml.cs o Window1.xaml.vb, a seconda del linguaggio selezionato per il progetto.

2. Nella parte superiore dell'editor di codice aggiungere il codice seguente. Per eseguire l'associazione ai dati è necessario accedere agli spazi dei nomi System.Data e System.Data.OleDb.

   Imports System.Data              'DataTable
   Imports System.Data.OleDb        'OleDbDataAdapter
   Imports System.Windows           'RoutedEventArgs
   Imports System.Windows.Data      'Binding
   Imports System.Windows.Controls  'ListView
   

   using System;                   //Exception
   using System.Data;              //DataTable
   using System.Data.OleDb;        //OleDbDataAdapter
   using System.Windows;           //RoutedEventArgs
   using System.Windows.Data;      //Binding
   using System.Windows.Controls;  //ListView
   

3. Aggiungere il codice seguente nella classe Window1. Utilizzare DataTable per archiviare i dati.

   Dim dtEmployees As DataTable
   

   DataTable dtEmployees;
   

4. Aggiungere il codice seguente nella classe Window1. Quando l'utente fa clic sul pulsante, i dati vengono ottenuti e associati a ListView.

   Private Sub btnGetData_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
   
       dtEmployees = GetData()
       BindData()
   End Sub
   

   private void btnGetData_Click(object sender, RoutedEventArgs e)
   {
       dtEmployees = GetData();
       BindData();
   }
   

5. Aggiungere il codice seguente nella classe Window1 e specificare il percorso della cartella Data. Per ottenere i dati, utilizzare OleDbDataAdapter.

   Function GetData() As DataTable
   
       Dim sConnection As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=<Your Path>\Data\;Extended Properties=""text;HDR=yes;FMT=delimited"";"
       Dim sSQL As String = "select * from employees.csv"
   
       Dim dt As DataTable = New DataTable()
       Dim da As OleDbDataAdapter = New OleDbDataAdapter(sSQL, sConnection)
   
       Try
           da.Fill(dt)
   
       Catch ex As Exception
           MessageBox.Show(ex.ToString())
   
       End Try
   
       Return dt
   End Function
   

   DataTable GetData()
   {
       string sConnection = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=<Your Path>\\Data\\;Extended Properties=\"text;HDR=yes;FMT=delimited\";";
       string sSQL = "select * from employees.csv";
   
       DataTable dt = new DataTable();
       OleDbDataAdapter da = new OleDbDataAdapter(sSQL, sConnection);
   
       try
       {
           da.Fill(dt);
       }
       catch (Exception e)
       {
           MessageBox.Show(e.ToString());
       }
       return dt;
   }
   

6. Aggiungere il codice seguente nella classe Window1. Per associare i dati a ListView, impostare DataContext su DataTable. Le colonne di dati vengono visualizzate nelle colonne di GridView.

   Sub BindData()
       lvEmployees.DataContext = dtEmployees
       lvEmployees.SetBinding(ListView.ItemsSourceProperty, New Binding())
   
       c1Employees.DisplayMemberBinding = New Binding("LastName")
       c2Employees.DisplayMemberBinding = New Binding("FirstName")
       c3Employees.DisplayMemberBinding = New Binding("Title")
   End Sub
   

   void BindData()
   {
       lvEmployees.DataContext = dtEmployees;
       lvEmployees.SetBinding(ListView.ItemsSourceProperty, new Binding());
   
       c1Employees.DisplayMemberBinding = new Binding("LastName");
       c2Employees.DisplayMemberBinding = new Binding("FirstName");
       c3Employees.DisplayMemberBinding = new Binding("Title");
   }
   

7. Scegliere Salva tutto dal menu File.

Impostazione della finestra per il ridimensionamento dinamico

La proprietà SizeToContent specifica come vengono modificate le dimensioni di un oggetto Window in base alle dimensioni del relativo contenuto. Per impostazione predefinita, questa proprietà è impostata su Manual, quindi l'utente può ridimensionare manualmente la finestra per adattare il contenuto. In questa procedura la proprietà viene impostata su WidthAndHeight, quindi la finestra viene ridimensionata dinamicamente quando il contenuto cambia.

Per impostare la finestra per il ridimensionamento dinamico

1. Aprire il file Window1.xaml nella finestra di progettazione.

2. In visualizzazione Progettazione selezionare Window.

3. Nella finestra Proprietà impostare le seguenti proprietà per Window:

   Proprietà	Valore
   SizeToContent	WidthAndHeight
   Width	Auto
   Height	Auto

4. Scegliere Salva tutto dal menu File.

Test dell'applicazione

Per eseguire il test dell'applicazione

1. Scegliere Avvia debug dal menu Debug.

   L'applicazione viene avviata e viene visualizzata la finestra. Poiché la proprietà SizeToContent è stata impostata su WidthAndHeight, le dimensioni della finestra sono sufficienti solo per la visualizzazione delle intestazioni di GridView e di Button.

2. Fare clic su Get Data.

   L'applicazione ottiene i dati e li associa a GridView. GridView, ListView e Window vengono ridimensionati dinamicamente per adattare il nuovo contenuto.

3. Chiudere la finestra.

Riepilogo

Di seguito è riportato il file Window1.xaml completato:

<Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="Auto" Width="Auto" SizeToContent="WidthAndHeight">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <ListView x:Name="lvEmployees">
            <ListView.View>
                <GridView AllowsColumnReorder="True">
                    <GridViewColumn x:Name="c1Employees" Header="Last Name"></GridViewColumn>
                    <GridViewColumn x:Name="c2Employees" Header="First Name"></GridViewColumn>
                    <GridViewColumn x:Name="c3Employees" Header="Title"></GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>
        <Button Click="btnGetData_Click" Name="btnGetData" Margin="5" Height="23" Width="75" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="1">Get Data</Button>
    </Grid>
</Window>

Passaggi successivi

In questa procedura dettagliata è stato utilizzato un oggetto GridView con tre colonne per la visualizzazione dei dati. I dati sono stati associati direttamente a ogni colonna singolarmente. È anche possibile utilizzare modelli di dati per disporre e assegnare uno stile ai dati in ListView o GridView. Per ulteriori informazioni, vedere Cenni preliminari sui modelli di dati.

Provare a utilizzare i modelli di dati di questa procedura dettagliata. Ad esempio, è possibile creare un modello analogo al seguente:

<Window.Resources>
    <DataTemplate x:Key="templateEmployees">
        <Border BorderBrush="Silver" BorderThickness="1" Padding="5" Margin="5">
            <DockPanel>
                <StackPanel DockPanel.Dock="Left">
                    <TextBlock Text="{Binding Path=LastName}" />
                    <TextBlock Text="{Binding Path=FirstName}" />
                </StackPanel>
                <TextBlock Text="{Binding Path=Title}" DockPanel.Dock="Right" />
            </DockPanel>
        </Border>
    </DataTemplate>
</Window.Resources>

Utilizzare quindi il modello di dati in GridView con il codice, come riportato di seguito:

<ListView.View>
    <GridView>
        <GridViewColumn CellTemplate="{StaticResource templateEmployees}" />
    </GridView>
</ListView.View>

Rimuovere dal code-behind il codice seguente o impostarlo come commento:

c1Employees.DisplayMemberBinding = New Binding("LastName")
c2Employees.DisplayMemberBinding = New Binding("FirstName")
c3Employees.DisplayMemberBinding = New Binding("Title")

c1Employees.DisplayMemberBinding = new Binding("LastName");
c2Employees.DisplayMemberBinding = new Binding("FirstName");
c3Employees.DisplayMemberBinding = new Binding("Title");

Vedere anche

Attività

Procedura: costruire un layout dinamico basato su dati

Concetti

Sistema di layout

Cenni preliminari su Progettazione WPF

Altre risorse

Procedure dettagliate relative ai layout

Utilizzo di Progettazione WPF