Introdução ao WPF

Este passo a passo mostra como vincular tipos POCO a controles WPF em um formulário de "detalhes principais". O aplicativo usa as APIs do Entity Framework para preencher objetos com dados do banco de dados, controlar alterações e persistir dados no banco de dados.

O modelo define dois tipos que participam da relação um-para-muitos: Categoria (principal\primário) e Produto (dependente\detalhado). A estrutura de vinculação de dados do WPF permite a navegação entre objetos relacionados: a seleção de linhas na exibição mestre faz com que a exibição de detalhes seja atualizada com os dados filho correspondentes.

As capturas de tela e listagens de código neste passo a passo são retiradas do Visual Studio 2019 16.6.5.

Pre-Requisites

Você precisa ter o Visual Studio 2019 16.3 ou posterior instalado com a carga de trabalho da área de trabalho .NET selecionada para concluir este passo a passo. Para obter mais informações sobre como instalar a versão mais recente do Visual Studio, consulte Instalar o Visual Studio.

Criar o aplicativo

1. Abrir o Visual Studio
2. Na janela Iniciar, escolha Criar novo projeto.
3. Procure por "WPF", escolha WPF App (.NET) e, em seguida, escolha Next.
4. Na próxima tela, dê um nome ao projeto, por exemplo, GetStartedWPF e escolha Criar.

Instalar os pacotes NuGet do Entity Framework

1. Clique com o botão direito do mouse na solução e escolha Gerenciar pacotes NuGet para solução...

   

2. Digite entityframeworkcore.sqlite na caixa de pesquisa.

3. Selecione o pacote Microsoft.EntityFrameworkCore.Sqlite .

4. Verifique o projeto no painel direito e clique em Instalar

   

5. Repita as etapas para procurar entityframeworkcore.proxies e instalar Microsoft.EntityFrameworkCore.Proxies.

Definir um modelo

Neste passo a passo, você implementará um modelo usando "código primeiro". Isso significa que o EF Core criará as tabelas e o esquema do banco de dados com base nas classes C# que você definir.

Adicione uma nova classe. Dê-lhe o nome: Product.cs e preencha-o assim:

Product.cs

namespace GetStartedWPF
{
    public class Product
    {
        public int ProductId { get; set; }
        public string Name { get; set; }

        public int CategoryId { get; set; }
        public virtual Category Category { get; set; }
    }
}

Em seguida, adicione uma classe chamada Category.cs e preencha-a com o seguinte código:

Category.cs

using System.Collections.Generic;
using System.Collections.ObjectModel;

namespace GetStartedWPF
{
    public class Category
    {
        public int CategoryId { get; set; }
        public string Name { get; set; }

        public virtual ICollection<Product>
            Products
        { get; private set; } =
            new ObservableCollection<Product>();
    }
}

As propriedades Products na classe Category e Category na classe Product são propriedades de navegação. No Entity Framework, as propriedades de navegação fornecem uma maneira de navegar em uma relação entre dois tipos de entidade.

Além de definir entidades, você precisa definir uma classe que deriva de DbContext e expõe as propriedades DbSet<TEntity> . As propriedades DbSet<TEntity> permitem que o contexto saiba quais tipos você deseja incluir no modelo.

Uma instância do tipo derivado DbContext gerencia os objetos de entidade durante o tempo de execução, o que inclui o preenchimento de objetos com dados de um banco de dados, o controle de alterações e a persistência de dados no banco de dados.

Adicione uma nova ProductContext.cs classe ao projeto com a seguinte definição:

ProductContext.cs

using Microsoft.EntityFrameworkCore;

namespace GetStartedWPF
{
    public class ProductContext : DbContext
    {
        public DbSet<Product> Products { get; set; }
        public DbSet<Category> Categories { get; set; }

        protected override void OnConfiguring(
            DbContextOptionsBuilder optionsBuilder)
        {
            optionsBuilder.UseSqlite(
                "Data Source=products.db");
            optionsBuilder.UseLazyLoadingProxies();
        }
    }
}

• O DbSet informa ao EF Core quais entidades C# devem ser mapeadas para o banco de dados.
• Há várias maneiras de configurar o EF Core DbContext. Você pode ler sobre eles em: Configurando um DbContext.
• Este exemplo usa a opção de substituição OnConfiguring para especificar um ficheiro de dados Sqlite.
• A UseLazyLoadingProxies chamada instrui o EF Core a implementar o carregamento lento, para que as entidades filhas sejam carregadas automaticamente quando acedidas a partir do pai.

