Návod: Vytvoření vazby ovládacích prvků Silverlight k objektům

Článek
08/17/2015

V tomto návodu vytvoří aplikace programu Silverlight, který obsahuje ovládací prvky vázané na data. 2 Související obchodní uživatelem definované objekty jsou vázány ovládací prvky.

Tento návod ilustruje následující úkoly:

Vytvoření aplikace programu Silverlight.
Vytváření 2 týkající se vlastní objekty vazbu uživatelského rozhraní.
Systémem Průvodce konfigurací zdroje dat připojit vlastní objekt, který se naplní Zdroje dat okna.
Vytváření sady ovládací prvky vázané na data přetažením položek z Zdroje dat okno Silverlight Designer.

Poznámka

Váš počítač může v následujících pokynech zobrazovat odlišné názvy nebo umístění některých prvků uživatelského rozhraní sady Visual Studio. Tyto prvky jsou určeny edicí sady Visual Studio a použitým nastavením. Další informace najdete v tématu Customizing Development Settings in Visual Studio.

Požadavky

Chcete-li dokončit tento návod, potřebujete následující komponenty:

Visual Studio

Předchozí znalosti těchto pojmů je také užitečné, ale nejsou vyžadovány dokončit návod:

Práce s Silverlight Designer. Další informace naleznete v programu Silverlight.
Vázání dat programu Silverlight. Další informace naleznete v Vazba dat.
Práce s XAML. Další informace naleznete v XAML.

Vytvoření aplikace programu Silverlight

Tento návod začněte vytvořením aplikace programu Silverlight.

Vytvoření projektu programu Silverlight

Na soubor nabídka, vytvoření nového projektu.
Pod Visual C# nebo uzel Visual Basic klepněte na tlačítko Silverlight a klepněte na tlačítko Aplikace Silverlight.
V název zadejte SilverlightObjectBinding a klepněte na tlačítko OK.
Ponechejte výchozí nastavení Nové aplikace programu Silverlight dialogovém okně a klepněte na tlačítko OK.

Vytvoření aplikace programu Silverlight jako řešení s 2 projekty: SilverlightObjectBinding projektu a SilverlightObjectBinding.Web projektu, který slouží jako hostitel SilverlightObjectBinding projektu.

Vytváření vlastních objektů svázat

Zveřejnění dat do aplikace, musí být definován datový model. V tomto návodu vytvořit vlastní objekty, které představují Zákazníci a objednávky pro datový model.

Vytváření objektů zákazníků

V Aplikaci Solution Explorer, klepněte pravým tlačítkem na SilverlightObjectBinding projektu, přejděte na příkaz Přidat a pak klepněte na tlačítko Nové položky.
V Přidat novou položku dialogové okno, klepněte třídy zboží.
Změnit název na zákazníkovia klepněte na tlačítko Přidat.

V souboru kód zákazníka, nahradit Customer třídy s následujícím kódem:

''' <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>
{

}

Vytváření objektů objednávky

V Aplikaci Solution Explorer, klepněte pravým tlačítkem na SilverlightObjectBinding project, přejděte na příkaz Přidata klepněte na tlačítko Nové položky.
V Přidat novou položku dialogové okno, klepněte třídy zboží.
Změnit název na pořadía klepněte na tlačítko Přidat.

Nahrazení souboru kód objednávky Order třídy s následujícím kódem:

''' <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>
{

}

Projekt sestavte.

Vytváření objektu zdroje dat.

Vytvořit zdroj dat objektu a naplnění Zdroje dat okno spuštěním Průvodce konfigurací zdroje dat.

Vytvořit zdroj dat objektu

V nabídce Data klikněte na tlačítko Zobrazit zdroje dat.
V okně Zdroje dat klikněte na tlačítko Přidat nový zdroj dat.

Zobrazí se průvodce Průvodce konfigurací Zdroje Dat.
V Vyberte typ zdroje dat klepněte na možnost objektu a klepněte na tlačítko Další.
V Vyberte datové objekty stránky, rozbalte dvakrát stromovém zobrazení a potom zaškrtněte políčko vedle Zákazníci.

