Neste artigo veremos como realizar a vinculação a controles no interior de um UserControl em uma aplicação WPF.

E realizaremos esta tarefa usando:

• A propriedade DataContext do user control.

Revisando conceitos

Um UserControl é um controle criado a partir dos controles já existentes, agregando esses controles em um controle único com o objetivo de otimizar o seu código. Ele é indicado quando você percebe que existe uma repetição em uma estrutura da qual participam controles de forma que se você criar um controle composto, com esses controles a manipulação dos dados será facilitada.

Obs: Não confunda um User Control com um Custom Control da WPF. Um Custom Control é um controle derivado de outro controle e é usado quando você cria um controle a partir de outro existente, para incluir uma funcionalidade que o controle existente não possui.

Depois que o user control estiver criado para usá-lo basta fazer o seguinte:

• Incluir uma referência ao namespace do user control;(e assembly se o user control não estiver no mesmo assembly);
• Incluir o controle XAML na janela onde desejamos usá-lo.

Veremos como realizar a vinculação de dados a um controle ListBox usado em um UserControl.

Criando a aplicação WPF

Abra o Visual Basic 2010 Express Edition e crie uma nova aplicação do tipo WPF Application com o nome UserControl_Binding.

No menu Project, clique em Add New Item e selecione o template User Control (WPF), depois informe o nome macLista.xaml.

Observe que existe o modelo Custom Control (WPF) que é diferente de User Control (WPF).

Em seguida, defina o seguinte código XAML para este user control que iremos criar:

<UserControl x:Class="macListBox"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     Name="macUserControl"
     Height="300" Width="500">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="10"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <ListBox ItemsSource="{Binding Path=.}"  Grid.Column="0"/>
        <ListBox x:Name="macListBox"
                  ItemsSource="{Binding ElementName=meuUserControl,
                  Path=MeuItemsSource}"
                  Grid.Column="2"/>
    </Grid>
</UserControl>

Definimos um user control com dois ListBox onde o primeiro Listbox possui a propriedade ItemsSource vinculada ao DataContext atual. A especificação Path=. é usada para vincular com a fonte de atual. Especificar o Path =. não é obrigatório, pode ser escrito também assim: ItemsSource = “{Binding}”.

A segunda Listbox recebe ItemsSource da propriedade de dependência MeuItemsSource. Desde que ItemsSource está vinculado à propriedade deste user control, deve ser especificado o elemento cuja propriedade esta vinculada ao listbox, então desta forma temos: ElementName = meuUserControl.

O leiaute do controle exibe dois controles ListBox e pode ser visto a seguir: (Abaixo temos o código XAML).

Vinculando itens ao UserControl em nossa aplicação

Vamos agora usar o UserControl macListBox que criamos em nossa aplicação.

Abra o arquivo MainWindow.xaml e no código XAML vamos incluir as seguintes declarações:

    xmlns:local="clr-namespace:UserControl_Binding"
    <local:macListBox></local:macListBox>

Conforme mostra a figura abaixo, vemos o resultado da inclusão das duas linhas de código XAML acima:

Vamos agora definir no arquivo MainWindow.xaml o código para usar o user control e realizar a vinculação de itens no controle Listbox.

Altere o código XAML do arquivo MainWindow.xaml conforme figura abaixo:

Agora, tudo que temos que fazer e definir a fonte de dados no arquivo MainWindow.xaml.vb conforme o código abaixo:

Imports System.Collections
Imports System.Windows
Public Class MainWindow

    Private _testaLista As List(Of String)

    Public ReadOnly Property TestaLista() As List(Of String)
        Get
            If _testaLista Is Nothing Then
                iniciaLista()
            End If
            Return _testaLista
        End Get
    End Property

    Private Sub iniciaLista()
        _testaLista = New List(Of String)()
        _testaLista.Add("Jose Carlos Macoratti")
        _testaLista.Add("Ana Maria Fonseca. ")
        _testaLista.Add("Miriam Estela Ribeiro. ")
        _testaLista.Add("Jeferson Andre Dias ")
        _testaLista.Add("Janice Rachel Soares.")
        _testaLista.Add("Mario Santos")
        _testaLista.Add("Jessica Lang Lima Bueno")
    End Sub

End Class

Quando executamos o projeto acontece o seguinte:

• O primeiro controle do usuário na primeira TabItem liga-se ao DataContext de TestaLista da janela.
• Depois a primeira listbox no controle do usuário vincula-se ao DataContext que vai mostrar o conteúdo de TestaLista.

O resultado é mostrado a seguir:

Embora tenha definido a propriedade de dependência MeuItemsSource no user control, não a utilizei no exemplo. Para fazer isso teria que definir o código no user control para a propriedade de dependência conforme abaixo:

Imports System.Collections
Imports System.Windows
Imports System.Windows.Controls

Partial Public Class macLista
    Inherits UserControl

    Public Shared ReadOnly MeuItemsSourceProperty As DependencyProperty

    Shared Sub New()
        macLista.MeuItemsSourceProperty = DependencyProperty.Register("MeuItemsSource", GetType(IEnumerable), GetType(macLista))
    End Sub

    Public Property MeuItemsSource() As IEnumerable
        Get
            Return DirectCast(GetValue(macLista.MeuItemsSourceProperty), IEnumerable)
        End Get
        Set(ByVal value As IEnumerable)
            SetValue(macLista.MeuItemsSourceProperty, value)
        End Set
    End Property
    Sub New()
    End Sub
End Class

Depois bastava definir no arquivo MainWindow.xaml mais uma TabItem definida assim:

<TabItem Header="VInculando com Dependency Property">
<local:macListBox MeuItemsSource="{Binding TestaLista}"/>
</TabItem>

Desta forma mostramos como realizar a vinculação em controles criados pelo usuário.

Pegue o projeto completo aqui: UserControl_Binding.zip

Até breve!