wpf-data-binding

WPF Data Binding

In this post we are going to describe and implement  WPF Data binding.

Data binding is a mechanism in WPF applications that provides a simple and easy way for Windows Runtime apps to display and interact with data. In this mechanism, the management of data is entirely separated from the way data.

Data binding allows the flow of data between UI elements and data object on user interface. When a binding is established and the data or your business model changes, then it reflects the updates automatically to the UI elements and vice versa. It is also possible to bind, not to a standard data source, but to another element on the page.

Data binding is of two types:

• One-way data binding
• Two-way data binding

One-Way Data Binding

In one-way binding, data is bound from its source (that is the object that holds the data) to its target (that is the object that displays the data)

• Let’s take a simple example to understand one-way data binding in detail. First of all, create a new WPF project with the name WPFDataBinding.
• The following XAML code creates two labels, two textboxes, and one button and initializes them with some properties.

Copy the following xaml code to your MainWindow.xaml file in your project:

<Window x:Class = "WPFDataBinding.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   xmlns:local = "clr-namespace:WPFDataBinding" 
   mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604"> 
	
   <Grid> 
	
      <Grid.RowDefinitions> 
         <RowDefinition Height = "Auto" /> 
         <RowDefinition Height = "Auto" /> 
         <RowDefinition Height = "*" /> 
      </Grid.RowDefinitions> 
		
      <Grid.ColumnDefinitions> 
         <ColumnDefinition Width = "Auto" /> 
         <ColumnDefinition Width = "200" /> 
      </Grid.ColumnDefinitions>
		
      <Label Name = "nameLabel" Margin = "2">_Name:</Label> 
		
      <TextBox Name = "nameText" Grid.Column = "1" Margin = "2" 
         Text = "{Binding Name, Mode = OneWay}"/>  
			
      <Label Name = "ageLabel" Margin = "2" Grid.Row = "1">_Age:</Label> 
		
      <TextBox Name = "ageText" Grid.Column = "1" Grid.Row = "1" Margin = "2" 
         Text = "{Binding Age, Mode = OneWay}"/>  
			
      <StackPanel Grid.Row = "2" Grid.ColumnSpan = "2"> 
         <Button Content = "_Show..." Click="Button_Click" /> 
      </StackPanel> 
		
   </Grid> 
</Window> 

Copy and past the following vb.net code to your MainWindow.xaml.vb in your project.

Imports System.Windows

Namespace WPFDataBinding
    Partial Public Class MainWindow
        Inherits Window

        Private person As Person = New Person With {
            .Name = "Salman",
            .Age = 26
        }

        Public Sub New()
            InitializeComponent()
            Me.DataContext = person
        End Sub

        Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
            Dim message As String = person.Name & " is " & person.Age
            MessageBox.Show(message)
        End Sub
    End Class

    Public Class Person
        Private nameValue As String

        Public Property Name As String
            Get
                Return nameValue
            End Get
            Set(ByVal value As String)
                nameValue = value
            End Set
        End Property

        Private ageValue As Double

        Public Property Age As Double
            Get
                Return ageValue
            End Get
            Set(ByVal value As Double)

                If value <> ageValue Then
                    ageValue = value
                End If
            End Set
        End Property
    End Class
End Namespace

Now run this application  (press to F5) and you can see immediately in our MainWindow that we have successfully bound to the Name and Age of that Person object.

Press the Show button, it will display the name and age on the message box:

Change the Name and Age in the dialog box: Name : James Age: 35 as bellow:

If you  click the Show button, it will again display the same message as shown in the following image:

Because data binding mode is set to one-way in the XAML code. To show the updated data, you will need to have two-way data binding.

Two-Way Data Binding

In two-way binding, the user can modify the data through the user interface and have that data updated in the source. If the source changes while the user is looking at the view, you want the view to be updated.

Let’s take the same example but here, we will change the binding mode from One Way to Two Way in the XAML code for Name and Age as shown in the following xaml code:

<TextBox Name = "nameText" Grid.Column = "1" Margin = "2" 
         Text = "{Binding Name, Mode = TwoWay}"/> 

TextBox Name = "ageText" Grid.Column = "1" Grid.Row = "1" Margin = "2" 
         Text = "{Binding Age, Mode = TwoWay}"/> 

Run the application after change again and  change the Name to James and Age values  to 35. Then press to Show button

then you can see the following:

As you see it is displayed the updated values in the message because of  binding was twoway.

Conclusion

In this post, I have explained WPF Data binding, which is of two types − one-way data binding and two-way data binding.

I have also implement the both type with vb.net.

The source code is in my Github

Next post describes WPF Browser Application

This post is part of “WPF step by step”

 

Back to home page