Vinculação de dados em detalhes

APIs importantes

• Extensão de marcação {x:Bind}
• Classe de associação
• DataContext
• INotifyPropertyChanged

Observação

Este tópico descreve os recursos de associação de dados em detalhes. Para obter uma breve e prática introdução, confira a visão geral da associação de dados.

Este tópico é sobre a associação de dados para as APIs que residem no namespace Windows.UI.Xaml.Data.

A associação de dados é uma maneira de a interface do usuário do aplicativo exibir dados e, opcionalmente, manter-se sincronizada com esses dados. A associação de dados permite separar a preocupação dos dados da preocupação com a interface do usuário e isso resulta em um modelo conceitual mais simples, bem como melhor legibilidade, testabilidade e manutenção do seu aplicativo.

Você pode usar a associação de dados para simplesmente exibir valores de uma fonte de dados quando a interface do usuário for mostrada pela primeira vez, mas não responder a alterações nesses valores. Esse é um modo de associação chamado uma vez e funciona bem para um valor que não é alterado durante o tempo de execução. Como alternativa, você pode optar por "observar" os valores e atualizar a interface do usuário quando eles forem alterados. Esse modo é chamado de unidirecional e funciona bem para dados somente leitura. Por fim, você pode optar por observar e atualizar, para que as alterações feitas pelo usuário em valores na interface do usuário sejam automaticamente enviadas de volta para a fonte de dados. Esse modo é chamado de bidirecional e funciona bem para dados de leitura e gravação. Aqui estão alguns exemplos.

• Você pode usar o modo único para associar uma imagem à foto do usuário atual.
• Você pode usar o modo unidirecional para associar um ListView a uma coleção de artigos de notícias em tempo real agrupados por seção de jornal.
• Você pode usar o modo bidirecional para associar um TextBox ao nome de um cliente em um formulário.

Independentemente do modo, há dois tipos de associação e eles normalmente são declarados na marcação da interface do usuário. Você pode optar por usar a extensão de marcação {x:Bind} ou a extensão de marcação {Binding}. E você pode até mesmo usar uma mistura dos dois no mesmo aplicativo, mesmo no mesmo elemento de interface do usuário. {x:Bind} é novo para Windows 10 e tem melhor desempenho. Todos os detalhes descritos neste tópico se aplicam a ambos os tipos de associação, a menos que digamos explicitamente o contrário.

Aplicativos de exemplo que demonstram {x:Bind}

• Exemplo de {x:Bind}.
• QuizGame.
• Exemplo do XAML UI Basics.

Aplicativos de exemplo que demonstram {Binding}

• Baixe o aplicativo Bookstore1 .
• Baixe o aplicativo Bookstore2 .

Cada associação envolve essas partes

• Uma origem de associação. Essa é a fonte dos dados para a associação e pode ser uma instância de qualquer classe que tenha membros cujos valores você deseja exibir na interface do usuário.
• Um destino de associação. Essa é uma DependencyProperty do FrameworkElement em sua interface do usuário que exibe os dados.
• Um objeto de associação. Essa é a parte que transfere valores de dados da origem para o destino e, opcionalmente, do destino de volta para a origem. O objeto de associação é criado no tempo de carregamento XAML da extensão de marcação {x:Bind} ou {Binding} .

Nas seções a seguir, examinaremos mais de perto a origem da associação, o destino de associação e o objeto de associação. E vincularemos as seções com o exemplo de associar o conteúdo de um botão a uma propriedade de cadeia de caracteres chamada NextButtonText, que pertence a uma classe chamada HostViewModel.

Origem da associação

Aqui está uma implementação muito rudimentar de uma classe que poderíamos usar como uma fonte de associação.

Se você estiver usando C++/WinRT, adicione novos itens de Arquivo Midl (.idl) ao projeto, nomeados conforme mostrado na listagem de exemplo de código C++/WinRT abaixo. Substitua o conteúdo desses novos arquivos pelo código MIDL 3.0 mostrado na listagem, crie o projeto para gerar HostViewModel.h e .cppadicione código aos arquivos gerados para corresponder à listagem. Para obter mais informações sobre esses arquivos gerados e como copiá-los para seu projeto, consulte controles XAML; associar a uma propriedade C++/WinRT.

public class HostViewModel
{
    public HostViewModel()
    {
        this.NextButtonText = "Next";
    }

    public string NextButtonText { get; set; }
}

// HostViewModel.idl
namespace DataBindingInDepth
{
    runtimeclass HostViewModel
    {
        HostViewModel();
        String NextButtonText;
    }
}

// HostViewModel.h
// Implement the constructor like this, and add this field:
...
HostViewModel() : m_nextButtonText{ L"Next" } {}
...
private:
    std::wstring m_nextButtonText;
...

// HostViewModel.cpp
// Implement like this:
...
hstring HostViewModel::NextButtonText()
{
    return hstring{ m_nextButtonText };
}

void HostViewModel::NextButtonText(hstring const& value)
{
    m_nextButtonText = value;
}
...

Essa implementação de HostViewModel e sua propriedade NextButtonText só são apropriadas para associação única. Mas associações unidirecionais e bidirecionais são extremamente comuns e, nesses tipos de associação, a interface do usuário é atualizada automaticamente em resposta a alterações nos valores de dados da fonte de associação. Para que esses tipos de associação funcionem corretamente, você precisa tornar a origem da associação "observável" para o objeto de associação. Portanto, em nosso exemplo, se quisermos associar unidirecional ou bidirecional à propriedade NextButtonText , todas as alterações que ocorrem em tempo de execução para o valor dessa propriedade precisarão ser observáveis ao objeto de associação.

Uma maneira de fazer isso é derivar a classe que representa a fonte de associação de DependencyObject e expor um valor de dados por meio de um DependencyProperty. É assim que um FrameworkElement se torna observável. FrameworkElements são boas fontes de associação prontas para uso.

Uma maneira mais leve de tornar uma classe observável e necessária para classes que já têm uma classe base é implementar System.ComponentModel.INotifyPropertyChanged. Isso realmente envolve apenas a implementação de um único evento chamado PropertyChanged. Um exemplo usando HostViewModel está abaixo.

...
using System.ComponentModel;
using System.Runtime.CompilerServices;
...
public class HostViewModel : INotifyPropertyChanged
{
    private string nextButtonText;

    public event PropertyChangedEventHandler PropertyChanged = delegate { };

    public HostViewModel()
    {
        this.NextButtonText = "Next";
    }

    public string NextButtonText
    {
        get { return this.nextButtonText; }
        set
        {
            this.nextButtonText = value;
            this.OnPropertyChanged();
        }
    }

