Procedura dettagliata: creazione di un'associazione dati tramite WPF Designer

Articolo
08/11/2011

In questa procedura dettagliata viene illustrato come utilizzare WPF Designer per Visual Studio per creare associazioni dati che connettono dati a un controllo.

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

Creazione del progetto.
Creazione di una classe Student e di un insieme StudentList.
Creazione di un controllo ListBox che visualizza l'insieme StudentList tramite l'associazione dati.
Creazione di un DataTemplate personalizzato che utilizza un IValueConverter per personalizzare l'aspetto di una proprietà booleana.

Al termine, si disporrà di una casella di riepilogo associata a un elenco di studenti. Per ogni elemento della casella di riepilogo, viene visualizzato un quadrato colorato che indica se lo studente è attualmente iscritto.

Nota

Per creare un'associazione ai dati di una connessione dati, utilizzare la finestra Origini dati. Per ulteriori informazioni, vedere Associazione di controlli WPF ai dati in Visual Studio.

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 del progetto di applicazione WPF e nell'aggiunta dell'origine dati. L'origine dati è un ObservableCollection<T> che contiene istanze di una classe Student semplice. Il progetto dispone anche di un IValueConverter e un DataTemplate personalizzato per applicare uno stile al controllo ListBox.

Per creare il progetto

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

MainWindow.xaml viene aperto in WPF Designer.
Aggiungere al progetto una nuova classe denominata Student. Per ulteriori informazioni, vedere Procedura: aggiungere elementi di progetto nuovi.

Sostituire il codice generato automaticamente con il codice seguente.

Imports System
Imports System.Collections.ObjectModel
Imports System.Windows

' Student is a simple class that stores a name and an 
' IsEnrolled value. 
Public Class Student

    ' The default constructor is required for creation from XAML. 
    Public Sub New()
    End Sub

    ' The StudentName property is a string that holds the first and last name. 
    Public Property StudentName As String

    ' The IsEnrolled property gets or sets a value indicating whether 
    ' the student is currently enrolled. 
    Public Property IsEnrolled As Boolean

End Class

' The StudentList collection is declared for convenience, 
' because declaring generic types in XAML is inconvenient. 
Public Class StudentList
    Inherits ObservableCollection(Of Student)
End Class

using System;
using System.Collections.ObjectModel;
using System.Windows;

namespace DataBindingDemo
{
    // Student is a simple class that stores a name and an
    // IsEnrolled value.
    public class Student 
    {   
        // The default constructor is required for creation from XAML.
        public Student()
        {
        }

        // The StudentName property is a string that holds the first and last name.
        public string StudentName { get; set; }

        // The IsEnrolled property gets or sets a value indicating whether
        // the student is currently enrolled.
        public bool IsEnrolled { get; set; }
    }

    // The StudentList collection is declared for convenience,
    // because declaring generic types in XAML is inconvenient.
    public class StudentList : ObservableCollection<Student>
    {

    }
}

Aggiungere al progetto una nuova classe denominata BoolToBrushConverter.

Sostituire il codice generato automaticamente con il codice seguente.

Imports System
Imports System.Globalization
Imports System.Windows.Data
Imports System.Windows.Media

' The BoolToBrushConverter class is a value converter 
' that helps to bind a bool value to a brush property. 
<ValueConversion(GetType(Boolean), GetType(Brush))> _
Public Class BoolToBrushConverter
    Implements IValueConverter

    Public Function Convert( _
        ByVal value As Object, _
        ByVal targetType As Type, _
        ByVal parameter As Object, _
        ByVal culture As CultureInfo) As Object Implements IValueConverter.Convert

        Dim b As Brush = Nothing

        ' Only apply the conversion if value is assigned and 
        ' is of type bool. 
        If value IsNot Nothing AndAlso value.[GetType]() Is GetType(Boolean) Then
            ' true is painted with a green brush, 
            ' false with a red brush. 
            b = If(CBool(value), Brushes.Green, Brushes.Red)
        End If

        Return b
    End Function

    ' Not used. 
    Public Function ConvertBack( _
        ByVal value As Object, _
        ByVal targetType As Type, _
        ByVal parameter As Object, _
        ByVal culture As CultureInfo) As Object Implements IValueConverter.ConvertBack
        Return Nothing
    End Function

