Como criar uma associação de dados

Este artigo descreve como criar um XAML de associação. O exemplo usa um objeto de dados que representa um funcionário de uma empresa. Esse objeto de dados está associado a uma janela XAML que usa TextBlock controles para listar os detalhes do funcionário. Você criará uma interface do usuário semelhante à seguinte imagem:

Para saber mais sobre a associação de dados, consulte Visão geral da associação de dados no WPF.

Criar um objeto de dados

Neste exemplo, um funcionário é usado como o objeto de dados ao qual a interface do usuário está associada.

1. Adicione uma nova classe ao seu projeto e nomeie-a Employee.

2. Substitua o código pelo seguinte snippet:

   using System;
   using System.ComponentModel;
   
   namespace ArticleSample
   {
       public class Employee : INotifyPropertyChanged
       {
           private decimal _salary;
           public event PropertyChangedEventHandler PropertyChanged;
   
           public string FirstName { get; set; }
           public string LastName { get; set; }
           public string Title { get; set; }
           public DateTime HireDate { get; set; }
   
           public decimal Salary
           {
               get => _salary;
               set
               {
                   _salary = value;
   
                   // Support TwoWay binding
                   PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Salary)));
               }
           }
       }
   }
   

   Imports System.ComponentModel
   
   Public Class Employee
       Implements INotifyPropertyChanged
   
       Private _salary As Decimal
       Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged
   
       Public Property FirstName As String
       Public Property LastName As String
       Public Property Title As String
       Public Property HireDate As DateTime
   
       Public Property Salary As Decimal
           Get
               Return _salary
           End Get
           Set(value As Decimal)
               _salary = value
               RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(NameOf(Salary)))
           End Set
       End Property
   
   End Class
   

O objeto de dados do funcionário é uma classe simples que descreve um funcionário:

• O nome e o sobrenome do funcionário.
• A data em que o funcionário foi contratado.
• O cargo da empresa do funcionário.
• Quanta renda o funcionário ganha.

Associar a um objeto de dados

O XAML a seguir demonstra o uso da Employee classe como um objeto de dados. A propriedade do DataContext elemento raiz está associada a um recurso estático declarado no XAML. Os controles individuais estão associados às propriedades do Employee.

1. Adicione uma nova janela ao projeto e nomeie-a EmployeeView

2. Substitua o XAML pelo seguinte snippet:

   Importante

   O trecho a seguir é obtido de um projeto C#. Se você estiver usando o Visual Basic, o deverá ser declarado x:Class sem o ArticleSample namespace. Você pode ver a aparência da versão do Visual Basic aqui.

   <Window x:Class="ArticleSample.EmployeeView"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:local="clr-namespace:ArticleSample"
           Title="" Height="250" Width="300">
       <Window.Resources>
           <local:Employee x:Key="EmployeeExample" FirstName="Niki" LastName="Demetriou"
                                                   HireDate="2022-02-16" Salary="5012.00"
                                                   Title="Content Artist" />
       </Window.Resources>
       <StackPanel DataContext="{StaticResource EmployeeExample}">
           <Label FontSize="32">Employee</Label>
           <Border BorderBrush="Gray" BorderThickness="2" />
           <Grid Grid.Row="1" Margin="5">
               <Grid.RowDefinitions>
                   <RowDefinition Height="Auto"/>
                   <RowDefinition Height="Auto"/>
                   <RowDefinition Height="Auto"/>
                   <RowDefinition Height="Auto"/>
                   <RowDefinition Height="Auto"/>
               </Grid.RowDefinitions>
               <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="Auto"/>
                   <ColumnDefinition Width="*"/>
               </Grid.ColumnDefinitions>
   
               <TextBlock Text="First Name:" Grid.Row="0" Margin="0,0,10,0" />
               <TextBlock Text="Last Name:" Grid.Row="1" />
               <TextBlock Text="Title:" Grid.Row="2" />
               <TextBlock Text="Hire Date:" Grid.Row="3" />
               <TextBlock Text="Salary" Grid.Row="4" />
   
               <TextBlock Text="{Binding FirstName}" Grid.Row="0" Grid.Column="1" />
               <TextBlock Text="{Binding LastName}" Grid.Row="1" Grid.Column="1" />
               <TextBlock Text="{Binding Title}" Grid.Row="2" Grid.Column="1" />
               <TextBlock Text="{Binding HireDate, StringFormat=d}" Grid.Row="3" Grid.Column="1" />
               <TextBlock Text="{Binding Salary, StringFormat=C0}" Grid.Row="4" Grid.Column="1" />
           </Grid>
           <Border BorderBrush="Gray" BorderThickness="2" />
           
           <StackPanel Margin="5,10" Orientation="Horizontal">
               <TextBlock Text="Change Salary:" Margin="0,0,10,0" />
               <TextBox Text="{Binding Salary, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, StringFormat=C0}" Width="100" />
           </StackPanel>
       </StackPanel>
   </Window>
   

O namespace do código não corresponderá ao namespace do seu projeto, a menos que você tenha criado um projeto chamado ArticleSample. Você pode copiar e colar o Window.Resources elemento raiz e (StackPanel) em sua MainWindow se tiver criado um novo projeto.

Para entender melhor como o XAML anterior está usando a associação de dados, considere os seguintes pontos:

• Um recurso XAML é usado para criar uma instância da Employee classe.

  Normalmente, o objeto de dados é passado ou associado à janela. Este exemplo codifica o funcionário para fins de demonstração.

  <Window.Resources>
      <local:Employee x:Key="EmployeeExample" FirstName="Niki" LastName="Demetriou"
                                              HireDate="2022-02-16" Salary="5012.00"
                                              Title="Content Artist" />
  </Window.Resources>
  

• O elemento raiz (StackPanel) tem seu contexto de dados definido para a instância codificada Employee .

  Os elementos filho herdam seus DataContext do pai, a menos que sejam definidos explicitamente.

  <StackPanel DataContext="{StaticResource EmployeeExample}">
  

• As propriedades da Employee instância estão associadas aos TextBlock controles.

  O Binding não especifica um BindingSource, então o DataContext é usado como a origem.

  <TextBlock Text="{Binding FirstName}" Grid.Row="0" Grid.Column="1" />
  <TextBlock Text="{Binding LastName}" Grid.Row="1" Grid.Column="1" />
  <TextBlock Text="{Binding Title}" Grid.Row="2" Grid.Column="1" />
  <TextBlock Text="{Binding HireDate, StringFormat=d}" Grid.Row="3" Grid.Column="1" />
  <TextBlock Text="{Binding Salary, StringFormat=C0}" Grid.Row="4" Grid.Column="1" />
  

• Um TextBox controle é associado TwoWay ao modo, permitindo que o TextBox altere a Employee.Salary propriedade.

  <TextBox Text="{Binding Salary, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, StringFormat=C0}" Width="100" />
  

Conteúdo relacionado

• Visão geral da vinculação de dados
• Como criar uma associação no código
• Tópicos explicativos