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.
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)
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