    public void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        // Raise the PropertyChanged event, passing the name of the property whose value has changed.
        this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

// HostViewModel.idl
namespace DataBindingInDepth
{
    runtimeclass HostViewModel : Windows.UI.Xaml.Data.INotifyPropertyChanged
    {
        HostViewModel();
        String NextButtonText;
    }
}

// HostViewModel.h
// Add this field:
...
    winrt::event_token PropertyChanged(Windows::UI::Xaml::Data::PropertyChangedEventHandler const& handler);
    void PropertyChanged(winrt::event_token const& token) noexcept;

private:
    winrt::event<Windows::UI::Xaml::Data::PropertyChangedEventHandler> m_propertyChanged;
...

// HostViewModel.cpp
// Implement like this:
...
void HostViewModel::NextButtonText(hstring const& value)
{
    if (m_nextButtonText != value)
    {
        m_nextButtonText = value;
        m_propertyChanged(*this, Windows::UI::Xaml::Data::PropertyChangedEventArgs{ L"NextButtonText" });
    }
}

winrt::event_token HostViewModel::PropertyChanged(Windows::UI::Xaml::Data::PropertyChangedEventHandler const& handler)
{
    return m_propertyChanged.add(handler);
}

void HostViewModel::PropertyChanged(winrt::event_token const& token) noexcept
{
    m_propertyChanged.remove(token);
}
...

Agora, a propriedade NextButtonText é observável. Quando você cria uma associação unidirecional ou bidirecional para essa propriedade (mostraremos como mais tarde), o objeto de associação resultante assina o evento PropertyChanged . Quando esse evento é acionado, o manipulador do objeto de associação recebe um argumento que contém o nome da propriedade que foi alterada. É assim que o objeto de associação sabe qual valor da propriedade deve ser lido novamente.

Para que você não precise implementar o padrão mostrado acima várias vezes, se estiver usando C#, poderá derivar apenas da classe base BindableBase que encontrará no exemplo QuizGame (na pasta "Comum"). Aqui está um exemplo de como isso parece.

public class HostViewModel : BindableBase
{
    private string nextButtonText;

    public HostViewModel()
    {
        this.NextButtonText = "Next";
    }

    public string NextButtonText
    {
        get { return this.nextButtonText; }
        set { this.SetProperty(ref this.nextButtonText, value); }
    }
}

// Your BindableBase base class should itself derive from Windows::UI::Xaml::DependencyObject. Then, in HostViewModel.idl, derive from BindableBase instead of implementing INotifyPropertyChanged.

Observação

Para C++/WinRT, qualquer classe de runtime que você declarar em seu aplicativo derivada de uma classe base é conhecida como uma classe composável . E há restrições em torno de classes composáveis. Para que um aplicativo passe nos testes do Kit de Certificação de Aplicativos do Windows usados pelo Visual Studio e pela Microsoft Store para validar envios (e, portanto, para que o aplicativo seja ingerido com êxito na Microsoft Store), uma classe composável deve, em última análise, derivar de uma classe base do Windows. O que significa que a classe na raiz da hierarquia de herança deve ser um tipo originário em um namespace do Windows.* . Se você precisar derivar uma classe de runtime de uma classe base, por exemplo, para implementar uma classe BindableBase para todos os seus modelos de exibição a serem derivados, você poderá derivar do Windows.UI.Xaml.DependencyObject.

Gerar o evento PropertyChanged com um argumento string.Empty ou null indica que todas as propriedades não indexador no objeto devem ser relançadas. Você pode gerar o evento para indicar que as propriedades do indexador no objeto foram alteradas usando um argumento de "Item[indexador]" para indexadores específicos (em que o indexador é o valor do índice) ou um valor de "Item[]" para todos os indexadores.

Uma fonte de associação pode ser tratada como um único objeto cujas propriedades contêm dados ou como uma coleção de objetos. No código C# e no Visual Basic, você pode associar uma vez a um objeto que implementa List(Of T) para exibir uma coleção que não é alterada em tempo de execução. Para uma coleção observável (observando quando os itens são adicionados e removidos da coleção), associação unidirecional a ObservableCollection(Of T). No código C++/CX, você pode associar ao Vector<T> para coleções observáveis e não observáveis, e C++/WinRT tem seus próprios tipos. Para associar às suas próprias classes de coleção, use as diretrizes na tabela a seguir.

Scenario	C# e VB (CLR)	C++/WinRT	C++/CX
Associar a um objeto.	Pode ser qualquer objeto.	Pode ser qualquer objeto.	O objeto deve ter BindableAttribute ou implementar ICustomPropertyProvider.
Obtenha notificações de alteração de propriedade de um objeto associado.	O objeto deve implementar INotifyPropertyChanged.	O objeto deve implementar INotifyPropertyChanged.	O objeto deve implementar INotifyPropertyChanged.
Associar a uma coleção.	List(Of T)	IVector de IInspectable ou IBindableObservableVector. Consulte controles de itens XAML; associe a uma coleção C++/WinRT e coleções com C++/WinRT.	Vetor<T>
Obtenha notificações de alteração de coleção de uma coleção associada.	ObservableCollection(Of T)	IObservableVector de IInspectable. Por exemplo, winrt::single_threaded_observable_vector<T>.	IObservableVector<T>. Vetor<T> implementa essa interface.
Implemente uma coleção que dê suporte à associação.	Estender Lista(De T) ou implementar IList, IList(Of Object), IEnumerable ou IEnumerable(Of Object). Não há suporte para associação a IList(Of T) genérico e IEnumerable(Of T ).	Implemente o IVector do IInspectable. Consulte controles de itens XAML; associe a uma coleção C++/WinRT e coleções com C++/WinRT.	Implemente IBindableVector, IBindableIterable, IVector<Object^>, IIterable<Object^>, IVector<IInspectable*>ou IIterable<IInspectable*>. Não há suporte para associação a IVector<T> genérico e T> IIterable<.
Implemente uma coleção que dê suporte a notificações de alteração de coleção.	Estenda ObservableCollection(Of T) ou implemente IList (não genérico) e INotifyCollectionChanged.	Implemente IObservableVector de IInspectable ou IBindableObservableVector.	Implemente IBindableVector e IBindableObservableVector.
Implemente uma coleção que dê suporte ao carregamento incremental.	Estenda ObservableCollection(Of T) ou implemente IList (não genérico) e INotifyCollectionChanged. Além disso, implemente ISupportIncrementalLoading.	Implemente IObservableVector de IInspectable ou IBindableObservableVector. Além disso, implemente ISupportIncrementalLoading	Implemente IBindableVector, IBindableObservableVector e ISupportIncrementalLoading.

Você pode associar controles de lista a fontes de dados arbitrariamente grandes e ainda obter alto desempenho usando o carregamento incremental. Por exemplo, você pode associar controles de lista aos resultados da consulta de imagem do Bing sem precisar carregar todos os resultados de uma só vez. Em vez disso, você carrega apenas alguns resultados imediatamente e carrega resultados adicionais conforme necessário. Para dar suporte ao carregamento incremental, você deve implementar ISupportIncrementalLoading em uma fonte de dados que dê suporte a notificações de alteração de coleção. Quando o mecanismo de associação de dados solicita mais dados, sua fonte de dados deve fazer as solicitações apropriadas, integrar os resultados e, em seguida, enviar as notificações apropriadas para atualizar a interface do usuário.

Destino de associação

Nos dois exemplos abaixo, a propriedade Button.Content é o destino de associação e seu valor é definido como uma extensão de marcação que declara o objeto de associação. Primeiro {x:Bind} é mostrado e, em seguida, {Binding}. Declarar associações na marcação é o caso comum (é conveniente, legível e toolable). Mas você pode evitar a marcação e criar uma instância da classe Binding de forma imperativa (programática), se necessário.

<Button Content="{x:Bind ...}" ... />

<Button Content="{Binding ...}" ... />

Se você estiver usando extensões de componente C++/WinRT ou Visual C++ (C++/CX), será necessário adicionar o atributo BindableAttribute a qualquer classe de runtime com a qual você deseja usar a extensão de marcação {Binding} .

Importante

Se você estiver usando C++/WinRT, o atributo BindableAttribute estará disponível se você tiver instalado o SDK do Windows versão 10.0.17763.0 (Windows 10, versão 1809) ou posterior. Sem esse atributo, você precisará implementar as interfaces ICustomPropertyProvider e ICustomProperty para poder usar a extensão de marcação {Binding} .

Objeto binding declarado usando {x:Bind}

Há uma etapa que precisamos fazer antes de criar nossa marcação {x:Bind }. Precisamos expor nossa classe de origem de associação da classe que representa nossa página de marcação. Fazemos isso adicionando uma propriedade (do tipo HostViewModel neste caso) à nossa classe de página MainPage .

namespace DataBindingInDepth
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            this.ViewModel = new HostViewModel();
        }
    
        public HostViewModel ViewModel { get; set; }
    }
}

