Passo a passo: Ligar os controles do Silverlight a objetos

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.

  Observação
  Seu computador pode mostrar nomes ou locais diferentes para alguns dos elementos da 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 Configurações de 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.

   Observação
   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

Acesso a dados em Visual Studio

acesso a dados e estruturas de dados