Procedura dettagliata: associazione di controlli Silverlight agli oggetti

  • Articolo

In questa procedura dettagliata viene creata un'applicazione Silverlight contenente controlli associati a dati. I controlli vengono associati a 2 oggetti business correlati definiti dall'utente.

In questa procedura dettagliata vengono illustrate le attività seguenti:

  • Creazione di un'applicazione Silverlight.

  • Creazione di 2 oggetti personalizzati correlati da associare all'interfaccia utente.

  • Esecuzione della Configurazione guidata origine dati per la connessione all'oggetto personalizzato utilizzato per popolare la finestra Origini dati.

  • Creazione di un set di controlli associati a dati mediante il trascinamento degli elementi dalla finestra Origini dati a Silverlight Designer.

    Nota

    I nomi o i percorsi visualizzati per alcuni elementi dell'interfaccia utente di Visual Studio presenti nelle istruzioni seguenti potrebbero essere diversi. L'edizione di Visual Studio di cui si dispone e le impostazioni utilizzate determinano questi elementi. Per ulteriori informazioni, vedere Gestione delle impostazioni.

Prerequisiti

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

  • Visual Studio 2010.

Per completare la procedura dettagliata è inoltre consigliabile conoscere già i concetti seguenti:

  • Utilizzo di Silverlight Designer. Per ulteriori informazioni, vedere Silverlight (la pagina potrebbe essere in inglese).

  • Associazione a dati Silverlight. Per ulteriori informazioni, vedere Associazione dati La pagina potrebbe essere in inglese).

  • Utilizzo di XAML. Per ulteriori informazioni, vedere XAML (la pagina potrebbe essere in inglese).

Creazione dell'applicazione Silverlight

Iniziare questa procedura dettagliata creando un'applicazione Silverlight.

Per creare il progetto Silverlight

  1. Scegliere il comando per la creazione di un nuovo progetto dal menu File.

  2. Nel nodo Visual C# o Visual Basic fare clic su Silverlight, quindi su Applicazione Silverlight.

  3. Nella casella Nome digitare SilverlightObjectBinding, quindi fare clic su OK.

  4. Lasciare le impostazioni predefinite nella finestra di dialogo Nuova applicazione Silverlight, quindi fare clic su OK.

    L'applicazione Silverlight viene creata come soluzione con 2 progetti: un progetto SilverlightObjectBinding e un progetto SilverlightObjectBinding.Web, utilizzati per ospitare il progetto SilverlightObjectBinding.

Creazione di oggetti personalizzati da associare

Per esporre dati a un'applicazione, è necessario che sia definito un modello dati. In questa procedura dettagliata vengono creati oggetti personalizzati che rappresentano clienti e ordini per il modello dati.