// MainPage.idl
import "HostViewModel.idl";

namespace DataBindingInDepth
{
    runtimeclass MainPage : Windows.UI.Xaml.Controls.Page
    {
        MainPage();
        HostViewModel ViewModel{ get; };
    }
}

// MainPage.h
// Include a header, and add this field:
...
#include "HostViewModel.h"
...
    DataBindingInDepth::HostViewModel ViewModel();

private:
    DataBindingInDepth::HostViewModel m_viewModel{ nullptr };
...

// MainPage.cpp
// Implement like this:
...
MainPage::MainPage()
{
    InitializeComponent();

}

DataBindingInDepth::HostViewModel MainPage::ViewModel()
{
    return m_viewModel;
}
...

Feito isso, agora podemos dar uma olhada mais de perto na marcação que declara o objeto de associação. O exemplo a seguir usa o mesmo destino de associação Button.Content que usamos na seção "Destino de associação" anteriormente e mostra que ele está associado à propriedade HostViewModel.NextButtonText .

<!-- MainPage.xaml -->
<Page x:Class="DataBindingInDepth.Mainpage" ... >
    <Button Content="{x:Bind Path=ViewModel.NextButtonText, Mode=OneWay}" ... />
</Page>

Observe o valor que especificamos para o Caminho. Esse valor é interpretado no contexto da própria página e, nesse caso, o caminho começa referenciando a propriedade ViewModel que acabamos de adicionar à página MainPage . Essa propriedade retorna uma instância HostViewModel e, portanto, podemos fazer um ponto nesse objeto para acessar a propriedade HostViewModel.NextButtonText . E especificamos o Modo, para substituir o padrão {x:Bind} de uma vez.

A propriedade Path dá suporte a uma variedade de opções de sintaxe para associar a propriedades aninhadas, propriedades anexadas e indexadores inteiros e de cadeia de caracteres. Para obter mais informações, consulte Sintaxe de caminho de propriedade. A associação a indexadores de cadeia de caracteres fornece o efeito da associação a propriedades dinâmicas sem a necessidade de implementar ICustomPropertyProvider. Para outras configurações, consulte a extensão de marcação {x:Bind}.

Para ilustrar que a propriedade HostViewModel.NextButtonText é realmente observável, adicione um manipulador de eventos Click ao botão e atualize o valor de HostViewModel.NextButtonText. Crie, execute e clique no botão para ver o valor da atualização de conteúdo do botão.

// MainPage.xaml.cs
private void Button_Click(object sender, RoutedEventArgs e)
{
    this.ViewModel.NextButtonText = "Updated Next button text";
}

// MainPage.cpp
void MainPage::ClickHandler(IInspectable const&, RoutedEventArgs const&)
{
    ViewModel().NextButtonText(L"Updated Next button text");
}

Observação

As alterações em TextBox.Text são enviadas para uma fonte associada bidirecional quando o TextBox perde o foco, e não após cada pressionamento de tecla do usuário.

DataTemplate e x:DataType

Dentro de um DataTemplate (seja usado como um modelo de item, um modelo de conteúdo ou um modelo de cabeçalho), o valor de Path não é interpretado no contexto da página, mas no contexto do objeto de dados sendo modelo. Ao usar {x:Bind} em um modelo de dados, para que suas associações possam ser validadas (e o código eficiente gerado para eles) em tempo de compilação, o DataTemplate precisa declarar o tipo de seu objeto de dados usando x:DataType. O exemplo fornecido abaixo pode ser usado como ItemTemplate de um controle de itens associado a uma coleção de objetos SampleDataGroup .

<DataTemplate x:Key="SimpleItemTemplate" x:DataType="data:SampleDataGroup">
    <StackPanel Orientation="Vertical" Height="50">
      <TextBlock Text="{x:Bind Title}"/>
      <TextBlock Text="{x:Bind Description}"/>
    </StackPanel>
  </DataTemplate>

Objetos com tipo fraco em seu Caminho

Considere, por exemplo, que você tem um tipo chamado SampleDataGroup, que implementa uma propriedade de cadeia de caracteres chamada Title. E você tem uma propriedade MainPage.SampleDataGroupAsObject, que é do objeto type, mas que, na verdade, retorna uma instância de SampleDataGroup. A associação <TextBlock Text="{x:Bind SampleDataGroupAsObject.Title}"/> resultará em um erro de compilação porque a propriedade Title não foi encontrada no objeto type. O remédio para isso é adicionar uma conversão à sintaxe Path como esta: <TextBlock Text="{x:Bind ((data:SampleDataGroup)SampleDataGroupAsObject).Title}"/>. Aqui está outro exemplo em que o Elemento é declarado como objeto, mas na verdade é um TextBlock: <TextBlock Text="{x:Bind Element.Text}"/>. E uma conversão resolve a questão: <TextBlock Text="{x:Bind ((TextBlock)Element).Text}"/>.

Se seus dados forem carregados de forma assíncrona

