Data Binding in WPF with Example

Introduction:

In this article i will explain

• What is data binding in wpf, 
• What are the key components of binding, 
• How to bind an element as data source, 
• How to bind a Property as Source, 
• Binding an object as DataContext,
• Different Binding Modes in WPF etc.

Download SourceCode And Video Explaining Binding in WPF 

Description:

In the previous article i explained what is wpf and wpf basics, wpf architecture, Windows Forms Vs WPF, what is xaml and xaml file compilation process, Baisc Drawings and Shapes in wpf etc.

Data Binding in WPF:

       One of the WPF Powerful feature is it's Data Binding Concept. It is the process establishing connection between Application User Interface and Business Logic.  It requires a Binding Source and Target .

Establishing Binding in WPF

           Source provides the data, and Target displays the data. Data Binding Connects UI to Data. When Source Data values changed then UI is updated. This Updation depends upon the Different types of Data Binding Modes. These Data Binding Decreases the code when compare to general binding. It also enables Template Binding means we customize the data more precisely by specifying which property to bind to which control.

    So a Binding Consists of 4 major Components:

• Source
• Source Path
• Target Depenedency Object.
• Target Dependency Property.

   Here Target can be any Element or any accessible property that is derived from Dependency Object for example TextBox controls Text Property is an Dependency Property. If you see the object hierarchy in wpf almost all controls are derived from Dependency Object. When coming to Source, it can be any public property, CLR object, Ado.Net DataSet, XMLDataProvider, ObjectDataProvider etc.

Binding a TextBox Text Property to a TextBlock Text Property

 If you see the above image it gives you clear picture about data binding in wpf. Here Source is a TextBox, Text property of this textbox is bind to TextBlock Text Property. You can see the Code and  output below.

Element as Binding Source Example:

<grid> <textbox Height="23" HorizontalAlignment="Left" Margin="84,49,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" /> <textblock Height="61" HorizontalAlignment="Left" Margin="82,78,0,0" Name="textBlock1" Text="{Binding ElementName=textBox1, Path=Text}" VerticalAlignment="Top" Width="195" /> </Grid>

Output is

WPF Simple binding

In the above example if you type any text in textbox then immeadiatly it is displayed in TextBlock. Upto now we saw How to bind an element to another element, Now Let's see how to bind properties to XAML elements.

   Now add a class to your project and name that as MobileShop which consists of three properties ShopOwner, Shop Number, and Address as below

class MobileShop { public string ShopOwner { get; set; } public string ShopNumber { get; set; } public string Address { get; set; } }
Now add a new window to your project and drag three textboxes ,three labels for displaying above three properties. XAML code looks like below.

<grid> <label Content="Shop Owner : " Height="28" HorizontalAlignment="Left" Margin="12,51,0,0" Name="label1" VerticalAlignment="Top" Width="87" /> <label Content="Mobile Shop" Height="38" HorizontalAlignment="Left" Margin="68,0,0,0" Name="label2" VerticalAlignment="Top" Width="130" FontSize="20" FontWeight="Bold" /> <label Content="Shop Number : " Height="28" HorizontalAlignment="Left" Margin="12,85,0,0" Name="label3" VerticalAlignment="Top" Width="96" /> <label Content="Shop Address:" Height="28" HorizontalAlignment="Left" Margin="12,119,0,0" Name="label4" VerticalAlignment="Top" Width="88" /> // Binding ShopOwner Property <textbox Height="23" Text="{Binding Path=ShopOwner}" HorizontalAlignment="Left" Margin="118,56,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" /> // Binding ShopNumber Property <textbox Height="23" Text="{Binding Path=ShopNumber}" HorizontalAlignment="Left" Margin="118,87,0,0" Name="textBox2" VerticalAlignment="Top" Width="120" /> // Binding Address Property <textbox Height="23" Text="{Binding Path=Address}" HorizontalAlignment="Left" Margin="118,119,0,0" Name="textBox3" VerticalAlignment="Top" Width="120" /> </Grid>

Now in the Constructor of the Window write below code

public partial class Window1 : Window { public Window1() { InitializeComponent(); // Creating an instance of MobileShop MobileShop ObjShop = new MobileShop(); // Assigning values to properties ObjShop.ShopOwner = "Sekhar Babu"; ObjShop.ShopNumber = "290"; ObjShop.Address = "Hyderabad"; this.DataContext = ObjShop; } }

As you may see that we have created an instance of class MobileShop and assigned the data for properties.
After that we assigned the object to DataContext Property of the Window. Here DataContext will hold the Data. This property exist for almost all controls that derived from Dependency Object i.e Panel Controls like Grid, Canvas, StackPanel, Wrappanel, Content Controls like Label, Button  etc. If we set our object as DataContext to a higher level control then all child controls can inherit that object. Read More About DataContext in WPF.