Per creare gli oggetti Customer

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto SilverlightObjectBinding, scegliere Aggiungi, quindi fare clic su Nuovo elemento.

  2. Nella finestra di dialogo Aggiungi nuovo elemento fare clic sull'elemento Classe.

  3. Denominarlo Customer e fare clic su Aggiungi.

  4. Nel file di codice Customer sostituire il codice nella classe Customer con il codice seguente:

    ''' <summary>
''' A single customer
''' </summary>
Public Class Customer

    Public Sub New()
    End Sub

    ''' <summary>
    ''' Creates a new customer
    ''' </summary>
    ''' <param name="customerId">The ID that uniquely identifies this customer</param>
    ''' <param name="companyName">The name for this customer</param>
    ''' <param name="city">The city for this customer</param>
    Public Sub New(ByVal customerId As String,
                   ByVal companyName As String,
                   ByVal city As String)
        customerIDValue = customerId
        companyNameValue = companyName
        cityValue = city
    End Sub

    Private customerIDValue As String
    ''' <summary>
    ''' The ID that uniquely identifies this customer
    ''' </summary>
    Public Property CustomerID() As String
        Get
            Return customerIDValue
        End Get
        Set(ByVal value As String)
            customerIDValue = value
        End Set
    End Property

    Private companyNameValue As String
    ''' <summary>
    ''' The name for this customer
    ''' </summary>
    Public Property CompanyName() As String
        Get
            Return companyNameValue
        End Get
        Set(ByVal Value As String)
            companyNameValue = Value
        End Set
    End Property

    Private cityValue As String
    ''' <summary>
    ''' The city for this customer
    ''' </summary>
    Public Property City() As String
        Get
            Return cityValue
        End Get
        Set(ByVal Value As String)
            cityValue = Value
        End Set
    End Property

    Private ordersValue As Orders
    ''' <summary>
    ''' The orders for this customer
    ''' </summary>
    Public Property Orders As Orders
        Get
            Return ordersValue
        End Get
        Set(ByVal value As Orders)
            ordersValue = value
        End Set
    End Property


    Public Overrides Function ToString() As String
        Return Me.CompanyName & " (" & Me.CustomerID & ")"
    End Function
End Class


''' <summary>
''' A collection of Customer objects.
''' </summary>
''' <remarks></remarks>
Public Class Customers
    Inherits System.Collections.Generic.List(Of Customer)

End Class

    /// <summary>
/// A single customer
/// </summary>
public class Customer
{
    /// <summary>
    /// Creates a new customer
    /// </summary>
    public Customer()
    {
    }

    /// <summary>
    /// Creates a new customer
    /// </summary>
    /// <param name="customerID"></param>
    /// <param name="companyName"></param>
    /// <param name="city"></param>
    public Customer(string customerID, string companyName,
       string city)
    {
        customerIDValue = customerID;
        companyNameValue = companyName;
        cityValue = city;
    }

    private string customerIDValue;
    /// <summary>
    /// The ID that uniquely identifies this customer
    /// </summary>
    public string CustomerID
    {
        get { return customerIDValue; }
        set { customerIDValue = value; }
    }

    private string companyNameValue;
    /// <summary>
    /// The name for this customer
    /// </summary>
    public string CompanyName
    {
        get { return companyNameValue; }
        set { companyNameValue = value; }
    }

    private string cityValue;
    /// <summary>
    /// The city for this customer
    /// </summary>
    public string City
    {
        get { return cityValue; }
        set { cityValue = value; }
    }

    private Orders ordersValue;
    /// <summary>
    /// The orders for this customer
    /// </summary>
    public Orders Orders
    {
        get { return ordersValue; }
        set { ordersValue = value; }
    }

    public override string ToString()
    {
        return this.CompanyName + " (" + this.CustomerID + ")";
    }
}

/// <summary>
/// A collection of Customer objects
/// </summary>
public class Customers : System.Collections.Generic.List<Customer>
{

}

Per creare gli oggetti Orders

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto SilverlightObjectBinding, scegliere Aggiungi, quindi fare clic su Nuovo elemento.

  2. Nella finestra di dialogo Aggiungi nuovo elemento fare clic sull'elemento Classe.

  3. Denominarlo Order e fare clic su Aggiungi.

  4. Nel file di codice Order sostituire il codice nella classe Order con il codice seguente:

    ''' <summary>
''' A single order
''' </summary>
Public Class Order

    Public Sub New()
    End Sub

    ''' <summary>
    ''' Creates a new order
    ''' </summary>
    ''' <param name="orderid">The identifier for this order</param>
    ''' <param name="customerID">The customer who placed this order</param>
    Public Sub New(ByVal orderid As Integer,
                   ByVal customerID As String)
        orderIDValue = orderid
        customerIDValue = customerID
    End Sub

    Private orderIDValue As Integer
    ''' <summary>
    ''' Identifier for this order
    ''' </summary>
    Public Property OrderID() As Integer
        Get
            Return orderIDValue
        End Get
        Set(ByVal value As Integer)
            orderIDValue = value
        End Set
    End Property

    Private customerIDValue As String
    ''' <summary>
    ''' The customer who placed this order
    ''' </summary>
    Public Property CustomerID() As String
        Get
            Return customerIDValue
        End Get
        Set(ByVal Value As String)
            customerIDValue = Value
        End Set
    End Property
End Class

''' <summary>
''' A collection of Orders
''' </summary>
Public Class Orders
    Inherits System.Collections.Generic.List(Of Order)

End Class

    /// <summary>
/// A single order
/// </summary>
public class Order
{
    /// <summary>
    /// Creates a new order
    /// </summary>
    /// <param name="orderid"></param>
    /// <param name="customerID"></param>
    public Order(int orderid, string customerID)
    {
        orderIDValue = orderid;
        customerIDValue = customerID;
    }