O código para dar suporte a {x:Bind} é gerado em tempo de compilação nas classes parciais de suas páginas. Esses arquivos podem ser encontrados em sua obj pasta, com nomes como (para C#) <view name>.g.cs. O código gerado inclui um manipulador para o evento de carregamento da página e esse manipulador chama o método Initialize em uma classe gerada que representa as associações da sua página. Inicializar , por sua vez, chama Atualização para começar a mover dados entre a fonte de associação e o destino. O carregamento é gerado pouco antes da primeira passagem de medida da página ou do controle do usuário. Portanto, se os dados forem carregados de forma assíncrona, eles poderão não estar prontos quando Inicializar for chamado. Portanto, depois de carregar dados, você pode forçar as associações a serem inicializadas chamando this.Bindings.Update();. Se você precisar apenas de associações únicas para dados carregados de forma assíncrona, será muito mais barato inicializá-los dessa maneira do que ter associações unidirecionais e escutar alterações. Se os dados não passarem por alterações refinadas e se provavelmente forem atualizados como parte de uma ação específica, você poderá fazer suas associações uma vez e forçar uma atualização manual a qualquer momento com uma chamada para Atualizar.

Observação

{x:Bind} não é adequado para cenários de associação tardia, como navegar na estrutura de dicionário de um objeto JSON nem digitar pato. "Digitação de pato" é uma forma fraca de digitação baseada em correspondências léxicas em nomes de propriedades (como em, "se ele anda, nada e charlatões como um pato, então é um pato"). Com a digitação de pato, uma associação à propriedade Age seria igualmente satisfeita com uma Pessoa ou um objeto Wine (supondo que esses tipos cada um tinha uma propriedade Age ). Para esses cenários, use a extensão de marcação {Binding} .

Objeto binding declarado usando {Binding}

Se você estiver usando extensões de componente C++/WinRT ou Visual C++ (C++/CX), para usar a extensão de marcação {Binding} , será necessário adicionar o atributo BindableAttribute a qualquer classe de runtime à qual você deseja associar. Para usar {x:Bind}, você não precisa desse atributo.

// HostViewModel.idl
// Add this attribute:
[Windows.UI.Xaml.Data.Bindable]
runtimeclass HostViewModel : Windows.UI.Xaml.Data.INotifyPropertyChanged
...

Importante

Se você estiver usando C++/WinRT, o atributo BindableAttribute estará disponível se você tiver instalado o SDK do Windows versão 10.0.17763.0 (Windows 10, versão 1809) ou posterior. Sem esse atributo, você precisará implementar as interfaces ICustomPropertyProvider e ICustomProperty para poder usar a extensão de marcação {Binding} .

{Binding} pressupõe, por padrão, que você está associando ao DataContext da página de marcação. Portanto, definiremos o DataContext de nossa página como uma instância da nossa classe de origem de associação (do tipo HostViewModel neste caso). O exemplo a seguir mostra a marcação que declara o objeto de associação. Usamos o mesmo destino de associação Button.Content que usamos na seção "Destino de associação" anteriormente e associamos à propriedade HostViewModel.NextButtonText .

<Page xmlns:viewmodel="using:DataBindingInDepth" ... >
    <Page.DataContext>
        <viewmodel:HostViewModel x:Name="viewModelInDataContext"/>
    </Page.DataContext>
    ...
    <Button Content="{Binding Path=NextButtonText}" ... />
</Page>

// MainPage.xaml.cs
private void Button_Click(object sender, RoutedEventArgs e)
{
    this.viewModelInDataContext.NextButtonText = "Updated Next button text";
}

// MainPage.cpp
void MainPage::ClickHandler(IInspectable const&, RoutedEventArgs const&)
{
    viewModelInDataContext().NextButtonText(L"Updated Next button text");
}

Observe o valor que especificamos para o Caminho. Esse valor é interpretado no contexto do DataContext da página, que neste exemplo é definido como uma instância de HostViewModel. O caminho faz referência à propriedade HostViewModel.NextButtonText . Podemos omitir o Modo, pois o padrão {Binding} de unidirecional funciona aqui.

O valor padrão de DataContext para um elemento de interface do usuário é o valor herdado de seu pai. É claro que você pode substituir esse padrão definindo o DataContext explicitamente, que por sua vez é herdado por filhos por padrão. Definir o DataContext explicitamente em um elemento é útil quando você deseja ter várias associações que usam a mesma origem.

Um objeto de associação tem uma propriedade Source , que usa como padrão o DataContext do elemento de interface do usuário no qual a associação é declarada. Você pode substituir esse padrão definindo Origem, RelativeSource ou ElementName explicitamente na associação (consulte {Binding} para obter detalhes).

Dentro de um DataTemplate, o DataContext é automaticamente definido como o objeto de dados que está sendo modelo. O exemplo fornecido abaixo pode ser usado como ItemTemplate de um controle de itens associado a uma coleção de qualquer tipo que tenha propriedades de cadeia de caracteres denominadas Título e Descrição.

<DataTemplate x:Key="SimpleItemTemplate">
    <StackPanel Orientation="Vertical" Height="50">
      <TextBlock Text="{Binding Title}"/>
      <TextBlock Text="{Binding Description"/>
    </StackPanel>
  </DataTemplate>

Observação

Por padrão, as alterações em TextBox.Text são enviadas para uma fonte associada bidirecional quando o TextBox perde o foco. Para fazer com que as alterações sejam enviadas após cada pressionamento de tecla do usuário, defina UpdateSourceTrigger como PropertyChanged na associação na marcação. Você também pode assumir completamente o controle de quando as alterações são enviadas à origem definindo UpdateSourceTrigger como Explicit. Em seguida, você manipula eventos na caixa de texto (normalmente TextBox.TextChanged), chama GetBindingExpression no destino para obter um objeto BindingExpression e, por fim, chama BindingExpression.UpdateSource para atualizar programaticamente a fonte de dados.

A propriedade Path dá suporte a uma variedade de opções de sintaxe para associar a propriedades aninhadas, propriedades anexadas e indexadores inteiros e de cadeia de caracteres. Para obter mais informações, consulte Sintaxe de caminho de propriedade. A associação a indexadores de cadeia de caracteres fornece o efeito da associação a propriedades dinâmicas sem a necessidade de implementar ICustomPropertyProvider. A propriedade ElementName é útil para associação elemento a elemento. A propriedade RelativeSource tem vários usos, um dos quais é uma alternativa mais poderosa à associação de modelo dentro de um ControlTemplate. Para outras configurações, consulte a extensão de marcação {Binding} e a classe Binding .

E se a origem e o destino não forem do mesmo tipo?

Se você quiser controlar a visibilidade de um elemento de interface do usuário com base no valor de uma propriedade booliana ou se quiser renderizar um elemento de interface do usuário com uma cor que seja uma função do intervalo ou tendência de um valor numérico, ou se você quiser exibir um valor de data e/ou hora em uma propriedade de elemento de interface do usuário que espera uma cadeia de caracteres, em seguida, você precisará converter valores de um tipo para outro. Haverá casos em que a solução certa é expor outra propriedade do tipo certo da classe de origem de associação e manter a lógica de conversão encapsulada e testável lá. Mas isso não é flexível nem escalonável quando você tem grandes números ou grandes combinações de propriedades de origem e destino. Nesse caso, você tem algumas opções:

• Se estiver usando {x:Bind}, você poderá associar diretamente a uma função para fazer essa conversão
• Ou você pode especificar um conversor de valor que é um objeto projetado para executar a conversão

Conversores de valor

Aqui está um conversor de valor, adequado para uma associação unidirecional ou unidirecional, que converte um valor DateTime em um valor de cadeia de caracteres que contém o mês. A classe implementa IValueConverter.

public class DateToStringConverter : IValueConverter
{
    // Define the Convert method to convert a DateTime value to 
    // a month string.
    public object Convert(object value, Type targetType, 
        object parameter, string language)
    {
        // value is the data from the source object.
        DateTime thisdate = (DateTime)value;
        int monthnum = thisdate.Month;
        string month;
        switch (monthnum)
        {
            case 1:
                month = "January";
                break;
            case 2:
                month = "February";
                break;
            default:
                month = "Month not found";
                break;
        }
        // Return the value to pass to the target.
        return month;
    }

    // ConvertBack is not implemented for a OneWay binding.
    public object ConvertBack(object value, Type targetType, 
        object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

// See the "Formatting or converting data values for display" section in the "Data binding overview" topic.

E aqui está como você consome esse conversor de valor em sua marcação de objeto de associação.

<UserControl.Resources>
  <local:DateToStringConverter x:Key="Converter1"/>
</UserControl.Resources>
...
<TextBlock Grid.Column="0" 
  Text="{x:Bind ViewModel.Month, Converter={StaticResource Converter1}}"/>
<TextBlock Grid.Column="0" 
  Text="{Binding Month, Converter={StaticResource Converter1}}"/>

O mecanismo de associação chamará os métodos Convert e ConvertBack se o parâmetro Converter for definido para a associação. Quando os dados são passados da origem, o mecanismo de associação chama Converter e passa os dados retornados para o destino. Quando os dados são passados do destino (para uma associação bidirecional), o mecanismo de associação chama ConvertBack e passa os dados retornados para a origem.

O conversor também tem parâmetros opcionais: ConverterLanguage, que permite especificar o idioma a ser usado na conversão, e ConverterParameter, que permite passar um parâmetro para a lógica de conversão. Para obter um exemplo que usa um parâmetro de conversor, consulte IValueConverter.

Observação

Se houver um erro na conversão, não gere uma exceção. Em vez disso, retorne DependencyProperty.UnsetValue, que interromperá a transferência de dados.

Para exibir um valor padrão a ser usado sempre que a origem da associação não puder ser resolvida, defina a propriedade FallbackValue no objeto de associação na marcação. Isso é útil para lidar com erros de conversão e formatação. Também é útil associar a propriedades de origem que podem não existir em todos os objetos em uma coleção associada de tipos heterogêneos.

Se você associar um controle de texto a um valor que não seja uma cadeia de caracteres, o mecanismo de associação de dados converterá o valor em uma cadeia de caracteres. Se o valor for um tipo de referência, o mecanismo de associação de dados recuperará o valor da cadeia de caracteres chamando ICustomPropertyProvider.GetStringRepresentation ou IStringable.ToString , se disponível, e chamará Object.ToString. No entanto, observe que o mecanismo de associação ignorará qualquer implementação de ToString que oculte a implementação da classe base. Em vez disso, as implementações de subclasse devem substituir o método ToString da classe base. Da mesma forma, em idiomas nativos, todos os objetos gerenciados parecem implementar ICustomPropertyProvider e IStringable. No entanto, todas as chamadas para GetStringRepresentation e IStringable.ToString são roteadas para Object.ToString ou uma substituição desse método e nunca para uma nova implementação de ToString que oculta a implementação da classe base.

Observação

A partir do Windows 10, versão 1607, a estrutura XAML fornece um conversor interno booliano para Visibilidade. O conversor mapeia true para o valor de enumeração visível e false para Collapsed para que você possa associar uma propriedade Visibility a um booliano sem criar um conversor. Para usar o conversor interno, a versão mínima do SDK de destino do aplicativo deve ser 14393 ou posterior. Você não pode usá-lo quando seu aplicativo é direcionado a versões anteriores do Windows 10. Para obter mais informações sobre versões de destino, consulte o código adaptável de versão.

Associação de função em {x:Bind}

{x:Bind} permite que a etapa final em um caminho de associação seja uma função. Isso pode ser usado para executar conversões e executar associações que dependem de mais de uma propriedade. Ver Funções em x:Bind

Associação elemento a elemento

Você pode associar a propriedade de um elemento XAML à propriedade de outro elemento XAML. Aqui está um exemplo de como isso fica na marcação.

<TextBox x:Name="myTextBox" />
<TextBlock Text="{x:Bind myTextBox.Text, Mode=OneWay}" />

Importante

Para obter o fluxo de trabalho necessário para associação elemento a elemento usando C++/WinRT, consulte associação elemento a elemento.

Dicionários de recursos com {x:Bind}

A extensão de marcação {x:Bind} depende da geração de código, portanto, ela precisa de um arquivo code-behind contendo um construtor que chame InitializeComponent (para inicializar o código gerado). Você reutiliza o dicionário de recursos instanciando seu tipo (para que InitializeComponent seja chamado) em vez de referenciar seu nome de arquivo. Aqui está um exemplo do que fazer se você tiver um dicionário de recursos existente e quiser usar {x:Bind} nele.

TemplatesResourceDictionary.xaml

<ResourceDictionary
    x:Class="ExampleNamespace.TemplatesResourceDictionary"
    .....
    xmlns:examplenamespace="using:ExampleNamespace">
    
    <DataTemplate x:Key="EmployeeTemplate" x:DataType="examplenamespace:IEmployee">
        <Grid>
            <TextBlock Text="{x:Bind Name}"/>
        </Grid>
    </DataTemplate>
</ResourceDictionary>

TemplatesResourceDictionary.xaml.cs

using Windows.UI.Xaml.Data;
 
namespace ExampleNamespace
{
    public partial class TemplatesResourceDictionary
    {
        public TemplatesResourceDictionary()
        {
            InitializeComponent();
        }
    }
}

MainPage.xaml

<Page x:Class="ExampleNamespace.MainPage"
    ....
    xmlns:examplenamespace="using:ExampleNamespace">

    <Page.Resources>
        <ResourceDictionary>
            .... 
            <ResourceDictionary.MergedDictionaries>
                <examplenamespace:TemplatesResourceDictionary/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Page.Resources>
</Page>

Misturando {x:Bind} e {Binding} em um estilo reutilizável

Embora o exemplo anterior tenha mostrado o uso de {x:Bind} em DataTemplates, você também pode criar estilos reutilizáveis que combinam as extensões de marcação {x:Bind} e {Binding}. Isso é útil quando você deseja associar algumas propriedades a valores conhecidos em tempo de compilação usando {x:Bind} e outras propriedades para valores DataContext de runtime usando {Binding}.

Aqui está um exemplo que mostra como criar um estilo de Botão reutilizável que usa as duas abordagens de associação:

TemplatesResourceDictionary.xaml

<ResourceDictionary
    x:Class="ExampleNamespace.TemplatesResourceDictionary"
    .....
    xmlns:examplenamespace="using:ExampleNamespace">
    
    <!-- DataTemplate using x:Bind -->
    <DataTemplate x:Key="EmployeeTemplate" x:DataType="examplenamespace:IEmployee">
        <Grid>
            <TextBlock Text="{x:Bind Name}"/>
        </Grid>
    </DataTemplate>
    
    <!-- Style that mixes x:Bind and Binding -->
    <Style x:Key="CustomButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="{Binding ButtonBackgroundBrush}"/>
        <Setter Property="Foreground" Value="{Binding ButtonForegroundBrush}"/>
        <Setter Property="FontSize" Value="16"/>
        <Setter Property="Margin" Value="4"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border x:Name="RootBorder"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="4">
                        <StackPanel Orientation="Horizontal" 
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center">
                            <!-- x:Bind to a static property or page-level property -->
                            <Ellipse Width="8" Height="8" 
                                     Fill="{x:Bind DefaultIndicatorBrush}" 
                                     Margin="0,0,8,0"/>
                            <!-- Binding to DataContext -->
                            <ContentPresenter x:Name="ContentPresenter"
                                              Content="{TemplateBinding Content}"
                                              Foreground="{TemplateBinding Foreground}"
                                              FontSize="{TemplateBinding FontSize}"/>
                        </StackPanel>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="PointerOver">
                                    <VisualState.Setters>
                                        <!-- Binding to DataContext for hover color -->
                                        <Setter Target="RootBorder.Background" 
                                                Value="{Binding ButtonHoverBrush}"/>
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <VisualState.Setters>
                                        <!-- x:Bind to a compile-time known resource -->
                                        <Setter Target="RootBorder.Background" 
                                                Value="{x:Bind DefaultPressedBrush}"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

TemplatesResourceDictionary.xaml.cs

using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Media;
 
namespace ExampleNamespace
{
    public partial class TemplatesResourceDictionary
    {
        public TemplatesResourceDictionary()
        {
            InitializeComponent();
        }
        
        // Properties for x:Bind - these are compile-time bound
        public SolidColorBrush DefaultIndicatorBrush { get; } = 
            new SolidColorBrush(Colors.Green);
            
        public SolidColorBrush DefaultPressedBrush { get; } = 
            new SolidColorBrush(Colors.DarkGray);
    }
}

Uso em MainPage.xaml com um ViewModel que fornece valores de runtime:

<Page x:Class="ExampleNamespace.MainPage"
    ....
    xmlns:examplenamespace="using:ExampleNamespace">

    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <examplenamespace:TemplatesResourceDictionary/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Page.Resources>
    
    <Page.DataContext>
        <examplenamespace:ButtonThemeViewModel/>
    </Page.DataContext>

    <StackPanel Margin="20">
        <!-- This button uses the mixed binding style -->
        <Button Content="Save" Style="{StaticResource CustomButtonStyle}"/>
        <Button Content="Cancel" Style="{StaticResource CustomButtonStyle}"/>
    </StackPanel>
</Page>

ButtonThemeViewModel.cs (o DataContext que fornece valores de associação de runtime):

using System.ComponentModel;
using Windows.UI;
using Windows.UI.Xaml.Media;

namespace ExampleNamespace
{
    public class ButtonThemeViewModel : INotifyPropertyChanged
    {
        private SolidColorBrush _buttonBackgroundBrush = new SolidColorBrush(Colors.LightBlue);
        private SolidColorBrush _buttonForegroundBrush = new SolidColorBrush(Colors.DarkBlue);
        private SolidColorBrush _buttonHoverBrush = new SolidColorBrush(Colors.LightCyan);

        public SolidColorBrush ButtonBackgroundBrush
        {
            get => _buttonBackgroundBrush;
            set
            {
                _buttonBackgroundBrush = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ButtonBackgroundBrush)));
            }
        }

        public SolidColorBrush ButtonForegroundBrush
        {
            get => _buttonForegroundBrush;
            set
            {
                _buttonForegroundBrush = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ButtonForegroundBrush)));
            }
        }

        public SolidColorBrush ButtonHoverBrush
        {
            get => _buttonHoverBrush;
            set
            {
                _buttonHoverBrush = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ButtonHoverBrush)));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
    }
}

