Compartilhar via

Instruções passo a passo: associando controles Silverlight a objetos

  • Artigo

Em essa explicação passo a passo, você criará um aplicativo do Silverlight que contém controles associados a dados. Os controles são associados a 2 objetos de negócios definidos pelo usuário relacionados.

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

  • Criando um aplicativo do Silverlight.

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

  • Executando Assistente para Configuração de Fonte de Dados para se conectar ao objeto personalizado que preenche a janela de Fontes de Dados .

  • Criando um conjunto de controles associados a dados arrastando itens da janela de Fontes de Dados a Silverlight Designer.

    Dica

    Seu computador pode mostrar diferentes nomes ou locais para alguns dos elementos de interface do usuário do Visual Studio nas instruções a seguir. A edição do Visual Studio que você possui e as configurações que você usa determinam esses elementos. Para obter mais informações, consulte Customizing Development Settings in Visual Studio.

Pré-requisitos

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

  • Visual Studio

O conhecimento prévio dos seguintes conceitos também é útil, mas não necessário para concluir a explicação passo a passo:

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

  • Associação de dados do Silverlight. Para obter mais informações, consulte Associação de Dados.

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

Criando o aplicativo Silverlight

Iniciar este passo-a-passo criando um aplicativo do Silverlight.

Para criar o projeto do Silverlight

  1. No menu File, crie um novo projeto.

  2. Clique no Silverlight de Visual C# ou de Nó do Visual Basic, e clique em Silverlight aplicativo.

  3. Em a caixa de Nome , o tipo SilverlightObjectBinding e clique em OK.

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

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

Criando objetos personalizados para associar a

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

Para criar objetos customers

  1. Em Gerenciador de Soluções, clique com o botão direito do mouse no projeto de SilverlightObjectBinding adicionar, aponte para, e clique Novo Item.

  2. Em a caixa de diálogo de Adicionar novo item , clique no item de Classe .

  3. Altere o nome para cliente, clique em Adicionar.

  4. Em o arquivo de código do cliente, substitua a classe de Customer 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 objetos orders

  1. Em Gerenciador de Soluções, clique com o botão direito do mouse no projeto de SilverlightObjectBinding , aponte para Adicionar, e então clique em Novo Item.

  2. Em a caixa de diálogo de Adicionar novo item , clique no item de Classe .

  3. Altere o nome para Pedido, clique em Adicionar.

  4. Em o arquivo de código de ordem, substitua a classe de Order 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

Crie um objeto de fonte de dados e preencher a janela de Fontes de Dados executando Assistente para Configuração de Fonte de Dados.

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. Em a página de Escolher um Tipo de Fonte de Dados , clique em Objeto e clique em Avançar.

  4. Em a página de Selecionar os Objetos de Dados , expanda o modo de exibição de árvore duas vezes em, selecione a caixa de seleção ao lado de clientes.

    Dica

    Certifique-se de clientesselecione, e não clientesingular.Se clientes não estiver disponível, saia do assistente e recriar a solução.

  5. Clique em Concluir.

    A janela de Fontes de Dados é preenchida com o objeto de fonte de dados.

Criando controles associados a dados

Criar controles que exibem dados em objetos arrastando os nós de clientes e de Pedidos da janela de Fontes de Dados para o designer.

Para criar controles associados a dados

  1. MainPage.xaml aberto no modo design.

  2. De a janela de Fontes de Dados , arraste o nó de clientes para o designer.

  3. De a janela de Fontes de Dados , arraste o nó de Pedidos o designer abaixo da grade de clientes.

Preencher os objetos com dados e associá-los ao CollectionViewSource gerado

Como essa explicação passo a passo usa objetos personalizados como um modelo de dados, os dados de exemplo são criados e carregados quando a página do Silverlight abre.

Depois que você arrasta um objeto de fonte de dados da janela de Fontes de Dados , um comentário de código é gerado para ajudar a configurar a fonte de dados para apontar para o objeto personalizado. Tire comentários do comentário de código e o dataset gerado System.Windows.Data.CollectionViewSource.Source (myCollectionViewSource) para apontar para sua coleção de objetos de dados. O procedimento a seguir mostra como modificar o código gerado para associá-lo a controles gerados.

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

Para preencher os objetos com dados e associar controles a objetos

  1. Em Gerenciador de Soluções, expanda o nó de MainPage.xaml , clique duas vezes no arquivo de código de MainPage.xaml .

  2. Em o arquivo de código ()MainPage.xaml.vb ou MainPage.xaml.csadicione o seguinte método à classe de 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. Substitua o código comentado no manipulador de eventos de UserControl_Loaded 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

Compilar e executar o aplicativo para verificar que você possa exibir registros de clientes.

Para testar o aplicativo

  1. Em o menu de Compilar , clique em Compilar solução. Verifique se a solução compile sem erros.

  2. Execute o aplicativo.

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

  4. Selecione um cliente diferente e verifique os pedidos são atualizados para exibir somente pedidos do cliente selecionado.

  5. Feche o aplicativo.

Próximas etapas

Após concluir essa explicação passo a passo, você pode executar as seguintes tarefas relacionadas:

  • Aprender como salvar alterações de volta para o armazenamento de dados. Para obter mais informações, consulte Associação de Dados.

Consulte também

Outros recursos

Acessando dados no Visual Studio

acesso a dados e estruturas de dados