Condividi tramite

Procedura dettagliata: costruzione di un layout dinamico basato sui dati

  • Articolo

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

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 ListView Overview e GridView Overview.

Questa procedura dettagliata prevede l'esecuzione delle 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.

Layout dinamico basato sui dati

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 Gestione delle impostazioni.

Prerequisiti

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

  • Visual Studio 2010

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.

    SuggerimentoSuggerimento

    È 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
    SuggerimentoSuggerimento

    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.

    MainWindow.xaml viene 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

    Nome

    lvEmployees

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    0

    Grid.RowSpan

    1

    Larghezza

    Auto

    Altezza

    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 How to: Display ListView Contents by Using a GridView.

Per aggiungere e configurare un oggetto GridView

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

    <ListView <ATTRIBUTES> />
    SuggerimentoSuggerimento

    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.

    SuggerimentoSuggerimento

    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

    Nome

    btnGetData

    Contenuto

    Get Data

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    1

    Grid.RowSpan

    1

    Larghezza

    75

    Altezza

    23

    HorizontalAlignment

    Right

    VerticalAlignment

    Bottom

    Margin

    5

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

    <Button <ATTRIBUTES>>Button</Button>
    SuggerimentoSuggerimento

    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 MainWindow.xaml.cs o MainWindow.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 MainWindow. Utilizzare DataTable per archiviare i dati.

    Dim dtEmployees As DataTable

    DataTable dtEmployees;

  4. Aggiungere il codice seguente nella classe MainWindow. 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 MainWindow 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 MainWindow. 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 MainWindow.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

    Larghezza

    Auto

    Altezza

    Auto

  4. Scegliere Salva tutto dal menu File.

Verifica 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.

Di seguito è riportato il file MainWindow.xaml completato:

<Window x:Class="MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" 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 Data Templating Overview.

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 WPF e Silverlight Designer

Altre risorse

Procedure dettagliate relative ai layout

Utilizzo di Progettazione WPF