Neste exemplo:

• {Binding} é usado para propriedades que dependem do DataContext (ButtonBackgroundBrush, ButtonForegroundBrush, ButtonHoverBrush)
• {x:Bind} é usado para propriedades que são conhecidas em tempo de compilação e pertencem ao próprio ResourceDictionary (DefaultIndicatorBrush, DefaultPressedBrush)
• O estilo é reutilizável e pode ser aplicado a qualquer botão
• O tema de runtime é possível por meio do DataContext enquanto ainda se beneficia do desempenho de {x:Bind} para elementos estáticos

Associação de eventos e ICommand

{x:Bind} dá suporte a um recurso chamado associação de eventos. Com esse recurso, você pode especificar o manipulador para um evento usando uma associação, que é uma opção adicional sobre como lidar com eventos com um método no arquivo code-behind. Digamos que você tenha uma propriedade RootFrame em sua classe MainPage .

public sealed partial class MainPage : Page
{
    ...
    public Frame RootFrame { get { return Window.Current.Content as Frame; } }
}

Em seguida, você pode associar o evento Click de um botão a um método no objeto Frame retornado pela propriedade RootFrame como esta. Observe que também associamos a propriedade IsEnabled do botão a outro membro do mesmo Quadro.

<AppBarButton Icon="Forward" IsCompact="True"
IsEnabled="{x:Bind RootFrame.CanGoForward, Mode=OneWay}"
Click="{x:Bind RootFrame.GoForward}"/>

