[Resolvido] WPF - Como vincular itens a um UserControl

[RSS iMasters 5]

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 ClassQuando 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 ClassDepois 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!

 

 

 

http://imasters.com.br/artigo/21458/dotnet/wpf-como-vincular-itens-a-um-usercontrol