Associar controles do WPF a um conjunto de dados em aplicativos do .NET Framework

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

Este 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 associados a dados arrastando uma tabela de dados da janela Fontes de Dados para uma janela no Designer do WPF.

• Criando botões que permitem a navegação para frente e para trás entre os registros de produtos.

• Criando um botão que salva as alterações feitas pelos usuários nos registros do produto na tabela de dados e na fonte de dados subjacente.

Pré-requisitos

Você precisa dos seguintes componentes para concluir este passo a passo:

• Para concluir este tutorial, você precisa das cargas de trabalho de desenvolvimento e armazenamento e processamento de dados do .NET instaladas no Visual Studio. Para instalá-los, abra do Instalador do Visual Studio e escolha Modificar (ou Mais>Modificar) ao lado da versão do Visual Studio que você deseja modificar. Confira Modificar o Visual Studio.

• Acesso a uma instância em execução do SQL Server ou do SQL Server Express que tem o banco de dados de exemplo AdventureWorks Light (AdventureWorksLT) anexado a ele. Para baixar o banco de dados, consulte os bancos de dados de exemplo do AdventureWorks.

O conhecimento prévio dos seguintes conceitos 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 as ferramentas de conjunto de dados no Visual Studio e tableAdapters.

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

Criar o projeto

Crie um novo projeto do WPF para exibir registros de produto.

1. Abra o Visual Studio.

2. Na janela inicial, escolha Criar um novo projeto.

3. Pesquise o modelo de projeto do aplicativo WPF em C# e siga as etapas para criar o projeto, nomeando o projeto AdventureWorksProductsEditor.

   O Visual Studio cria o projeto AdventureWorksProductsEditor.

Criar um conjunto de dados para o aplicativo

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

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

   A janela Fontes de Dados é aberta.

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

   O assistente de Configuração da Fonte de Dados é aberto.

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

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

5. Na página Escolher Sua 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 selecione Avançar.

   • 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, selecione a caixa de seleção Sim, salve a conexão como e, em seguida, selecione Avançar.

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

8. Clique em Concluir.

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

9. Compile o projeto.

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

Para preencher o conjunto de dados com informações, utilize o método Fill do ProductTableAdapter. Por padrão, o método Fill preenche 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 Fill método para retornar apenas linhas para produtos que têm 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 se abre.

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

   WHERE ThumbnailPhotoFileName <> 'no_image_available_small.gif'
   

4. Clique em Concluir.

Definir a interface do usuário

Adicione vários botões à janela modificando o XAML no Designer do WPF. Posteriormente, neste passo a passo, você adicionará um código que permite que os usuários percorram e salvem alterações nos registros de produtos usando esses botões.

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

   A janela é aberta no Designer do WPF.

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

   <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.

Criar controles associados a dados

Crie controles que exibem registros de clientes arrastando a Product tabela da janela Fontes de Dados para o Designer do WPF.

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

2. Expanda o nó Produto.

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

   • ProductCategoryID

   • ProductModelID

   • ThumbnailPhotoFileName

   • rowguid

   • ModifiedDate

4. Clique no menu na lista suspensa ao lado do nó ThumbNailPhoto e selecione Imagem.

   Observação

   Por padrão, os itens na janela Fontes de Dados que representam 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é o 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 a dados na tabela Produtos . Ele também gera um código que carrega os dados. Para obter mais informações sobre o XAML e o código gerados, consulte Associar controles WPF a dados no Visual Studio.

6. No designer, clique na caixa de texto ao lado do rótulo de ID do Produto .

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

Navegar pelos registros do produto

Adicione um código que permita que os usuários percorram os registros do produto usando os botões < e >.

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 backButton_Click manipulador de eventos para o Click evento.

2. Modifique o Window_Loaded manipulador de eventos, de modo que o ProductViewSource, AdventureWorksLTDataSete AdventureWorksLTDataSetProductTableAdapter estão fora do método e acessíveis para todo o formulário. Declare-os apenas como globais para o formulário e atribua-os dentro do Window_Loaded manipulador de eventos semelhante ao seguinte:

   • C#
   • VB

   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 backButton_Click manipulador de eventos:

   • C#
   • VB

   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 nextButton_Click manipulador de eventos:

   • C#
   • VB

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

Salvar alterações nos registros do produto

Adicione um código que permite que os usuários salvem alterações nos registros do produto usando o botão Salvar alterações .

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

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

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

   • C#
   • VB

   adventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product);
   

   Observação

   Este exemplo usa o Save método do TableAdapter para salvar as alterações. Isso é apropriado neste passo a passo, pois apenas uma tabela de dados está sendo alterada. Se precisar salvar alterações em várias tabelas de dados, você poderá, como alternativa, usar o UpdateAll método que o TableAdapterManager Visual Studio gera com seu conjunto de dados. Para obter mais informações, consulte TableAdapters.

Testar o aplicativo

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

1. Pressione F5.

   O aplicativo compila e executa. Verifique o seguinte:

   • As caixas de texto exibem dados do primeiro registro do produto que tem uma foto. Este produto tem a ID do produto 713 e o nome Long-Sleeve Logotipo Jersey, S.

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

2. Em um dos registros do produto, altere o valor tamanho e, em seguida, selecione Salvar alterações.

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

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

5. Feche o aplicativo.

Próximas etapas

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

• Saiba como usar a janela Fontes de Dados no Visual Studio para associar controles WPF a outros tipos de fontes de dados. Para obter mais informações, consulte Associar controles do WPF a um serviço de dados do WCF.

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

Conteúdo relacionado

• Associar controles do WPF a dados no Visual Studio
• Ferramentas de conjunto de dados no Visual Studio
• Visão geral da vinculação de dados