Partilhar via

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

Observação

A DataSet classe 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. As tecnologias são especialmente úteis para aplicativos que permitem aos usuários modificar dados e manter as alterações de volta ao banco de dados. Embora os conjuntos de dados sejam uma tecnologia comprovadamente bem-sucedida, a abordagem recomendada para novos aplicativos .NET é usar o Entity Framework Core. O Entity Framework fornece uma maneira mais natural de trabalhar com dados tabulares como modelos de objeto e tem uma interface de programação mais simples.

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

Este passo a passo ilustra as seguintes tarefas:

  • Criar uma aplicação WPF e um conjunto de dados que é 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 WPF Designer.

  • Criação de botões para navegar para a frente e para trás entre os registos de produtos.

  • Criação de 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.

Observação

As instruções neste artigo ilustram a versão mais recente da experiência de desenvolvimento interativo (IDE) disponível no Visual Studio. Seu computador pode mostrar nomes ou locais diferentes para alguns dos elementos da interface do usuário. Você pode estar usando uma versão diferente do Visual Studio ou configurações de ambiente diferentes. Para obter mais informações, consulte Personalizar o IDE.

Pré-requisitos

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

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

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

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

Criar o projeto

Crie um novo projeto WPF para exibir registros de produto.

  1. Abra o Visual Studio.

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

  3. Procure o modelo de projeto C# WPF App 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 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 da Fonte de Dados é aberto.

  3. Na página Escolha 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 Avançar.

  5. Na página Escolha 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 , marque a caixa de seleção Sim, salve a conexão como e selecione Avançar.

  7. Na página Choose Your Database Objects, expanda Tables e selecione a tabela Product (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. Mais adiante neste passo a passo, você usará o ProductTableAdapter para preencher o conjunto de dados com dados e salvar as alterações de volta no banco de dados.

  9. Construa o projeto.

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

Para preencher o conjunto de dados com dados, use o Fill método do ProductTableAdapter. Por padrão, o método Fill preenche o ProductDataTable no AdventureWorksLTDataSet com todas as linhas de dados da tabela Product. 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 tenham fotos.

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

    Abre-se o designer do conjunto de dados.

  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 Introduzir uma instrução SQL, adicione a seguinte WHERE 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 WPF Designer. Mais adiante neste passo a passo, você adicionará código que permite aos usuários percorrer e salvar alterações em 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. No modo de 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. Construa o projeto.

Criar controles associados a dados

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

  1. Na janela Fontes de Dados, clique no menu suspenso do nó Produto e selecione Detalhes.

  2. Expanda o nó Produto .

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

    • IDCategoriaProduto

    • ID do Modelo do Produto

    • NomeFicheiroFotoMiniatura

    • Rowguid

    • ModifiedDate

  4. Clique no menu de lista pendente 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 da grelha abaixo da linha que contém os botões.

    O Visual Studio gera XAML que define um conjunto de controles vinculados a dados na tabela Products . Ele também gera código que carrega os dados. Para obter mais informações sobre o código e o XAML gerados, consulte Vincular controles WPF a dados no Visual Studio.

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

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

Adicione código que permita aos utilizadores percorrer os registos de produtos 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 a todo o formulário. Declare apenas estes como globais para o formulário e atribua-os dentro do manipulador de eventos Window_Loaded 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 backButton_Click eventos:

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

  4. Volte para o designer e clique duas vezes no botão >.

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

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

Salvar alterações nos registros de produtos

Adicione código que permita aos usuários salvar alterações em registros de produtos 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 manipulador de saveButton_Click eventos:

    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, porque apenas uma tabela de dados está sendo alterada. Caso necessites de salvar alterações em várias tabelas de dados, podes alternativamente utilizar o método UpdateAll gerado pelo TableAdapterManager Visual Studio com o teu conjunto de dados. Para obter mais informações, consulte TableAdapters.

Testar a aplicação

Compile e execute o aplicativo. Verifique se você pode exibir e atualizar os registros do produto.

  1. Pressione F5.

    O aplicativo é compilado e executado. Verifique o seguinte:

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

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

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

  3. Feche o aplicativo e, em seguida, 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óximos passos

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

Conteúdo relacionado