Pressione CTRL+SHIFT+B ou navegue até Build > Build Solution para compilar o projeto.

Carregamento preguiçoso

As propriedades Products na classe Category e Category na classe Product são propriedades de navegação. No Entity Framework Core, as propriedades de navegação fornecem uma maneira de navegar em uma relação entre dois tipos de entidade.

O EF Core oferece a opção de carregar entidades relacionadas do banco de dados automaticamente na primeira vez que você acessa a propriedade de navegação. Com esse tipo de carregamento (chamado de carregamento lento), esteja ciente de que, na primeira vez que você acessar cada propriedade de navegação, uma consulta separada será executada no banco de dados se o conteúdo ainda não estiver no contexto.

Ao usar tipos de entidade "Plain Old C# Object" (POCO), o EF Core obtém carregamento lento criando instâncias de tipos de proxy derivados durante o tempo de execução e, em seguida, substituindo propriedades virtuais em suas classes para adicionar o gancho de carregamento. Para obter carregamento lento de objetos relacionados, deve-se declarar as propriedades de navegação getter como públicas e virtuais (Overridable em Visual Basic), e a sua classe não deve ser selada (NotOverridable em Visual Basic). Ao usar o Database First, as propriedades de navegação são automaticamente tornadas virtuais para permitir o carregamento lento.

Vincular objeto a controles

Adicione as classes definidas no modelo como fontes de dados para este aplicativo WPF.

1. Clique duas vezes em MainWindow.xaml no Gerenciador de Soluções para abrir o formulário principal

2. Escolha a guia XAML para editar o XAML.

3. Imediatamente após a tag de abertura Window , adicione as seguintes fontes para se conectar às entidades do EF Core.

   <Window x:Class="GetStartedWPF.MainWindow"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           xmlns:local="clr-namespace:GetStartedWPF"
           mc:Ignorable="d"
           Title="MainWindow" Height="450" Width="800" Loaded="Window_Loaded">
       <Window.Resources>
           <CollectionViewSource x:Key="categoryViewSource"/>
           <CollectionViewSource x:Key="categoryProductsViewSource" 
                                 Source="{Binding Products, Source={StaticResource categoryViewSource}}"/>
       </Window.Resources>
   

4. Isso configura a fonte para as categorias "mãe" e a segunda fonte para os produtos "detalhe".

5. Em seguida, adicione a seguinte marcação ao seu XAML após a tag de abertura Grid .

   <DataGrid x:Name="categoryDataGrid" AutoGenerateColumns="False" 
             EnableRowVirtualization="True" 
             ItemsSource="{Binding Source={StaticResource categoryViewSource}}" 
             Margin="13,13,43,229" RowDetailsVisibilityMode="VisibleWhenSelected">
       <DataGrid.Columns>
           <DataGridTextColumn Binding="{Binding CategoryId}"
                               Header="Category Id" Width="SizeToHeader"
                               IsReadOnly="True"/>
           <DataGridTextColumn Binding="{Binding Name}" Header="Name" 
                               Width="*"/>
       </DataGrid.Columns>
   </DataGrid>
   

6. Observe que o CategoryId é definido como ReadOnly porque é atribuído pelo banco de dados e não pode ser alterado.

Adicionar uma grelha de detalhes

Agora que a grade existe para exibir categorias, a grade de detalhes pode ser adicionada para mostrar produtos. Adicione isso dentro do Grid elemento , após o elemento categories DataGrid .

MainWindow.xaml

<DataGrid x:Name="productsDataGrid" AutoGenerateColumns="False" 
          EnableRowVirtualization="True" 
          ItemsSource="{Binding Source={StaticResource categoryProductsViewSource}}" 
          Margin="13,205,43,108" RowDetailsVisibilityMode="VisibleWhenSelected" 
          RenderTransformOrigin="0.488,0.251">
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding CategoryId}" 
                            Header="Category Id" Width="SizeToHeader"
                            IsReadOnly="True"/>
        <DataGridTextColumn Binding="{Binding ProductId}" Header="Product Id" 
                            Width="SizeToHeader" IsReadOnly="True"/>
        <DataGridTextColumn Binding="{Binding Name}" Header="Name" Width="*"/>
    </DataGrid.Columns>