Métodos sobrecarregados não podem ser usados para lidar com um evento com essa técnica. Além disso, se o método que manipula o evento tiver parâmetros, todos eles deverão ser atribuíveis dos tipos de todos os parâmetros do evento, respectivamente. Nesse caso, Frame.GoForward não está sobrecarregado e não tem parâmetros (mas ainda seria válido mesmo se tivesse dois parâmetros de objeto ). Frame.GoBack está sobrecarregado, portanto, não podemos usar esse método com essa técnica.

A técnica de associação de eventos é semelhante a implementar e consumir comandos (um comando é uma propriedade que retorna um objeto que implementa a interface ICommand ). { x:Bind} e {Binding} funcionam com comandos. Para que você não precise implementar o padrão de comando várias vezes, use a classe auxiliar DelegateCommand que encontrará no exemplo quizGame (na pasta "Comum").

Associação a uma coleção de pastas ou arquivos

Você pode usar as APIs no namespace Windows.Storage para recuperar dados de pasta e arquivo. No entanto, os vários métodos GetFilesAsync, GetFoldersAsync e GetItemsAsync não retornam valores adequados para associação a controles de lista. Em vez disso, você deve associar aos valores retornados dos métodos GetVirtualizedFilesVector, GetVirtualizedFoldersVector e GetVirtualizedItemsVector da classe FileInformationFactory . O exemplo de código a seguir do exemplo StorageDataSource e GetVirtualizedFilesVector mostra o padrão de uso típico. Lembre-se de declarar a funcionalidade picturesLibrary no manifesto do pacote do aplicativo e confirmar se há imagens na pasta biblioteca Imagens.

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    var library = Windows.Storage.KnownFolders.PicturesLibrary;
    var queryOptions = new Windows.Storage.Search.QueryOptions();
    queryOptions.FolderDepth = Windows.Storage.Search.FolderDepth.Deep;
    queryOptions.IndexerOption = Windows.Storage.Search.IndexerOption.UseIndexerWhenAvailable;

    var fileQuery = library.CreateFileQueryWithOptions(queryOptions);

    var fif = new Windows.Storage.BulkAccess.FileInformationFactory(
        fileQuery,
        Windows.Storage.FileProperties.ThumbnailMode.PicturesView,
        190,
        Windows.Storage.FileProperties.ThumbnailOptions.UseCurrentScale,
        false
        );

    var dataSource = fif.GetVirtualizedFilesVector();
    this.PicturesListView.ItemsSource = dataSource;
}

Normalmente, você usará essa abordagem para criar uma exibição somente leitura de informações de arquivo e pasta. Você pode criar associações bidirecionais para as propriedades de arquivo e pasta, por exemplo, para permitir que os usuários classifiquem uma música em um modo de exibição de música. No entanto, as alterações não são mantidas até que você chame o método SavePropertiesAsync apropriado (por exemplo, MusicProperties.SavePropertiesAsync). Você deve confirmar alterações quando o item perde o foco porque isso dispara uma redefinição de seleção.

Observe que a associação bidirecional usando essa técnica funciona apenas com locais indexados, como Música. Você pode determinar se um local é indexado chamando o método FolderInformation.GetIndexedStateAsync .

Observe também que um vetor virtualizado pode retornar nulo para alguns itens antes de preencher seu valor. Por exemplo, você deve verificar se há nulo antes de usar o valor SelectedItem de um controle de lista associado a um vetor virtualizado ou usar SelectedIndex .

Associação a dados agrupados por uma chave

Se você pegar uma coleção simples de itens (livros, por exemplo, representados por uma classe BookSku ) e agrupar os itens usando uma propriedade comum como chave (a propriedade BookSku.AuthorName , por exemplo), o resultado será chamado de dados agrupados. Quando você agrupa dados, ele não é mais uma coleção simples. Dados agrupados são uma coleção de objetos de grupo, em que cada objeto de grupo tem

