Instruções passo a passo: associando controles WPF a um conjunto de dados

Neste passo a passo, você criará um aplicativo WPF que contém controles de associação de dados. Os controles são associados a registros de produto que são encapsulados em um conjunto de dados. Você também adicionará botões para navegar pelos produtos e salvar alterações em registros de produtos.

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

• Criando um aplicativo WPF e um conjunto de dados gerado a partir de dados no banco de dados de exemplo AdventureWorksLT.

• Criando um conjunto de controles de associação de dados ao arrastar uma tabela de dados da janela Fontes de Dados para uma janela do WPF Designer.

• Criando botões que navegam para a frente e para trás nos registros de produtos.

• Criando um botão para salvar as alterações que os usuários fazem nos registros de produtos na tabela de dados e na fonte de dados subjacente.

  Dica

  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 Personalizando configurações de desenvolvimento no Visual Studio.

Pré-requisitos

Você precisa dos seguintes componentes para concluir esta instrução passo a passo:

• Visual Studio

• Acesso a uma instância em execução do SQL Server ou SQL Server Express que tenha o banco de dados de exemplo AdventureWorksLT anexado a ele. É possível baixar o banco de dados AdventureWorksLT no site do CodePlex.

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

• Conjuntos de dados e TableAdapters. Para obter mais informações, consulte Trabalhando com conjuntos de dados no Visual Studio e Visão geral de TableAdapter.

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

• Associação de dados do WPF. Para obter mais informações, consulte Visão geral da vinculação de dados.

Criando o Projeto

Crie um novo projeto WPF. O projeto exibirá registros de produtos.

Para criar o projeto

1. Inicie o Visual Studio.

2. No menu Arquivo, aponte para Novo e clique em Projeto.

3. Expanda Visual Basic ou Visual C# e selecione Windows.

4. Selecione o modelo de projeto Aplicativo WPF.

5. Na caixa Nome, digite AdventureWorksProductsEditor e clique em OK.

   O Visual Studio cria o projeto AdventureWorksProductsEditor.

Criando um conjunto de dados para o aplicativo

Antes de criar controles de associação de dados, você deve definir um modelo de dados para seu aplicativo e adicioná-lo à janela Fontes de Dados. Neste passo a passo, você criará um conjunto de dados para usar como modelo de dados.

Para criar um conjunto de dados

1. No menu Dados, clique em Mostrar Fontes de Dados.

   A janela Fontes de Dados é aberta.

2. Na janela Fontes de Dados, clique em Adicionar Nova Fonte de Dados.

   O Assistente de Configuração de Fonte de Dados é aberto.

3. Na página Escolher um Tipo de Fonte de Dados, selecione Banco de Dados e clique em Avançar.

4. Na página Escolher um Modelo de Banco de Dados, selecione Conjunto de Dados e clique em Avançar.

5. Na página Escolha a Conexão de Dados, selecione uma das seguintes opções:

   • Se uma conexão de dados com o banco de dados de exemplo AdventureWorksLT estiver disponível na lista suspensa, selecione-a e clique em Próximo.

     -ou-

   • Clique em Nova Conexão e crie uma conexão com o banco de dados AdventureWorksLT.

6. Na página Salvar a Cadeia de Conexão no Arquivo de Configuração do Aplicativo marque a caixa de seleção Sim, salvar a conexão como e clique em Próximo.

7. Na página Escolher Objetos do Banco de Dados, expanda Tabelas e selecione a tabela Produto (SalesLT).

8. Clique em Finalizar.

   O Visual Studio adiciona um novo arquivo AdventureWorksLTDataSet.xsd ao projeto, e adiciona um item correspondente AdventureWorksLTDataSet à janela Fontes de Dados. O arquivo AdventureWorksLTDataSet.xsd define um conjunto de dados tipado nomeado AdventureWorksLTDataSet e um TableAdapter nomeado ProductTableAdapter. A seguir neste passo a passo, você usará o ProductTableAdapter para preencher o conjunto de dados com dados e salvar as alterações no banco de dados.

9. Compile o projeto.

Editando o método de preenchimento padrão do TableAdapter

Para preencher o conjunto de dados com dados, use o método Fill do ProductTableAdapter. Por padrão, o método Fill preenche o ProductDataTable no AdventureWorksLTDataSet com todas as linhas de dados da tabela Produto. Você pode modificar esse método para retornar apenas um subconjunto das linhas. Para este passo a passo, modifique o método Fill para retornar somente linhas de produtos com fotos.

Para carregar as linhas de produtos que possuem fotos