</DataGrid>

Por fim, adicione um botão Save e associe o evento de clique a Button_Click.

<Button Content="Save" HorizontalAlignment="Center" Margin="0,240,0,0" 
        Click="Button_Click" Height="20" Width="123"/>

A visualização do desenho ou modelo deve ter esta aparência:

Adicionar código que lida com interação de dados

É hora de adicionar alguns manipuladores de eventos à janela principal.

1. Na janela XAML, clique no <elemento Window> para selecionar a janela principal.

2. Na janela Propriedades , escolha Eventos no canto superior direito e clique duas vezes na caixa de texto à direita do rótulo Carregado .

   

Isso leva você ao código subjacente do formulário; agora vamos editar o código para usar o ProductContext para realizar o acesso aos dados. Atualize o código como mostrado abaixo.

O código declara uma instância de longa execução do ProductContext. O ProductContext objeto é usado para consultar e salvar dados no banco de dados. O método Dispose() na instância ProductContext é então chamado a partir do método sobreposto OnClosing. Os comentários de código explicam o que cada etapa faz.

MainWindow.xaml.cs

using Microsoft.EntityFrameworkCore;
using System.ComponentModel;
using System.Windows;
using System.Windows.Data;

namespace GetStartedWPF
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private readonly ProductContext _context =
            new ProductContext();

        private CollectionViewSource categoryViewSource;

        public MainWindow()
        {
            InitializeComponent();
            categoryViewSource =
                (CollectionViewSource)FindResource(nameof(categoryViewSource));
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            // this is for demo purposes only, to make it easier
            // to get up and running
            _context.Database.EnsureCreated();

            // load the entities into EF Core
            _context.Categories.Load();

            // bind to the source
            categoryViewSource.Source =
                _context.Categories.Local.ToObservableCollection();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            // all changes are automatically tracked, including
            // deletes!
            _context.SaveChanges();

            // this forces the grid to refresh to latest values
            categoryDataGrid.Items.Refresh();
            productsDataGrid.Items.Refresh();
        }

        protected override void OnClosing(CancelEventArgs e)
        {
            // clean up database connections
            _context.Dispose();
            base.OnClosing(e);
        }
    }
}

Testar o aplicativo WPF

Compile e execute o aplicativo pressionando F5 ou escolhendo Depurar > Iniciar Depuração. O banco de dados deve ser criado automaticamente com um arquivo chamado products.db. Introduza um nome de categoria e prima Enter e, em seguida, adicione produtos à grelha inferior. Clique em Salvar e assista à atualização da grade com as ids fornecidas pelo banco de dados. Realce uma linha e pressione Delete para remover a linha. A entidade será excluída quando você clicar em Salvar.

Notificação de alteração de propriedade

Este exemplo se baseia em quatro etapas para sincronizar as entidades com a interface do usuário.

1. A chamada _context.Categories.Load() inicial carrega os dados das categorias.
2. Os proxies de carregamento lento carregam os dados dos produtos dependentes.
3. O controle de alterações integrado do EF Core faz as modificações necessárias nas entidades, incluindo inserções e exclusões, quando _context.SaveChanges() é chamado.
4. As chamadas para DataGridView.Items.Refresh() forçam uma recarga com os IDs recém-gerados.

Isso funciona para nosso exemplo de introdução, mas você pode precisar de código adicional para outros cenários. Os controles WPF renderizam a interface lendo os campos e as propriedades nas suas entidades. Quando você edita um valor na interface do usuário (UI), esse valor é passado para sua entidade. Quando você altera o valor de uma propriedade diretamente em sua entidade, como carregá-la do banco de dados, o WPF não refletirá imediatamente as alterações na interface do usuário. O motor de renderização deve ser notificado das alterações. O projeto fez isso chamando Refresh()manualmente . Uma maneira fácil de automatizar essa notificação é implementando a interface INotifyPropertyChanged . Os componentes do WPF detetarão automaticamente a interface e se registrarão para eventos de alteração. A entidade é responsável por gerar esses eventos.

Próximas Etapas

Saiba mais sobre como configurar um DbContext.