    private int orderIDValue;
    /// <summary>
    /// The ID that uniquely identifies this order
    /// </summary>
    public int OrderID
    {
        get { return orderIDValue; }
        set { orderIDValue = value; }
    }

    private string customerIDValue;
    /// <summary>
    /// The customer who placed this order
    /// </summary>
    public string CustomerID
    {
        get { return customerIDValue; }
        set { customerIDValue = value; }
    }
}

/// <summary>
/// A collection of Order objects
/// </summary>
public class Orders : System.Collections.Generic.List<Order>
{

}

  5. Compilare il progetto.

Creazione dell'origine dati oggetto

Creare un'origine dati oggetto e inserire dati nella finestra Origini dati eseguendo la Configurazione guidata origine dati.

Per creare l'origine dati oggetto

  1. Scegliere Mostra origini dati dal menu Dati.

  2. Nella finestra Origini dati fare clic su Aggiungi nuova origine dati.

    Viene visualizzata la Configurazione guidata origine dati.

  3. Nella pagina Seleziona un tipo di origine dati fare clic su Oggetto, quindi su Avanti.

  4. Nella pagina Selezionare gli oggetti dati espandere due volte la visualizzazione struttura ad albero, quindi selezionare la casella di controllo accanto a Customers.

    Nota

    Assicurarsi di selezionare Customers e non la forma singolare Customer. Se Customers non è disponibile, chiudere la procedura guidata e ricompilare la soluzione.

  5. Scegliere Fine.

    La finestra Origini dati viene popolata con l'origine dati oggetto.

Creazione dei controlli associati a dati

Creare controlli che consentono di visualizzare i dati negli oggetti tramite trascinamento dei nodi Clienti e Ordini dalla finestra Origini dati alla finestra di progettazione.

Per creare i controlli associati a dati

  1. Aprire il file MainPage.xaml in visualizzazione Progettazione.

  2. Dalla finestra Origini dati trascinare il nodo Clienti nella finestra di progettazione.

  3. Dalla finestra Origini dati trascinare il nodo Ordini nella finestra di progettazione sotto la griglia dei clienti.

Inserire i dati negli oggetti e associarli alla CollectionViewSource generata

Poiché in questa procedura dettagliata vengono utilizzati oggetti personalizzati come modello dati, i dati di esempio vengono creati e caricati quando viene visualizzata la pagina Silverlight.

Dopo avere trascinato un'origine dati oggetto dalla finestra Origini dati, viene generato un commento del codice per consentire di configurare l'origine dati in modo che punti all'oggetto personalizzato. Rimuovere il commento del codice generato e impostare [System.Windows.Data.CollectionViewSource.Source] (myCollectionViewSource) in modo che punti all'insieme di oggetti dati. Nella procedura riportata di seguito viene illustrato come modificare il codice generato per associarlo ai controlli generati.

Ogni volta che si trascinano elementi dalla finestra Origini dati nella finestra di progettazione, viene generato un [System.Windows.Data.CollectionViewSource] sulla pagina Silverlight. Il nome si basa sull'origine dati in uso. Sostituire il commento: 'Resource Key for CollectionViewSource' con CustomersViewSource o customerViewSource, a seconda del linguaggio.

Per inserire i dati negli oggetti e associare i controlli agli oggetti

  1. In Esplora soluzioni espandere il nodo MainPage.xaml, quindi fare doppio clic sul file di codice MainPage.xaml.

  2. Nel file di codice (MainPage.xaml.vb o MainPage.xaml.cs) aggiungere il metodo seguente alla classe MainPage:

    ' Create sample data.
Private Function GetCustomers() As Customers

    Dim customers As New Customers

    ' Create 3 sample customers,
    ' each with 3 sample orders.
    Dim cust1 As New Customer("1", "A Bike Store", "Seattle")
    Dim cust1Orders As New Orders
    cust1Orders.Add(New Order(1, cust1.CustomerID))
    cust1Orders.Add(New Order(2, cust1.CustomerID))
    cust1Orders.Add(New Order(3, cust1.CustomerID))
    cust1.Orders = cust1Orders

    Dim cust2 As New Customer("2", "Progressive Sports", "Renton")
    Dim cust2Orders As New Orders
    cust2Orders.Add(New Order(4, cust2.CustomerID))
    cust2Orders.Add(New Order(5, cust2.CustomerID))
    cust2Orders.Add(New Order(6, cust2.CustomerID))
    cust2.Orders = cust2Orders

    Dim cust3 As New Customer("3", "Advanced Bike Components", "Irving")
    Dim cust3Orders As New Orders
    cust3Orders.Add(New Order(7, cust3.CustomerID))
    cust3Orders.Add(New Order(8, cust3.CustomerID))
    cust3Orders.Add(New Order(9, cust3.CustomerID))
    cust3.Orders = cust3Orders

    ' Add the sample customer objects to the 
    ' Customers collection.
    customers.Add(cust1)
    customers.Add(cust2)
    customers.Add(cust3)

    Return customers