• uma chave e
• uma coleção de itens cuja propriedade corresponde a essa chave.

Para usar o exemplo de livros novamente, o resultado do agrupamento dos livros por nome de autor resulta em uma coleção de grupos de nomes de autor em que cada grupo tem

• uma chave, que é um nome de autor e
• uma coleção dos BookSkuscuja propriedade AuthorName corresponde à chave do grupo.

Em geral, para exibir uma coleção, você associará o ItemsSource de um controle de itens (como ListView ou GridView) diretamente a uma propriedade que retorna uma coleção. Se essa for uma coleção simples de itens, você não precisará fazer nada especial. Mas se for uma coleção de objetos de grupo (como é ao associar dados agrupados), você precisará dos serviços de um objeto intermediário chamado CollectionViewSource , que fica entre o controle de itens e a fonte de associação. Você associa o CollectionViewSource à propriedade que retorna dados agrupados e associa o controle de itens ao CollectionViewSource. Uma adição de valor extra de um CollectionViewSource é que ele mantém o controle do item atual, para que você possa manter mais de um controle de itens em sincronia associando todos eles ao mesmo CollectionViewSource. Você também pode acessar o item atual programaticamente por meio da propriedade ICollectionView.CurrentItem do objeto retornado pela propriedade CollectionViewSource.View .

Para ativar a instalação de agrupamento de um CollectionViewSource, defina IsSourceGrouped como true. Se você também precisa definir a propriedade ItemsPath depende exatamente de como você cria seus objetos de grupo. Há duas maneiras de criar um objeto de grupo: o padrão "is-a-group" e o padrão "has-a-group". No padrão "is-a-group", o objeto de grupo deriva de um tipo de coleção (por exemplo, Lista<T>), portanto, o objeto de grupo é, na verdade, o próprio grupo de itens. Com esse padrão, você não precisa definir ItemsPath. No padrão "has-a-group", o objeto de grupo tem uma ou mais propriedades de um tipo de coleção (como a Lista<T>), de modo que o grupo "tem um" grupo de itens na forma de uma propriedade (ou vários grupos de itens na forma de várias propriedades). Com esse padrão, você precisa definir ItemsPath como o nome da propriedade que contém o grupo de itens.

O exemplo a seguir ilustra o padrão "has-a-group". A classe de página tem uma propriedade chamada ViewModel, que retorna uma instância do nosso modelo de exibição. O CollectionViewSource associa-se à propriedade Authors do modelo de exibição (Authors é a coleção de objetos de grupo) e também especifica que é a propriedade Author.BookSkus que contém os itens agrupados. Por fim, o GridView está associado ao CollectionViewSource e tem seu estilo de grupo definido para que possa renderizar os itens em grupos.

<Page.Resources>
    <CollectionViewSource
    x:Name="AuthorHasACollectionOfBookSku"
    Source="{x:Bind ViewModel.Authors}"
    IsSourceGrouped="true"
    ItemsPath="BookSkus"/>
</Page.Resources>
...
<GridView
ItemsSource="{x:Bind AuthorHasACollectionOfBookSku}" ...>
    <GridView.GroupStyle>
        <GroupStyle
            HeaderTemplate="{StaticResource AuthorGroupHeaderTemplateWide}" ... />
    </GridView.GroupStyle>
</GridView>

Você pode implementar o padrão "is-a-group" de duas maneiras. Uma maneira é criar sua própria classe de grupo. Derivar a classe da Lista<T> (em que T é o tipo dos itens). Por exemplo, public class Author : List<BookSku>. A segunda maneira é usar uma expressão LINQ para criar dinamicamente objetos de grupo (e uma classe de grupo) de valores de propriedade semelhantes aos itens bookSku . Essa abordagem — manter apenas uma lista simples de itens e agrupá-los em tempo real — é típica de um aplicativo que acessa dados de um serviço de nuvem. Você obtém a flexibilidade de agrupar livros por autor ou por gênero (por exemplo) sem precisar de classes de grupo especiais, como Autor e Gênero.

O exemplo a seguir ilustra o padrão "is-a-group" usando LINQ. Desta vez, agrupamos livros por gênero, exibidos com o nome do gênero nos cabeçalhos do grupo. Isso é indicado pelo caminho da propriedade "Key" em referência ao valor chave do grupo.

using System.Linq;
...
private IOrderedEnumerable<IGrouping<string, BookSku>> genres;

public IOrderedEnumerable<IGrouping<string, BookSku>> Genres
{
    get
    {
        if (this.genres == null)
        {
            this.genres = from book in this.bookSkus
                          group book by book.genre into grp
                          orderby grp.Key
                          select grp;
        }
        return this.genres;
    }
}

Lembre-se de que, ao usar {x:Bind} com modelos de dados, precisamos indicar o tipo que está sendo associado definindo um valor x:DataType . Se o tipo for genérico, não poderemos expressar isso na marcação, portanto, precisamos usar {Binding} no modelo de cabeçalho de estilo de grupo.

    <Grid.Resources>
        <CollectionViewSource x:Name="GenreIsACollectionOfBookSku"
        Source="{x:Bind Genres}"
        IsSourceGrouped="true"/>
    </Grid.Resources>
    <GridView ItemsSource="{x:Bind GenreIsACollectionOfBookSku}">
        <GridView.ItemTemplate x:DataType="local:BookTemplate">
            <DataTemplate>
                <TextBlock Text="{x:Bind Title}"/>
            </DataTemplate>
        </GridView.ItemTemplate>
        <GridView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Key}"/>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
            </GroupStyle>
        </GridView.GroupStyle>
    </GridView>

Um controle SemanticZoom é uma ótima maneira de seus usuários exibirem e navegarem dados agrupados. O aplicativo de exemplo Bookstore2 ilustra como usar o SemanticZoom. Nesse aplicativo, você pode exibir uma lista de livros agrupados por autor (a exibição ampliada) ou pode ampliar para ver uma lista de autores de salto (a exibição ampliada). A lista de saltos oferece uma navegação muito mais rápida do que rolar pela lista de livros. As exibições ampliadas e ampliadas são, na verdade, controles ListView ou GridView associados ao mesmo CollectionViewSource.

Quando você associa a dados hierárquicos, como subcategorias dentro de categorias, pode optar por exibir os níveis hierárquicos em sua interface do usuário com uma série de controles de itens. Uma seleção em um controle de itens determina o conteúdo dos controles de itens subsequentes. Você pode manter as listas sincronizadas associando cada lista a seu próprio CollectionViewSource e associando as instâncias CollectionViewSource em uma cadeia. Isso é chamado de exibição mestre/detalhes (ou lista/detalhes). Para obter mais informações, consulte Como associar a dados hierárquicos e criar uma exibição mestre/detalhes.

Diagnosticar e depurar problemas de associação de dados