End Class

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Text;
using System.Windows.Data;
using System.Windows.Media;

namespace DataBindingDemo
{
    // The BoolToBrushConverter class is a value converter
    // that helps to bind a bool value to a brush property.
    [ValueConversion(typeof(bool), typeof(Brush))]
    public class BoolToBrushConverter : IValueConverter
    {
        public object Convert(
            object value, 
            Type targetType, 
            object parameter, 
            CultureInfo culture)
        {
            Brush b = null;

            // Only apply the conversion if value is assigned and
            // is of type bool.
            if (value != null &&
                value.GetType() == typeof(bool))
            {
                // true is painted with a green brush, 
                // false with a red brush.
                b = (bool)value ? Brushes.Green : Brushes.Red;
            }

            return b;
        }

        // Not used.
        public object ConvertBack(
            object value, 
            Type targetType, 
            object parameter, 
            CultureInfo culture)
        {
            return null;
        }
    }
}

Compilare il progetto.
Aprire MainWindow.xaml in WPF Designer.

Sostituire il codice XAML generato automaticamente con il codice XAML seguente.

    <Window x:Class="DataBindingDemo.MainWindow"
        xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:DataBindingDemo"
        Title="Databinding Demo" Height="300" Width="300">
    <Window.Resources>

        <local:StudentList x:Key="studentCollection" >
            <local:Student StudentName="Syed Abbas" IsEnrolled="false" />
            <local:Student StudentName="Lori Kane" IsEnrolled="true" />
            <local:Student StudentName="Steve Masters" IsEnrolled="false" />
            <local:Student StudentName="Tai Yee" IsEnrolled="true" />
            <local:Student StudentName="Brenda Diaz" IsEnrolled="true" />
        </local:StudentList>

        <local:BoolToBrushConverter x:Key="boolToBrushConverter" />

        <DataTemplate x:Key="listBoxTemplate">
            <StackPanel Orientation="Horizontal" >
                <Rectangle Fill="{Binding Path=IsEnrolled, Converter={StaticResource boolToBrushConverter}}"
                           Height="10" 
                           Width="10" 
                           Margin="0,0,5,0" />
                <TextBlock Text="{Binding Path=StudentName}" />
            </StackPanel>
        </DataTemplate>

    </Window.Resources>
    <Grid></Grid>

</Window>

Assegnazione di un'associazione di dati

Utilizzare Binding per visualizzare studentCollection nel controllo ListBox. WPF Designer consente di creare associazioni dati senza necessità di scrivere codice o XAML.

Per associare ListBox all'origine dati

Trascinare un controllo ListBox dalla Casella degli strumenti su Window.
Nella finestra Proprietà scorrere fino alla proprietà ItemsSource.
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.
In Origine nel riquadro sinistro fare clic su StaticResource.
Nel riquadro centrale fare clic su Window.Resources.
Nel riquadro destro fare clic su studentCollection.

Il controllo ListBox verrà popolato con elementi.
Nella finestra Proprietà scorrere fino alla proprietà DisplayMemberPath e impostare il valore StudentName.

Il controllo ListBox visualizza la proprietà StudentName per ogni istanza di Student in studentCollection.

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

Creazione di un'associazione dati con un convertitore di valori

Si crea un DataTemplate per formattare i dati nel controllo ListBox. In questo progetto, DataTemplate utilizza un convertitore di valori per visualizzare una proprietà booleana come quadrato colorato.

Per creare un'associazione dati con un convertitore di valori

Nella finestra Proprietà cancellare la proprietà DisplayMemberPath.
Scorrere fino alla proprietà ItemTemplate.
Fare clic sull'indicatore della proprietà ().
Fare clic su Applica risorsa.

Verrà visualizzato il selettore risorse.
Nella sezione Locale fare clic su listBoxTemplate.

Il controllo ListBox visualizzerà un quadrato rosso o verde accanto a ogni nome di studente per indicare se lo studente è iscritto.

Passaggi successivi

È possibile impostare proprietà sulle associazioni dati tramite il generatore di associazione dati. Per ulteriori informazioni, vedere Procedura: impostare le proprietà di associazione dati tramite WPF Designer.

Vedere anche

Condividi tramite