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.
![]() |
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 |
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.
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.
- OneWay.
- OneTime.
- OneWayToSource.
- TwoWay.
![]() |
OneWay Binding Mode |
OneTime: If the Mode is OneTime then data flows from source to target when application starts or datacontext changes.
![]() |
OneTime Binding Mode |
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 |
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 |
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
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.
No comments:
Post a Comment
Please Give your Valuable Suggestions,Questions and Comments to improve my blog.