Sua marcação de associação contém os nomes das propriedades (e, para C#, às vezes campos e métodos). Portanto, ao renomear uma propriedade, você também precisará alterar qualquer associação que faça referência a ela. Esquecer de fazer isso leva a um exemplo típico de um bug de associação de dados e seu aplicativo não será compilado ou não será executado corretamente.

Os objetos de associação criados por {x:Bind} e {Binding} são em grande parte funcionalmente equivalentes. Mas {x:Bind} tem informações de tipo para a fonte de associação e gera o código-fonte em tempo de compilação. Com {x:Bind}, você obtém o mesmo tipo de detecção de problemas que obtém com o restante do código. Isso inclui a validação em tempo de compilação de suas expressões de associação e a depuração definindo pontos de interrupção no código-fonte gerados como a classe parcial para sua página. Essas classes podem ser encontradas nos arquivos em sua obj pasta, com nomes como (para C#) <view name>.g.cs). Se você tiver um problema com uma associação, ative Exceções Sem Tratamento de Interrupção no depurador do Microsoft Visual Studio. O depurador interromperá a execução nesse ponto e você poderá depurar o que deu errado. O código gerado por {x:Bind} segue o mesmo padrão para cada parte do grafo de nós de origem de associação e você pode usar as informações na janela Pilha de Chamadas para ajudar a determinar a sequência de chamadas que levaram ao problema.

{Binding} não tem informações de tipo para a origem da associação. Mas quando você executa seu aplicativo com o depurador anexado, todos os erros de associação aparecem na janela Saída no Visual Studio.

Criando associações no código

Nota Esta seção só se aplica a {Binding}, porque você não pode criar associações {x:Bind} no código. No entanto, alguns dos mesmos benefícios de {x:Bind} podem ser obtidos com DependencyObject.RegisterPropertyChangedCallback, que permite que você se registre para notificações de alteração em qualquer propriedade de dependência.

Você também pode conectar elementos de interface do usuário a dados usando código de procedimento em vez de XAML. Para fazer isso, crie um novo objeto Binding , defina as propriedades apropriadas e chame FrameworkElement.SetBinding ou BindingOperations.SetBinding. Criar associações programaticamente é útil quando você deseja escolher os valores de propriedade de associação em tempo de execução ou compartilhar uma única associação entre vários controles. No entanto, observe que você não pode alterar os valores de propriedade de associação depois de chamar SetBinding.

O exemplo a seguir mostra como implementar uma associação no código.

<TextBox x:Name="MyTextBox" Text="Text"/>

// Create an instance of the MyColors class 
// that implements INotifyPropertyChanged.
MyColors textcolor = new MyColors();

// Brush1 is set to be a SolidColorBrush with the value Red.
textcolor.Brush1 = new SolidColorBrush(Colors.Red);

// Set the DataContext of the TextBox MyTextBox.
MyTextBox.DataContext = textcolor;

// Create the binding and associate it with the text box.
Binding binding = new Binding() { Path = new PropertyPath("Brush1") };
MyTextBox.SetBinding(TextBox.ForegroundProperty, binding);

' Create an instance of the MyColors class 
' that implements INotifyPropertyChanged. 
Dim textcolor As New MyColors()

' Brush1 is set to be a SolidColorBrush with the value Red. 
textcolor.Brush1 = New SolidColorBrush(Colors.Red)

' Set the DataContext of the TextBox MyTextBox. 
MyTextBox.DataContext = textcolor

' Create the binding and associate it with the text box.
Dim binding As New Binding() With {.Path = New PropertyPath("Brush1")}
MyTextBox.SetBinding(TextBox.ForegroundProperty, binding)

Comparação de recursos {x:Bind} e {Binding}

Característica	{x:Bind} vs. {Binding}	Anotações
O caminho é a propriedade padrão	{x:Bind a.b.c} - {Binding a.b.c}
Propriedade Path	{x:Bind Path=a.b.c} - {Binding Path=a.b.c}	Em x:Bind, o caminho está enraizado na Página por padrão, não no DataContext.
Indexer	{x:Bind Groups[2].Title} - {Binding Groups[2].Title}	Associa-se ao item especificado na coleção. Há suporte apenas para índices baseados em inteiros.
Propriedades anexadas	{x:Bind Button22.(Grid.Row)} - {Binding Button22.(Grid.Row)}	As propriedades anexadas são especificadas usando parênteses. Se a propriedade não for declarada em um namespace XAML, prefixe-a com um namespace xml, que deve ser mapeado para um namespace de código à frente do documento.
Fundição	{x:Bind groups[0].(data:SampleDataGroup.Title)} - Não é necessário para {Binding}.	As conversões são especificadas usando parênteses. Se a propriedade não for declarada em um namespace XAML, prefixe-a com um namespace xml, que deve ser mapeado para um namespace de código à frente do documento.
Conversor	{x:Bind IsShown, Converter={StaticResource BoolToVisibility}} - {Binding IsShown, Converter={StaticResource BoolToVisibility}}	Os conversores devem ser declarados na raiz da Página/ResourceDictionary ou em App.xaml.
ConverterParameter, ConverterLanguage	{x:Bind IsShown, Converter={StaticResource BoolToVisibility}, ConverterParameter=One, ConverterLanguage=fr-fr} - {Binding IsShown, Converter={StaticResource BoolToVisibility}, ConverterParameter=One, ConverterLanguage=fr-fr}	Os conversores devem ser declarados na raiz da Página/ResourceDictionary ou em App.xaml.
TargetNullValue	{x:Bind Name, TargetNullValue=0} - {Binding Name, TargetNullValue=0}	Usado quando a folha da expressão de associação é nula. Use aspas simples para um valor de cadeia de caracteres.
FallbackValue	{x:Bind Name, FallbackValue='empty'} - {Binding Name, FallbackValue='empty'}	Usado quando qualquer parte do caminho da associação (exceto a folha) é nula.
ElementName	{x:Bind slider1.Value} - {Binding Value, ElementName=slider1}	Com {x:Bind} você está associando a um campo; O caminho está enraizado na Página por padrão, para que qualquer elemento nomeado possa ser acessado por meio de seu campo.
RelativeSource: Self	<Rectangle x:Name="rect1" Width="200" Height="{x:Bind rect1.Width}" ... /> - <Rectangle Width="200" Height="{Binding Width, RelativeSource={RelativeSource Self}}" ... />	Com {x:Bind}, nomeie o elemento e use seu nome no Caminho.
RelativeSource: TemplatedParent	Não é necessário para {x:Bind} - {Binding <path>, RelativeSource={RelativeSource TemplatedParent}}	Com {x:Bind} TargetType no ControlTemplate indica associação ao pai do modelo. Para a associação de modelo regular {Binding} pode ser usada em modelos de controle para a maioria dos usos. Mas use TemplatedParent em que você precisa usar um conversor ou uma associação bidirecional.<
Source	Não é necessário para {x:Bind} - <ListView ItemsSource="{Binding Orders, Source={StaticResource MyData}}"/>	Para {x:Bind}, você pode usar diretamente o elemento nomeado, usar uma propriedade ou um caminho estático.
Mode	{x:Bind Name, Mode=OneWay} - {Binding Name, Mode=TwoWay}	O modo pode ser OneTime, OneWay ou TwoWay. {x:Bind} usa como padrão o OneTime; {Binding} usa como padrão o OneWay.
UpdateSourceTrigger	{x:Bind Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged} - {Binding UpdateSourceTrigger=PropertyChanged}	UpdateSourceTrigger pode ser Default, LostFocus ou PropertyChanged. {x:Bind} não dá suporte a UpdateSourceTrigger=Explicit. {x:Bind} usa o comportamento PropertyChanged para todos os casos, exceto TextBox.Text, em que usa o comportamento LostFocus.