Compartilhar via

Associar controles WPF a um conjunto de dados

  • Artigo

 

Publicado: abril de 2016

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 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, confira Personalizando o IDE.

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:

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"><</Button>  
<Button HorizontalAlignment="Left" Margin="116,20,0,24" Name="nextButton" Width="75">></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 Associar 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.

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:

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

        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

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

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

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

  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 < ((CollectionView)productViewSource.View).Count - 1)
            {
                productViewSource.View.MoveCurrentToNext();
            }

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

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:

Consulte também

Associar controles WPF a dados no Visual Studio
Associar controles WPF a dados no Visual Studio
Ferramentas do conjunto de dados no Visual Studio
WPF e Silverlight Designer Overview
Visão geral da vinculação de dados