      So now in our present example we set object as DataContext for window parent control  so all the child controls have default data source, so we don't need to set Source we just need to mention the Path to which it binds. So in our example we only mentioned Path as below.

<textbox Height="23" Text="{Binding Path=ShopOwner}" HorizontalAlignment="Left" Margin="118,56,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" /> <textbox Height="23" Text="{Binding Path=ShopNumber}" HorizontalAlignment="Left" Margin="118,87,0,0" Name="textBox2" VerticalAlignment="Top" Width="120" /> <textbox Height="23" Text="{Binding Path=Address}" HorizontalAlignment="Left" Margin="118,119,0,0" Name="textBox3" VerticalAlignment="Top" Width="120" />

The same example can also be done without writing single peace of line code in code behind file, by writing only XAML code as below

<window x:Class="WpfApplication1.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:WpfApplication1" Title="Window1" Height="300" Width="300"> <Window.DataContext> // We are setting Data Context Here <local:MobileShop x:Name="MobileShopData" ShopOwner="Sekhar Babu" ShopNumber="290" Address="Hyderabad" /> </Window.DataContext> <grid> <label Content="Shop Owner : " Height="28" HorizontalAlignment="Left" Margin="12,51,0,0" Name="label1" VerticalAlignment="Top" Width="87" /> <label Content="Mobile Shop" Height="38" HorizontalAlignment="Left" Margin="68,0,0,0" Name="label2" VerticalAlignment="Top" Width="130" FontSize="20" FontWeight="Bold" /> <label Content="Shop Number : " Height="28" HorizontalAlignment="Left" Margin="12,85,0,0" Name="label3" VerticalAlignment="Top" Width="96" /> <label Content="Shop Address:" Height="28" HorizontalAlignment="Left" Margin="12,119,0,0" Name="label4" VerticalAlignment="Top" Width="88" /> <textbox Height="23" Text="{Binding Path=ShopOwner}" HorizontalAlignment="Left" Margin="118,56,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" /> <textbox Height="23" Text="{Binding Path=ShopNumber}" HorizontalAlignment="Left" Margin="118,87,0,0" Name="textBox2" VerticalAlignment="Top" Width="120" /> <textbox Height="23" Text="{Binding Path=Address}" HorizontalAlignment="Left" Margin="118,119,0,0" Name="textBox3" VerticalAlignment="Top" Width="120" /> </Grid> </Window>

Here first we have to set the namespace reference to access class files in the same project. i.e

xmlns:local="clr-namespace:WpfApplication1"

Now we can access all contents in the project using local reference like below.

<Window.DataContext> <local:MobileShop x:Name="MobileShopData" ShopOwner="Sekhar Babu" ShopNumber="290" Address="Hyderabad" /> </Window.DataContext>

Binding in Code behind file:

 We can also perform data binding in code file. 

• Create the Binding Object
• Set the Binding Source
• Set the path
• Bind the object to Target using SetBinding Method.

Here is an example on how to perform binding in code behind file.

// Creating an instance of MobileShop MobileShop ObjShop = new MobileShop(); // Assigning values to properties ObjShop.ShopOwner = "Sekhar Babu"; ObjShop.ShopNumber = "290"; ObjShop.Address = "Hyderabad"; Binding be1 = new Binding("ShopOwner"); be1.Source = ObjShop; txtShopOwner.SetBinding(TextBox.TextProperty, be1); Binding be2 = new Binding("ShopNumber"); be2.Source = ObjShop; txtShopNumber.SetBinding(TextBox.TextProperty, be2); Binding be3 = new Binding("Address"); be3.Source = ObjShop; txtAddress.SetBinding(TextBox.TextProperty, be3);

Binding Modes in WPF:

       Mode is the one property of the binding element which determines the flow of data between binding source and target. Four Binding Modes available.

1. OneWay.
2. OneTime.
3. OneWayToSource.
4. TwoWay.

OneWay:  If Mode is OneWay means Data flows from source to target whenever source is changed.

OneWay Binding Mode

Here Target UI will be updated only if the source changed. Use this to display read only data in the UI.

OneTime:  If the Mode is OneTime then data flows from source to target when application starts or datacontext changes.

OneTime Binding Mode

   You can use this to show read only data. This can be used to compare the changes occurred in UI. This Mode very useful source doesn't implement INotifyPropertyChanged Interface.

OneWayToSource: This is completely opposite to OneWay mode. In this Mode if target UI value is changed by user then it is updated in the source if the source is dependency property or it is implemented by INotifyPropertyChanged Interface.

OneWayToSource Binding Mode

   In this case target is not updated if source is updated because of changes occurred in target.

TwoWay:  If the Mode is TwoWay then Whenever the Source is updated then target is updated, in the same manner if the target value is changed by user then Source is updated with target value and If the binding Source is bind to multiple targets  then all the targets are updated with Source data.

TwoWay Binding Mode

          Use this Mode when User can change binding source and all it's targets.
For Understanding Binding Modes  briefly read this Binding Modes in WPF with example

 We have seen Binding Source is updated in OneWayToSource and TwoWay Binding Modes. More Precisely we can control the binding source updation by using UpdateSourceTrigger.

UpdateSourceTrigger in WPF:

          UpdateSourceTrigger is one of the property of Binding class. This Property defines the timing of binding source updation. This Property has three Options available. These are  LostFocus, PropertyChanged, Explicit. 

                Suppose you bind a property to a textbox, then if UpdateSourceTrigger is set to LostFocus then all the changes occurred in the textbox is updated in the source when TextBox Lost focus. If UpdateSourceTrigger is set to PropertyChanged then binding source is updated for every change in target. and if the UpdateSourceTrigger is Explicit then binding source is updated only when we explicitly called UpdateSource ( ) method.

For More Explanation about UpdateSourceTrigger Read this UpdateSourceTrigger in WPF Tutorial.

Watch the Video Explaining Binding in WPF

  Conclusion:

               I hope now you will able to work with wpf bindings. Download the Source Code and watch the Video about Bindings in WPF. Let me know if you need any clarification.

             Don't forget to Comment and share for our friends if you like this post.