End Function

    // Create sample data.
private Customers GetCustomers()
{
    Customers customers = new Customers();

    // Create 3 sample customers,
    // each with 3 sample orders.
    Customer cust1 = new Customer("1", "A Bike Store", "Seattle");
    Orders cust1Orders = new Orders();
    cust1Orders.Add(new Order(1, cust1.CustomerID));
    cust1Orders.Add(new Order(2, cust1.CustomerID));
    cust1Orders.Add(new Order(3, cust1.CustomerID));
    cust1.Orders = cust1Orders;

    Customer cust2 = new Customer("2", "Progressive Sports", "Renton");
    Orders cust2Orders = new Orders();
    cust2Orders.Add(new Order(4, cust2.CustomerID));
    cust2Orders.Add(new Order(5, cust2.CustomerID));
    cust2Orders.Add(new Order(6, cust2.CustomerID));
    cust2.Orders = cust2Orders;

    Customer cust3 = new Customer("3", "Advanced Bike Components", "Irving");
    Orders cust3Orders = new Orders();
    cust3Orders.Add(new Order(7, cust3.CustomerID));
    cust3Orders.Add(new Order(8, cust3.CustomerID));
    cust3Orders.Add(new Order(9, cust3.CustomerID));
    cust3.Orders = cust3Orders;

    // Add the sample customer objects to the 
    // Customers collection.
    customers.Add(cust1);
    customers.Add(cust2);
    customers.Add(cust3);

    return customers;
}

  3. Sostituire il codice commentato all'interno del gestore eventi UserControl_Loaded con il codice seguente:

    Private Sub UserControl_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded

    'Do not load your data at design time.
    If Not (System.ComponentModel.DesignerProperties.GetIsInDesignMode(Me)) Then
        'Load your data here and assign the result to the CollectionViewSource.
        Dim myCollectionViewSource As System.Windows.Data.CollectionViewSource = CType(Me.Resources("CustomersViewSource"), System.Windows.Data.CollectionViewSource)
        myCollectionViewSource.Source = GetCustomers()
    End If
End Sub

    private void UserControl_Loaded(object sender, RoutedEventArgs e)
{

    // Do not load your data at design time.
    if (!System.ComponentModel.DesignerProperties.GetIsInDesignMode(this))
    {
        //Load your data here and assign the result to the CollectionViewSource.
        System.Windows.Data.CollectionViewSource myCollectionViewSource = (System.Windows.Data.CollectionViewSource)this.Resources["customersViewSource"];
        myCollectionViewSource.Source = GetCustomers();
    }
}

Verifica dell'applicazione

Compilare ed eseguire l'applicazione per verificare che sia possibile visualizzare i record clienti.

Per eseguire il test dell'applicazione

  1. Scegliere Compila soluzione dal menu Compila. Verificare che la soluzione venga compilata senza errori.

  2. Eseguire l'applicazione.

  3. Verificare che i 3 clienti vengano visualizzati nella griglia dati e che i rispettivi ordini vengano visualizzati nella griglia degli ordini.

  4. Selezionare un cliente diverso e verificare che gli ordini vengano aggiornati in modo che siano visualizzati solo gli ordini del cliente selezionato.

  5. Chiudere l'applicazione.

Passaggi successivi

Dopo avere completato questa procedura dettagliata, è possibile eseguire le attività correlate seguenti:

  • Imparare a salvare le modifiche nell'archivio dati. Per ulteriori informazioni, vedere Associazione dati (la pagina potrebbe essere in inglese).

Vedere anche

Altre risorse

Accesso ai dati in Visual Studio

Accesso dati e strutture di dati