Como 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 tópico mostra como associar dados a um controle. Especificamente, o procedimento mostra como criar uma classe de carrinho de compras simples que tenha uma DependencyProperty nomeada ItemCount e depois como associar a propriedade ItemCount à propriedade Texto de um controle TextBlock.

Para criar uma classe para usar como fonte de dados

1. Crie um projeto em C# ou Visual Basic no modelo Aplicativo em Branco.

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

   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));
   }
   

   Public Class ShoppingCart
       Inherits DependencyObject
   
       Public Shared ReadOnly ItemCountProperty As DependencyProperty = DependencyProperty.Register(
           "ItemCount", GetType(Integer), GetType(ShoppingCart), New PropertyMetadata(0))
       Public Property ItemCount As Integer
           Get
               ItemCount = CType(GetValue(ItemCountProperty), Integer)
           End Get
           Set(value As Integer)
               SetValue(ItemCountProperty, value)
           End Set
       End Property
   End Class
   

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

   Dica

   No Visual Studio, você pode adicionar código de stub de uma propriedade de dependência digitando propdp dentro da classe ShoppingCart e depois pressionar a tecla TAB.

3. Clique em Compilar > Compilar Solução.

Para associar a propriedade ItemCount a um controle TextBlock

1. Clique com o botão direito do mouse em MainPage.xaml e clique em Exibir Designer.

2. Na janela Estrutura de Tópicos de Documento, selecione o painel raiz Grade, exibido como [Grid] na janela.

3. Com Grid selecionado, clique no botão Novo ao lado da propriedade DataContext na janela Propriedades.

4. Na caixa de diálogo Selecionar Objeto, verifique se a opção Mostrar todos os assemblies está desmarcada e selecione ShoppingCart no namespace projectName; 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, clique duas vezes no controle TextBlock e adicione-o ao artboard.

6. Com o controle TextBlock selecionado, clique no marcador de propriedade à direita da propriedade Texto em Comum na janela Propriedades. (O marcador de propriedade se assemelha a uma caixa pequena.)

7. Clique em Criar Vinculação de Dados no menu resultante.

8. Com um tipo de associação de Contexto de dados, que é o valor padrão na lista Tipo de vinculação, selecione a propriedade ItemCount na caixa Caminho e clique em OK.

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

   

9. Pressione F5 para iniciar o aplicativo.

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

Consulte também

Referência

Caixa de diálogo Adicionar Conversor de Valor

Conceitos

Criando uma interface de usuário usando o Designer XAML