Procedura dettagliata: utilizzo di dati di esempio in WPF Designer

Articolo
08/11/2011

In questa procedura dettagliata viene illustrato come utilizzare dati di esempio in WPF Designer per Visual Studio per creare associazioni dati in fase di progettazione. La visualizzazione dei dati di esempio in fase di progettazione consente di garantire che il layout si comporti correttamente in fase di esecuzione. Per rendere accessibili i dati di esempio ai controlli nella finestra di progettazione, si applica l'operazione di compilazione DesignData al file di dati di esempio e si fa riferimento al file nell'attributo della fase di progettazione DesignData.

Questa procedura dettagliata prevede l'esecuzione delle attività seguenti:

Creazione del progetto.
Creazione di un oggetto business della classe Customer.
Creazione di file XAML che contengono i dati di esempio.
Associazione di TextBox, DataGrid e controlli ai dati di esempio.

Al termine della procedura, si disporrà di controlli TextBox e DataGrid associati in fase di progettazione a dati di esempio. L'associazione dati è impostata in WPF Designer.

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.

Creazione del progetto

Il primo passaggio consiste nella creazione di un progetto di applicazione WPF e nell'abilitazione delle proprietà della fase di progettazione.

Per creare il progetto

Creare un nuovo progetto di applicazione WPF in Visual C# denominato DesignDataDemo. Per ulteriori informazioni, vedere Procedura: creare un nuovo progetto di applicazione WPF.

MainWindow.xaml viene aperto in WPF Designer.
In visualizzazione Progettazione fare clic sul tag del ridimensionamento della radice () nella parte inferiore destra di MainWindow per impostare il ridimensionamento della radice come automatico.

In visualizzazione XAML la finestra di progettazione aggiunge il mapping dello spazio dei nomi d che consente di accedere a proprietà della fase di progettazione quali DesignInstance e DataContext.

Creazione dell'oggetto business

Il passaggio successivo consiste nella creazione dell'oggetto business. L'oggetto business è una classe Customer semplice che dispone di FirstName, LastName, CustomerID e proprietà.

Per creare l'oggetto business

Aggiungere al progetto una nuova classe denominata Customer.

Sostituire il codice generato automaticamente con il codice seguente.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace DesignDataDemo
{
    // The Customer class defines a simple Customer business object.
    class Customer
    {
        // Default constructor is required for usage as sample data 
        // in the WPF and Silverlight Designer.
        public Customer() {}

        public string FirstName { get; set; }
        public string LastName { get; set; }
        public Guid CustomerID { get; set; }
        public int Age { get; set; }
    }

    // The CustomerCollection class defines a simple collection
    // for Customer business objects.
    class CustomerCollection : List<Customer>
    {
        // Default constructor is required for usage in the WPF Designer.
        public CustomerCollection() {}
    }
}

Creazione dei file di dati della fase di progettazione

Definire i dati di esempio della fase di progettazione creando istanze degli oggetti business in un file XAML. Per specificare che il file XAML dispone di dati di esempio impostare Operazione di compilazione su DesignData.

Nella finestra di progettazione le istanze dichiarate nel file XAML vengono sostituite con tipi della fase di progettazione generati automaticamente che hanno le stesse proprietà dei tipi di esempio. In questo modo vengono eliminati i comportamenti della fase di esecuzione, ad esempio le query di database, che possono interferire con la finestra di progettazione. Queste proprietà sono di sola lettura e vengono impostate nel file di dati di esempio.

Utilizzare l'operazione di compilazione DesignDataWithDesignTimeCreatableTypes per eseguire l'override di questo comportamento e indicare che nella finestra di progettazione verranno create istanze dei tipi di dati di esempio.

Per creare i file di dati della fase di progettazione

In Esplora soluzioni aggiungere al progetto una nuova cartella denominata DesignData.
Nella cartella DesignData aggiungere un nuovo file di testo denominato SampleCustomer.xaml.

SampleCustomer.xaml viene aperto in visualizzazione XAML.

Nota

È anche possibile utilizzare anche un dizionario risorse.

Aggiungere il codice XAML seguente.

<local:Customer 
    xmlns:local="clr-namespace:DesignDataDemo" 
    FirstName="Syed" LastName="Abbas" Age="23" CustomerID="E7181DC6-3F9E-45A4-A5F7-AC0B119D1FD8" />

Nella cartella DesignData aggiungere un nuovo file di testo denominato SampleCustomers.xaml.

SampleCustomers.xaml viene aperto in visualizzazione XAML.

