In this article we will see how to perform the binding controls within a UserControl to a WPF application.
And accomplish this task using:
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:
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.
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:
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:
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:
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:
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:
Change the code MainWindow.xaml XAML file as shown 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:
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
