Passo a passo: associar dados no Designer XAML

No Designer XAML, você pode definir as propriedades de associação de dados usando o artboard e a janela Propriedades. O exemplo neste passo a passo mostra como associar dados a um controle. Especificamente, o procedimento mostra como criar uma classe simples de carrinho de compras com DependencyProperty chamado de ItemCount e associar a propriedade ItemCount à propriedade Text de um controle de TextBlock.

Para criar uma classe para usar como fonte de dados

1. No menu Arquivo, escolha Novo>Projeto.

2. Na caixa de diálogo Novo Projeto, escolha o nó Visual C# ou Visual Basic, expanda o nó Área de Trabalho do Windows e escolha o modelo Aplicação WPF.

3. Nomeie o projeto como BindingTest e escolha o botão OK.

4. Abra o arquivo MainWindow.xaml.cs (ou MainWindow.xaml.vb) e adicione o código a seguir. Em C#, adicione o código ao namespace BindingTest (antes do parêntese de fechamento no arquivo). No Visual Basic, adicione a nova classe.

   • C#
   • VB

   public class ShoppingCart : DependencyObject
   {
       public int ItemCount
       {
           get { return (int)GetValue(ItemCountProperty); }
           set { SetValue(ItemCountProperty, value); }
       }
   
       public static readonly DependencyProperty ItemCountProperty =
            DependencyProperty.Register("ItemCount", typeof(int),
            typeof(ShoppingCart), new PropertyMetadata(0));
   }
   

   Esse código define o valor 0 como a contagem de item padrão usando o objeto PropertyMetadata.

5. No menu Arquivo, escolha Compilar>Compilar Solução.

Para associar a propriedade ItemCount a um controle TextBlock

1. No Gerenciador de Soluções, abra o menu de atalho de MainWindow.xaml e escolha Designer de Exibição.

2. Na caixa de ferramentas, escolha um controle de Grade e adicione-o ao formulário.

3. Com Grid selecionado, na janela Propriedades, clique no botão Novo próximo a propriedade DataContext.

4. Na caixa de diálogo Selecionar Objeto, verifique se a opção Mostrar todos os assemblies está desmarcada e selecione ShoppingCart no namespace BindingTest; em seguida, clique em OK.

   A ilustração a seguir mostra a caixa de diálogo Selecionar Objeto com a opção ShoppingCart selecionada.

   

5. Na Caixa de ferramentas, escolha um controle de TextBlock e adicione-o ao formulário.

6. Com o controle TextBlock selecionado, na janela Propriedades, escolha o marcador de propriedade à direita da propriedade Texto e escolha Criar Vinculação de Dados. (O marcador de propriedade se assemelha a uma caixa pequena.)

7. Na caixa de diálogo Criar Vinculação de Dados, na caixa Caminho, escolha a propriedade ItemCount: (int32) e, em seguida, escolha o botão OK.

   A ilustração a seguir mostra a caixa de diálogo Criar Vinculação de Dados com a propriedade ItemCount selecionada.

   

8. Pressione F5 para executar o aplicativo.

   O controle TextBlock deve mostrar o valor padrão de 0 como texto.

Conteúdo relacionado

• Criar uma interface do usuário usando o Designer XAML
• Caixa de diálogo Adicionar Conversor de Valor