1. No Gerenciador de Soluções, clique duas vezes no arquivo AdventureWorksLTDataSet.xsd.

   O designer de conjunto de dados é aberto.

2. No designer, clique com o botão direito do mouse na consulta Fill,GetData() e selecione Configurar.

   O Assistente de Configuração do TableAdapter é aberto.

3. Na página Insira uma Instrução SQL, adicione a seguinte cláusula WHERE após a instrução SELECT na caixa de texto.

   WHERE ThumbnailPhotoFileName <> 'no_image_available_small.gif'
   

4. Clique em Finalizar.

Definindo a interface do usuário

Adicione vários botões à janela, modificando o XAML no WPF Designer. A seguir neste passo a passo, você adicionará o código que permite aos usuários navegar e salvar alterações nos registros de produtos, usando esses botões.

Para definir a interface do usuário da janela

1. No Gerenciador de Soluções, clique duas vezes em MainWindow.xaml.

   A janela é aberta no WPF Designer.

2. Na exibição XAML do designer, adicione o seguinte código entre as marcas <Grid>:

   <Grid.RowDefinitions>
       <RowDefinition Height="75" />
       <RowDefinition Height="625" />
   </Grid.RowDefinitions>
   <Button HorizontalAlignment="Left" Margin="22,20,0,24" Name="backButton" Width="75">&lt;</Button>
   <Button HorizontalAlignment="Left" Margin="116,20,0,24" Name="nextButton" Width="75">&gt;</Button>
   <Button HorizontalAlignment="Right" Margin="0,21,46,24" Name="saveButton" Width="110">Save changes</Button>
   

3. Compile o projeto.

Criando controles de associação de dados

Crie controles que exibem registros do cliente ao arrastar a tabela Produto da janela Fontes de Dados para o WPF Designer.

Para adicionar controles de associação de dados

1. Na janela Fontes de Dados, abra o menu da lista suspensa para o nó Produto e selecione Detalhes.

2. Expanda o nó Produto.

3. Neste exemplo, alguns campos não serão exibidos, portanto, clique no menu suspenso ao lado dos seguintes nós e selecione Nenhum:

   • ProductCategoryID

   • ProductModelID

   • ThumbnailPhotoFileName

   • rowguid

   • ModifiedDate

4. Clique no menu suspenso ao lado do nó ThumbNailPhoto e selecione Imagem.

   Dica

   Por padrão, todos os itens na janela Fontes de Dados que representam as imagens têm seu controle padrão definido como Nenhum.Isso ocorre porque as imagens são armazenadas como matrizes de bytes em bancos de dados e as matrizes de bytes podem conter qualquer coisa, desde uma simples matriz de bytes até um arquivo executável de um aplicativo grande.

5. Na janela Fontes de Dados, arraste o nó Produto para a linha de grade sob a linha que contém os botões.

   O Visual Studio gera XAML que define um conjunto de controles associados aos dados na tabela Produto. Também gera um código que carrega os dados. Para obter mais informações sobre XAML e código, consulte Associando controles WPF a dados no Visual Studio.

6. No designer, clique na caixa de texto ao lado do rótulo de Identificação do Produto (Product ID).

7. Na janela Propriedades, marque a caixa de seleção ao lado da propriedade IsReadOnly.

Navegando nos registros do produto

Adicione o código que permite aos usuários percorrer os registros do produto ao usar os botões < e >.

Para permitir que os usuários naveguem nos registros do produto

1. No designer, clique duas vezes no botão < na superfície da janela.

   O Visual Studio abre o arquivo code-behind e cria um novo manipulador de eventos backButton_Click para o evento Click.

