Compartilhar via


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 simples de carrinho de compras com DependencyProperty chamado ItemCount e associar a propriedade ItemCount à propriedade Text 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 o valor 0 como a contagem de item 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 do Documento, selecione o painel raiz Grid, que aparece 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.

    Select Object dialog box

  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.

    Create Data Binding dialog box

  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