Aggiungere il codice XAML seguente.

    <local:CustomerCollection 
    xmlns:local="clr-namespace:DesignDataDemo" >

    <local:Customer FirstName="Syed" LastName="Abbas" Age="23" CustomerID="E7181DC6-3F9E-45A4-A5F7-AC0B119D1FD8" />
    <local:Customer FirstName="Brenda" LastName="Diaz" Age="55" CustomerID="BB638D72-8B72-495A-B0F9-79F37964BBAE" />
    <local:Customer FirstName="Lori" LastName="Kane" Age="17" CustomerID="B168D811-5548-4D28-8171-318F9A4D7219" />

</local:CustomerCollection>

In Esplora soluzioni selezionare entrambi i file di dati di esempio.
Nel finestra Proprietà impostare Operazione di compilazione su DesignData, assicurarsi che l'opzione Copia nella directory di output sia impostata su Non copiare e deselezionare il campo Strumento personalizzato.

Nota

In Operazione di compilazione è inoltre possibile selezionare DesignDataWithDesignTimeCreatableTypes.

Impostazione del contesto dati della fase di progettazione

Per creare un contesto dati della fase di progettazione che fornisca dati di esempio, si utilizza l'attributo della fase di progettazione d:DataContext con l'estensione di markup d:DesignData.

Per impostare il contesto dati della fase di progettazione

Aprire MainWindow.xaml in WPF Designer.
In visualizzazione XAML aggiungere al tag di apertura di Window il mapping dello spazio dei nomi seguente. Per ulteriori informazioni, vedere Procedura: importare uno spazio dei nomi in XAML.
```
xmlns:local="clr-namespace:DesignDataDemo"
```
Compilare la soluzione.
In visualizzazione Progettazione aggiungere una linea della griglia orizzontale in prossimità del centro del controllo Grid per definire due righe. Per ulteriori informazioni, vedere Procedura: aggiungere righe e colonne a una griglia.
Dalla Casella degli strumenti trascinare un controllo StackPanel sulla riga superiore.
In visualizzazione XAML sostituire l'elemento StackPanel con il codice XAML seguente.
```
<StackPanel d:DataContext="{d:DesignData Source=./DesignData/SampleCustomer.xaml}" Grid.Row="0"></StackPanel>
```
Questo codice XAML stabilisce un contesto dati della fase di progettazione per StackPanel e per i relativi controlli figlio. Rende inoltre disponibili i dati di esempio per l'associazione dati.

Associazione a una singola istanza di dati di esempio

È possibile eseguire l'associazione a qualsiasi proprietà dell'istanza Customer nel file SampleCustomer.xaml. Nella procedura seguente viene illustrato come associare la proprietà FirstName a un controllo TextBox utilizzando il generatore di associazioni dati. Per ulteriori informazioni, vedere Procedura dettagliata: creazione di un'associazione dati tramite WPF Designer.

Per associare un controllo TextBox a dati di esempio

Dalla casella degli strumenti, trascinare un controllo TextBox nel controllo StackPanel.
Nella finestra Proprietà scorrere fino alla proprietà Text.
Sul bordo della colonna sinistra fare clic sull'indicatore della proprietà ().

Verrà visualizzato un menu.

Suggerimento

Per visualizzare il menu, è inoltre possibile fare clic con il pulsante destro del mouse sulla riga.
Fare clic su Applica associazione dati.

Verrà visualizzato il generatore di associazioni dati con il riquadro Percorso aperto.
Fare clic sulla proprietà FirstName.
In visualizzazione Progettazione si noti che il controllo TextBox visualizza il valore FirstName specificato nel file SampleCustomer.xaml.

Suggerimento
Per visualizzare il menu, è inoltre possibile fare clic con il pulsante destro del mouse sulla riga.

Associazione a un insieme di dati di esempio

Nella procedura seguente viene illustrato come associare un controllo DataGrid a un insieme di oggetti Customer nel file SampleCustomers.xaml.

Per associare un controllo DataGrid a un insieme di dati di esempio

Dalla casella degli strumenti, trascinare un controllo DataGrid nella seconda riga della griglia e ridimensionarlo per riempire la riga.
In visualizzazione XAML sostituire l'elemento DataGrid con il codice XAML seguente.
```
<DataGrid Grid.Row="1" d:DataContext="{d:DesignData Source=./DesignData/SampleCustomers.xaml}" />
```
Questo codice XAML stabilisce un contesto dati della fase di progettazione per DataGrid e rende disponibili i dati di esempio per l'associazione dati.
Selezionare DataGrid.
Nella finestra Proprietà scorrere fino alla proprietà ItemsSource.
Sul bordo della colonna sinistra fare clic sull'indicatore della proprietà ().
Fare clic su Applica associazione dati.

Verrà visualizzato il generatore di associazioni dati con il riquadro Percorso aperto.
In visualizzazione Progettazione si noti che il controllo DataGrid è popolato con le istanze di Customer del file SampleCustomer.xaml.