Compartilhar via

Demonstra Passo a passo: Controles do Silverlight de vinculação a objetos

  • Artigo

Esta explicação passo a passo, você criará um aplicativo do Silverlight que contém os controles ligados a dados. Os controles estão vinculados a objetos de 2 relacionadas aos negócios definidas pelo usuário.

Essa explicação passo a passo ilustra as seguintes tarefas:

  • Criando um aplicativo do Silverlight.

  • Criar 2 relacionadas a objetos personalizados para vincular a interface do usuário.

  • Executando o Data Source Configuration Wizard para se conectar a objeto personalizado que preenche a Fontes de dados janela.

  • A criação de um conjunto de controles ligados a dados, arrastando itens da Fontes de dados janela para o Silverlight Designer.

    ObservaçãoObservação

    Seu computador pode mostrar diferentes nomes ou localizações para alguns do Visual Studio elementos de interface do usuário as instruções a seguir. O Visual Studio edição que você tem e as configurações que você usar determinam esses elementos. Para obter mais informações, consulte Trabalhando com configurações.

Pré-requisitos

Para completar este passo a passo, são necessários os seguintes componentes:

  • Visual Studio 2010.

Conhecimento prévio dos seguintes conceitos também é útil, mas não é necessária para concluir o passo a passo:

  • Trabalhando com o Silverlight Designer. Para obter mais informações, consulte Silverlight.

  • Vinculação de dados do Silverlight. Para obter mais informações, consulte A ligação de dados.

  • Trabalhando com o XAML. Para obter mais informações, consulte XAML.

Criando o aplicativo do Silverlight

Inicie esta explicação passo a passo, criando um aplicativo do Silverlight.

Para criar o projeto do Silverlight

  1. No menu File, crie um novo projeto.

  2. Sob o Visual C# ou o nó de Visual Basic, clique em Silverlight e, em seguida, clique em Aplicativo do Silverlight.

  3. No nome , digite SilverlightObjectBinding e, em seguida, clique em OK.

  4. Deixe as configurações padrão de Novo aplicativo do Silverlight caixa de diálogo e clique OK.

    O aplicativo do Silverlight é criado como uma solução com 2 projetos: um projeto de SilverlightObjectBinding e um projeto de SilverlightObjectBinding.Web é usado para hospedar o projeto SilverlightObjectBinding.

Criando objetos personalizados para vincular a

Para expor os dados para um aplicativo, um modelo de dados deve ser definido. Esta explicação passo a passo, você pode criar objetos personalizados que representam clientes e pedidos para o modelo de dados.

Para criar objetos de clientes

  1. Em Solution Explorer, com o botão direito SilverlightObjectBinding de projeto, aponte para Add e, em seguida, clique em Novo Item.

  2. No Add New Item caixa de diálogo, clique no classe item.

  3. Altere o nome para Customere em seguida, clique em Add.

  4. Substitua o arquivo de código do cliente, o Customer a classe com o seguinte código:

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

}

Para criar os objetos Orders

  1. Em Solution Explorer, com o botão direito SilverlightObjectBinding de projeto, aponte para Adde em seguida, clique em Novo Item.

  2. No Add New Item caixa de diálogo, clique no classe item.

  3. Altere o nome para ordeme em seguida, clique em Add.

  4. No arquivo de código de pedido, substituir o Order a classe com o seguinte código:

    ''' <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. Crie o projeto.

Criar o objeto de fonte de dados

Criar um objeto de fonte de dados e preencher o Fontes de dados janela executando o Data Source Configuration Wizard.

Para criar o objeto de fonte de dados

  1. No menu Data, clique em Show Data Sources.

  2. Na janela Data Sources, clique em Add New Data Source.

    O Data Source Configuration Wizard aparece.

  3. No Escolher um tipo de fonte de dados página, clique em objeto e, em seguida, clique em próximo.

  4. No Selecione os objetos de dados de página, expanda a exibição de árvore duas vezes e, em seguida, marque a caixa de seleção ao lado os clientes.

    ObservaçãoObservação

    Certifique-se de selecionar os clientese não o singular Customer. Se os clientes não estiver disponível, sair do assistente e recrie a solução.

  5. Clique em Finish.

    O Fontes de dados janela é preenchida com o objeto de fonte de dados.

Criação de controles ligados a dados

Criar controles que exibem dados em objetos arrastando o clientes e pedidos nós a partir de Fontes de dados janela para o designer.

Para criar os controles ligados a dados

  1. Abra o MainPage.xaml no modo de design.

  2. Do Fontes de dados janela, arraste o os clientes o nó para o designer.

  3. Do Fontes de dados janela, arraste o pedidos o nó para o designer abaixo da grade de clientes.

Preencher os objetos com dados e ligá-los a CollectionViewSource gerado

Como este passo a passo usa objetos personalizados como um modelo de dados, dados de exemplo são criados e carregados quando a página do Silverlight é aberta.

Após você arrastar um objeto de fonte de dados da Fontes de dados janela, um comentário do código é gerada para ajudar a configurar a fonte de dados para apontar para o seu objeto personalizado. Descomente o comentário do código gerado e defina [System.Windows.Data.CollectionViewSource.Source] (myCollectionViewSource) para apontar para a sua coleção de objetos de dados. O procedimento a seguir mostra como modificar o código gerado para acoplá-la aos controles gerados.

Sempre que você arrastar itens da Fontes de dados janela para o designer, um [System.Windows.Data.CollectionViewSource] é gerado na página Silverlight. Seu nome é baseado na fonte de dados que você está usando. Substitua o comentário que lê: 'Resource Key for CollectionViewSource' com CustomersViewSource ou customerViewSource, dependendo do idioma.

Para preencher os objetos com dados e vincular controles a objetos

  1. Em Solution Explorer, expanda o MainPage.xaml nó e então clique duas vezes o MainPage.xaml o arquivo de código.

  2. No arquivo de código (MainPage.xaml.vb ou MainPage.xaml.cs) adicione o seguinte método para o MainPage classe:

    ' 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. Substitua o código comentado dentro do UserControl_Loaded o manipulador de eventos com o seguinte:

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

Testando o aplicativo

Construir e executar o aplicativo para verificar o que você pode exibir registros de clientes.

Para testar o aplicativo

  1. Em Build menu, clique em Build Solution. Verifique se que a solução foi compilado sem erros.

  2. Execute o aplicativo.

  3. Verifique se os 3 clientes aparecem no datagrid e pedidos do cliente selecionado são exibidos na grade de pedidos.

  4. Selecione um cliente diferente e verifique se que as ordens são atualizadas para exibir somente os pedidos do cliente selecionado.

  5. Feche o aplicativo.

Próximas etapas

Depois de concluir este passo a passo, você pode executar as seguintes tarefas:

  • Aprenda a salvar as alterações de volta para seu armazenamento de dados. Para obter mais informações, consulte A ligação de dados.

Consulte também

Outros recursos

Acesso a dados em Visual Studio

Acesso a dados e estruturas de dados