What are the different ways of Binding in WPF?

   

What is Binding?

Binding is the most important topic for WPF. In this blog, we will discuss how and in which ways binding needs to be done.

The binding concept helps you to implement design rules into your project. WPF uses a Dependency property called Data Context property to set the source of binding.

Data binding is a mechanism in the WPF application which helps us to display run time data, which manages the run time data.

If you bind property and any other dependency property then it is known as binding for example, if we bind checkbox property to button property together then you can enable and disable the button with the help of binding.

We can bind it in many different ways depending upon project requirements which are mention below.

• Datacontext binding

• Property Binding with change notification from source

• Property Binding with change notification from client

• FallBack value

• Element Binding

• Binding with Converter

Datacontext binding

If any other source is not specified for data bindings then WPF by default searches the data Context.There’s are no default sources for the data Context property, you need to assign it some value otherwise binding will be null.So, whenever you are using binding you are binding with the data context of the corresponding element.

In WPF every framework element and every FrameworkContentElement has a DataContext property. DataContext is an object used as a data source during the binding, address by binding Path.

If you don’t specify a source property WPF search up the element tree starting at the current element.

In data context binding, you make object of your property and you get data by using that object. You can also use this object multiple times and you can access different data every-time you use it.

Read More: How To Apply Different Themes On Wpf Application?

We use this to perform element property binding and when the project is being load, at that time by default it will be null, but as we run the project and as we use it, the data will be loaded. For this purpose, binding is performed and If we do not use the object than it will be null.

In data context binding, after binding the element we can set the value of the object at runtime which is also useful for designing. If we want to set property like height-width or background color of control to another control than we can easily do it by using data binding and by doing this it will save time as well as will have less lines of code.

We Have Source of Main Content  : Click Me to read More...

Source

If you want to set the data to control by getting the data from one control without any change then you can do it by using source property. There is no need for extra functionality. You can use source property instead of data context.

Example: -

Gets or sets the object

public object Source { get; set; }

<window.resources>

<src:person personname="Rock" x:key="myDataSource">

</src:person></window.resources>

<label>The name you entered:</label>

<textblock text="{Binding Source={StaticResourcemyDataSource}, Path=PersonName}">

</textblock>

If you want to set the name of the object then you can do it through binding.

Relative Resource

This property is commonly used for binding one property of object to another property of the same object.

If we do not bind the property then it will conflict in the binding source and it will throw an exception.

Example: -

public System.Windows.Data.RelativeSourceRelativeSource { get; set; }

<trigger property="Validation.HasError" value="true">

<setter property="ToolTip" value="{Binding RelativeSource={x:StaticRelativeSource.Self},

Path=(Validation.Errors)/ErrorContent}">

</setter></trigger>

Element name

If you want to set the property of one control through another control then we can do it by using element name. For Example, we can change the color of text-box through slider and we can also change the size of text-box.

Example: -

<code>public string ElementName{ get; set; } </code>

Data binding allows the flow of data when data binding starts the business model changes it, which UI element automatically changes.

There is a 2 way of data binding

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

 

One-way data-binding

For data binding there are 2 controls, one source to control and target control, which data transfers.

Sources control updates target control data, in one-way binding if sources controller data changes then target control data automatically changes it.

Example:

<textbox height="40" margin="10" name="txtValue" text="{Binding ElementName=Slider, Path=Value, Mode=OneWay}" width="70">

</textbox>

<grid>

<stackpanel orientation="Vertical">

<slider margin="20" maximum="100" minimum="10" name="Slider"></slider>

<textbox height="40" margin="10" name="txtValues" text="{Binding ElementName=Slider, Path=Value, Mode=OneWay}" width="60"></textbox>

</stackpanel>

</grid>

 

Two-way data binding

In two way we can change data in sources control and target control. Target to source and source to target means if we change source control value then it will automatically change target control value. And vice-a versa for source control. That’s why it’s called two-way data binding.

for Example: -

<textbox height="60" margin="10" name="txtvalues" text="{Binding ElementName=Slider, Path=Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" width="30">

</textbox>

<grid>

<stackpanel orientation="Vertical">

<separator borderbrush="Black" borderthickness="20"></separator>

<slider margin="20" maximum="100" minimum="0" name="Sliders3"></slider>

<textbox height="70" margin="10" name="txtvalues3" text="{Binding ElementName=Sliders3, Path=Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" width="40"></textbox>

</stackpanel>

</grid>

Wants to Talk with Our Highly Skilled WPF Developer ? Contact Now.

SEE HERE

 

One Time

In one-time binding if you set value then we cannot change the value. Then it will be the final or final data set. Which initializes in run time. Like we cannot source to control.

You can change the value just only in the back-end, but in xmal, it will be the finale.

For Ex:-

txtvalues.Text = "10";

mySlider.Value = Convert.ToInt32(txtvalues.Text);

 

Fall back value

One of the best features of WPF is fallback value.Fallback is used when objects is unable to get data then it generates the exception at that time using fall back we can set a message and it’s an easy way to set a message.

Two types of fall-back value

1. Target null value
2. Fall back value

For example: -

public MainWindow()

{

InitializeComponent();

this.DataContext = this;

emp.Name = null;

}

<grid>

<grid.columndefinitions>

<columndefinition width="auto">

<columndefinition width="auto">

</columndefinition></columndefinition></grid.columndefinitions>

<label content="Name" width="auto">

<textbox grid.column="1" height="28" margin="0,6,0,50" text="{Binding EmployeeName,TargetNullValue='Oops, I am missing'}" width="100">

</textbox></label></grid>

O/P: -

 

Ref: https://www.c-sharpcorner.com/

 

For example, we have seen that source data is coming null then it does not generate an exception and fall-back data will be set and view automatically, this s the main use of fall back in binding

Conclusion

If you use data context binding then it is not compulsory to use all the properties instead you can use the property you want. We hope you get a complete idea regarding the various ways of Binding in WPF.

Gets or sets the object 
  public object Source { get; set; }
  <window.resources>
      <src:person personname="Rock" x:key="myDataSource">
  </src:person></window.resources>
  <label>The name you entered:</label>
        <textblock text="{Binding Source={StaticResourcemyDataSource}, Path=PersonName}">
  </textblock>

Gets or sets the object 
  public object Source { get; set; }
  <window.resources>
      <src:person personname="Rock" x:key="myDataSource">
  </src:person></window.resources>
  <label>The name you entered:</label>
        <textblock text="{Binding Source={StaticResourcemyDataSource}, Path=PersonName}">
  </textblock>