Social Icons

Thursday, 15 August 2013

Data Binding in WPF with Example

Introduction:

In this article i will explain

Download SourceCode And Video Explaining Binding in WPF 

Description:


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 .

Data Binding Architecture in WPF
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.

wpf binding in diagramatic format explanation
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:



Output is

WPF Simple Binding example
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


Now add a new window to your project and drag three textboxes ,three labels for displaying above three properties. XAML code looks like below.



Now in the Constructor of the Window write below code



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.



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



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.



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.



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 Image
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
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
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 Example
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.


  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.


No comments:

Post a comment

Please Give your Valuable Suggestions,Questions and Comments to improve my blog.