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 em uma empresa. Esse objeto de dados está associado a uma janela XAML que usa controles TextBlock 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 a 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 required string FirstName { get; set; }
           public required string LastName { get; set; }
           public required string Title { get; set; }
           public required DateTime HireDate { get; set; }
   
           public required 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 título da empresa do funcionário.
• Quanto de 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 são associados às propriedades do Employee.

1. Adicionar uma nova janela ao projeto e nomeá-la EmployeeView

2. Substitua o XAML pelo seguinte snippet:

   Importante

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

   <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 projeto, a menos que você tenha criado um projeto chamado ArticleSample. Você pode copiar e colar o Window.Resources e o elemento raiz (StackPanel) na 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 como a instância codificada Employee .

  Os elementos filhos herdam seu DataContext do pai, a menos que sejam definidos explicitamente.

  <StackPanel DataContext="{StaticResource EmployeeExample}">
  

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

  O Binding não especifica um BindingSource, portanto, 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 está associado com o TwoWay 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 do Data Binding