How to link items to a UserControl - WPF

In this article we will see how to perform the binding controls within a UserControl to a WPF application.

And accomplish this task using:

• The DataContext property of the user control.

Reviewing concepts

A UserControl is a control created from existing controls, adding these controls into a single control in order to optimize your code. It is indicated when you realize that there is a loop in the structure of which involved controls so that if you create a composite control, these controls with the data manipulation is facilitated.

Note: Do not confuse a User Control with a Custom Control in WPF. A Custom Control is a control derived from other control and is used when you create a control from the existing one to include a feature that has no existing control.

After the user control is created to use it just do the following:

• Include a reference to the namespace of the user control, (and if the user control assembly is not in the same assembly);
• Include the XAML control in the window where we want to use it.

We will see how to perform data binding to a ListBox control used on a UserControl.

Creating a WPF application

Open Visual Basic 2010 Express Edition and create a new application type WPF Application with the name UserControl_Binding.

On the Project menu, click Add New Item and select the template User Control (WPF), then enter the name macLista.xaml.

Note that the model exists Custom Control (WPF) which is different from User Control (WPF).

Then set the following XAML code for this user control that we create:

Download code now (notepad 4kb)

We define a user control with two first ListBox where the Listbox has the property ItemsSource linked to the current DataContext. Specifying Path =. is used to link to the source of current. Specify the Path =. is not required, can also be written like this: ItemsSource = "{Binding}".

The second ListBox gets ItemsSource MeuItemsSource dependency property. ItemsSource Since this property is linked to user control, you must specify the element whose property is linked to the listbox, then we have this way: ElementName = meuUserControl.

The layout of the ListBox control displays two and can be seen below: (Below is the XAML code).

Linking items to the UserControl in our application

Let us now use the UserControl macListBox we create in our application.

Open the file and the XAML code MainWindow.xaml will include the following statements:

Download your code now (notepad 1kb)

As shown below, we see the result of the inclusion of two lines of XAML code above:

Let us now define the file MainWindow.xaml code to use the user control and perform linking of items in the ListBox control.

Change the code MainWindow.xaml XAML file as shown below:

 Now all we have to do and set the data source file MainWindow.xaml.vb as the code below:

Imports System.Collections 
  Imports System.Windows 
  Public Class MainWindow 

  Private _testaLista The List (Of String) 

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

  Private Sub start () 
  _testaLista = New List (Of String) () 
  _testaLista.Add ("Jose Carlos Macoratti") 
  _testaLista.Add ("Ana Maria Fonseca.") 
  _testaLista.Add ("Miriam Estela Ribeiro.") 
  _testaLista.Add ("Jefferson-Day Andre") 
  _testaLista.Add ("Janice Rachel Smith.") 
  _testaLista.Add ("Mario Santos") 
  _testaLista.Add ("Jessica Lang Lima Bueno") 
  End Sub 

  End Class 

When we run the project the following happens:

The first user control in the first TabItem binds to TestaLista DataContext of the window.

After the first listbox in the user control is linked to the DataContext that will show the contents of TestaLista.

The result is shown below:

Although the dependency property defined in MeuItemsSource user control, not used in the example. To do so would have to set the user in control for the dependency property as follows:

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

  Partial Public Class macLista 
  Inherits UserControl 

  Public Shared ReadOnly MeuItemsSourceProperty The 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 

Then just set the file MainWindow.xaml another TabItem defined as follows:

Download your code now (notepad 132bytes)

Thus we show how to perform the binding in controls created by the user.
Get the complete project here: UserControl_Binding.zip