2. Modifique o manipulador de eventos Window_Loaded para que ProductViewSource, AdventureWorksLTDataSet e AdventureWorksLTDataSetProductTableAdapter fiquem fora do método e acessíveis a todo o formulário. Só declare esses globais para o formulário, atribua-os no manipulador de eventos Window_Loaded de forma semelhante ao seguinte:

   Dim ProductViewSource As System.Windows.Data.CollectionViewSource
   Dim AdventureWorksLTDataSet As AdventureWorksProductsEditor.AdventureWorksLTDataSet
   Dim AdventureWorksLTDataSetProductTableAdapter As AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter
   
   Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
       AdventureWorksLTDataSet = CType(Me.FindResource("AdventureWorksLTDataSet"), AdventureWorksProductsEditor.AdventureWorksLTDataSet)
       'Load data into the table Product. You can modify this code as needed.
       AdventureWorksLTDataSetProductTableAdapter = New AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter()
       AdventureWorksLTDataSetProductTableAdapter.Fill(AdventureWorksLTDataSet.Product)
       ProductViewSource = CType(Me.FindResource("ProductViewSource"), System.Windows.Data.CollectionViewSource)
       ProductViewSource.View.MoveCurrentToFirst()
   End Sub
   

   private AdventureWorksProductsEditor.AdventureWorksLTDataSet AdventureWorksLTDataSet;
   private AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter adventureWorksLTDataSetProductTableAdapter;
   private System.Windows.Data.CollectionViewSource productViewSource;
   
   private void Window_Loaded(object sender, RoutedEventArgs e)
   {
       AdventureWorksLTDataSet = ((AdventureWorksProductsEditor.AdventureWorksLTDataSet)(this.FindResource("adventureWorksLTDataSet")));
       // Load data into the table Product. You can modify this code as needed.
       adventureWorksLTDataSetProductTableAdapter = new AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter();
       adventureWorksLTDataSetProductTableAdapter.Fill(AdventureWorksLTDataSet.Product);
       productViewSource = ((System.Windows.Data.CollectionViewSource)(this.FindResource("productViewSource")));
       productViewSource.View.MoveCurrentToFirst();
   }
   

3. Adicione o seguinte código ao manipulador de eventos do backButton_Click:

   If ProductViewSource.View.CurrentPosition > 0 Then
       ProductViewSource.View.MoveCurrentToPrevious()
   End If
   

   if (productViewSource.View.CurrentPosition > 0)
   {
       productViewSource.View.MoveCurrentToPrevious();
   }
   

4. Retorne ao designer e clique duas vezes no botão >.

5. Adicione o seguinte código ao manipulador de eventos do nextButton_Click:

   If ProductViewSource.View.CurrentPosition < CType(ProductViewSource.View, CollectionView).Count - 1 Then
       ProductViewSource.View.MoveCurrentToNext()
   End If
   

   if (productViewSource.View.CurrentPosition < ((CollectionView)productViewSource.View).Count - 1)
   {
       productViewSource.View.MoveCurrentToNext();
   }
   

Salvando alterações em registros de produtos

Adicione o código que permite aos usuários salvar alterações em registros de produtos ao usar o botão Salvar alterações.

Para adicionar a capacidade de salvar as alterações em registros de produtos

1. No designer, clique duas vezes no botão Salvar Alterações.

   O Visual Studio abre o arquivo code-behind e cria um novo manipulador de eventos saveButton_Click para o evento Click.

2. Adicione o seguinte código ao manipulador de eventos do saveButton_Click:

   AdventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product)
   

   adventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product);
   

   Dica

   Este exemplo usa o método Save do TableAdapter para salvar as alterações.Isso ocorre neste passo a passo, porque apenas uma tabela de dados está sendo alterada.Se for necessário salvar alterações em várias tabelas de dados, você pode também usar o método UpdateAll do TableAdapterManager que o Visual Studio gera com o seu conjunto de dados.Para obter mais informações, consulte Visão geral de TableAdapterManager.

Testando o aplicativo

Crie e execute o aplicativo. Verifique se você pode exibir e atualizar registros de produtos.

Para testar o aplicativo

1. Pressione F5.

   O aplicativo é compilado e executado. Verifique o seguinte:

   • As caixas de texto exibem dados do primeiro registro do produto que tem uma foto. A identificação deste produto é 713 e nome Long-Sleeve Logo Jersey, S.

   • Você pode clicar nos botões > ou < para navegar em outros registros de produto.

2. Em um dos registros de produto, altere o valor Tamanho e clique em Salvar Alterações.

3. Feche o aplicativo e reinicie-o pressionando F5 no Visual Studio.

4. Navegue até o registro do produto que você alterou e verifique se a mudança persistiu.

5. Feche o aplicativo.

Próximas etapas

Depois de completar este passo a passo, você poderá realizar as seguintes tarefas relacionadas:

• Saiba como usar a janela Fontes de Dados no Visual Studio para associar controles do WPF a outros tipos de fontes de dados. Para obter mais informações, consulte Instruções passo a passo: associando controles WPF a um WCF Data Services.

• Saiba como usar a janela Fontes de Dados no Visual Studio para exibir dados relacionados (isto é, dados em uma relação pai-filho) em controles do WPF. Para obter mais informações, consulte Instruções passo a passo: exibindo dados relacionados em um aplicativo WPF.

Consulte também

Tarefas

Como associar controles WPF a dados no Visual Studio

Conceitos

Associando controles WPF a dados no Visual Studio

Trabalhando com conjuntos de dados no Visual Studio

Visão geral da vinculação de dados

Outros recursos

WPF Designer Overview