WPF - Como vincular a um ListBox.ItemsSource em um UserControl

WPF - Como vincular itens a um UserControl

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

Obs: Para saber como criar um user control veja o artigo: WPF - Criando um UserControl

Vou mostrar como realizar 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;

Neste artigo eu vou mostrar 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 a seguir selecione o template User Control (WPF) e informe o nome macLista.xaml:

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

A seguir defina o seguinte código XAML para este user control que iremos criar:

No código acima, 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 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 eu tenha definido a propriedade de dependência MeuItemsSource no user control eu não a utilizei no exemplo. Para fazer isso eu 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:

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

Aguarde em breve mais artigos sobre o assunto.

Pegue o projeto completo aqui: UserControl_Binding.zip

"Passará o céu e a terra, mas as minhas palavras jamais passarão." (Mateus 24:35)

Referências:

José Carlos Macoratti

Apresentando o WPF - Windows Presentation Foundation - Macoratti.net