Poznámka

Vyberte Zákaznícia nikoli v jednotném čísle zákazníkovi.Pokud Zákazníci není k dispozici, průvodce ukončit a znovu vytvořit řešení.
Klepněte na tlačítko Dokončit.

Zdroje dat okna je naplněn zdroj dat objektu.

Vytváření ovládací prvky vázané na Data

Vytvořit ovládací prvky, které zobrazují data v objektů přetažením Zákazníci a objednávky uzlů z Zdroje dat okna Návrhář.

Chcete-li vytvořit ovládací prvky vázané na data

MainPage.xaml otevřete v návrhovém zobrazení.
Z Zdroje dat okna, přetáhněte Zákazníci uzel Návrhář.
Z Zdroje dat okna, přetáhněte objednávky uzel Návrhář pod mřížkou zákazníkům.

Naplnění objekty data a jejich svázat generované CollectionViewSource

Protože tento návod používá vlastní objekty jako datový model, ukázkových dat je vytvořen a načteny při otevření stránky programu Silverlight.

Po přetažení zdroji dat objektu z Zdroje dat okno komentář kód generován pomoci nakonfigurovat zdroj dat pro vlastní objekt. Z komentáře komentář generovaného kódu a nastavit System.Windows.Data.CollectionViewSource.Source (myCollectionViewSource) přejděte do kolekce datových objektů. Následující postup ukazuje, jak změnit kód generovaný vazbu na vytvořené ovládací prvky.

Při každém přetažení položek z Zdroje dat okna Návrhář, System.Windows.Data.CollectionViewSource je generována na stránku programu Silverlight. Jeho název je založen na zdroji dat, který používáte. Nahraďte komentář, který zní: "Resource Key for CollectionViewSource' s CustomersViewSource nebo customerViewSource podle jazyka.

K naplnění objekty s daty a svázat ovládací prvky s objekty

V Aplikaci Solution Explorer, rozbalte MainPage.xaml uzlu a pak poklepejte MainPage.xaml kód souboru.

V souboru kódu (MainPage.xaml.vb nebo MainPage.xaml.cs) přidat metodu MainPage třídy:

' 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;
}

Nahradit kód s komentářem uvnitř UserControl_Loaded obslužné rutiny události s následujícím:

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();
    }
}

Testování aplikace

Vytvořit a spustit aplikaci ověřit, že můžete zobrazit záznamy zákazníků.

Testování aplikace

Na sestavení nabídky, klepněte na tlačítko Sestavit řešení. Ověřte, že vytvoří řešení bez chyb.
Spusťte aplikaci.
Ověřte v prvku datagrid se zobrazí 3 Zákazníci a objednávky vybraného odběratele jsou zobrazeny v tabulce objednávky.
Vyberte jiný zákazníka a ověřte, zda že jsou objednávky aktualizuje a zobrazí objednávky vybraného odběratele.
Ukončete aplikaci.

Další kroky

Po dokončení tohoto postupu, můžete provádět následující související úkoly:

Jak uložit změny úložiště dat. Další informace naleznete v Vazba dat.

Viz také

Další zdroje

Přístup k datům v sadě Visual Studio

Přístup k datům a struktury dat

Sdílet prostřednictvím

Návod: Vytvoření vazby ovládacích prvků Silverlight k objektům

Požadavky

Vytvoření aplikace programu Silverlight

Vytvoření projektu programu Silverlight

Vytváření vlastních objektů svázat

Vytváření objektů zákazníků

Vytváření objektů objednávky

Vytváření objektu zdroje dat.

Vytvořit zdroj dat objektu

Vytváření ovládací prvky vázané na Data

Chcete-li vytvořit ovládací prvky vázané na data

Naplnění objekty data a jejich svázat generované CollectionViewSource

K naplnění objekty s daty a svázat ovládací prvky s objekty

Testování aplikace

Testování aplikace

Další kroky

Viz také

Další zdroje

Další materiály