Share via

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

  • Artigo

Observação

Os conjuntos de dados e as classes relacionadas são tecnologias herdadas do .NET Framework do início dos anos 2000 que permitem que os aplicativos trabalhem com dados na memória enquanto os aplicativos estão desconectados do banco de dados. Eles são bastante úteis em aplicativos que permitem que os usuários modifiquem dados e persistam as alterações no banco de dados. Embora os conjuntos de dados tenham se mostrado uma tecnologia muito bem-sucedida, é recomendado que os novos aplicativos .NET usem o Entity Framework Core. O Entity Framework proporciona uma forma mais natural de trabalhar com dados tabulares como modelos de objeto e conta com uma interface de programação mais simples.

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.

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

Observação

Seu computador pode mostrar diferentes nomes ou locais para alguns dos elementos de interface do usuário do Visual Studio neste artigo. Você pode estar usando outra edição do Visual Studio ou outras configurações de ambiente. Para obter mais informações, confira Personalizar o IDE.

Pré-requisitos

Você precisará dos seguintes componentes para concluir este passo a passo:

  • Para concluir este passo a passo, você precisa das cargas de trabalho de Desenvolvimento de área de trabalho do .NET e Armazenamento de dados e processamento instaladas no Visual Studio. Para instalá-las, abra 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 SQL Server Express que tenha 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 doAdventureWorks.

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

Criar o projeto

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

  1. Abra o Visual Studio.

  2. Na tela Iniciar, selecione 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 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.

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

    O Visual Studio adiciona um novo AdventureWorksLTDataSet.xsd arquivo AdventureWorksLTDataSet.xsd ao projeto, e adiciona um item correspondente AdventureWorksLTDataSet à janela Fonte de dados O AdventureWorksLTDataSet.xsd arquivo define um conjunto de dados tipado chamado AdventureWorksLTDataSet e um TableAdapter chamadoProductTableAdapter. 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.

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

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

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

  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.

Criar controles associados a dados

Crie controles que exibem registros do cliente arrastando a Producttabela da janela Fontes de Dados para o WPF Designer.

  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. 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 na lista suspensa ao lado do nó ThumbNailPhoto e selecione Imagem.

    Observação

    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 Produtos. Também gera um código que carrega os dados. Para 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.

Adicione o código que permite aos usuários rolar nos registros do produto ao usar 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 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. Declare-os apenas como globais para o formulário e atribua-os dentro do Window_Loaded manipulador de eventos 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();
}

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

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

Salvar alterações nos registros do produto

Adicione o código que permite aos usuários salvar alterações em registros de produtos ao usar 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 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);

    Observação

    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 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 é compilado e executado. Verifique o seguinte:

    • As caixas de texto exibem dados do primeiro registro do produto que tem uma foto. Este produto tem a ID 713 e o 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:

Conteúdo relacionado