Two way Binding in WPF

In this article I will show you about two way binding in WPF application.

Technology : CSharp .net 4.0 WPF

Abstract :

In this article I will show you about two way binding in WPF application. Its very easy to do in WPF in comparison of windows Application programming.

Two way binding is used when we want to update some controls property when some other related controls property change and when source property change the actual control also updates its property. I think this sentence is hard to understand :)

Let me explain you with an example.

Suppose we have one  one Slider control and one textbox. Now if I move slider its value should be displayed in text box and when I input some value in textbox it should be reflected in Slider too.. that's called two way binding .. :)

Implementation :

We will create sample application that will demonstrate the same as I mentioned in abstract part of the article.

Start with File >> New >>Projects >>Visual C# >> WPF Application ...

DragDrop One Slider control on the WPF form ..

and a Textbox ..

Setup the GUI like shown in below image



Now we want to bind TextBox Text Property to the Slider's value property ..

In XAML code of TextBox we will write Text Property as below 

Text="{Binding Mode=OneWayToSource, ElementName=Slider1,Path=Value, UpdateSourceTrigger=PropertyChanged}

Lets understand what it says

Mode :  Specify how we want to Bind Control

here we will have default, OneTime, OneWay ,OneWayToSource, TwoWay.

• OneTime: changes Slider Property one time only when we write value in Text box 
• OneWay: Only Text box Property will be updated when we move Slider ..but if we write some value in TextBox it will not be reflected in Slider 
• OneWayToSource: by this option we can update the Value of Slider from Text box but can not Update value of textBox from Slider.
• TwoWay: if we update the value of textbox it will be reflated to Slider and If we update the value of slider it will be reflected in TextBox .

Now when we bind something we need to specify which control we are binding so

ElemenetName : Specify which control to bind ..

Path Specifies which specific property we are trying to bind here we are using Value property becuase we want to Bind Value property of the Slider to TextBox

UpdateSourceTrigger: it specifies when trigger should be fired .. we specified when some PropertyChanged in Source .

Here is My Full XAML Code of Grid take a look ..

<Window x:Class="TwowayBinding.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="MainWindow" Height="350" Width="525">

    <Grid>

      

        <Slider Name="Slider1" Value="0" Margin="84,85,173,199" SmallChange="1" Maximum="100" ></Slider>

       <TextBox Name="txtValue" Margin="84,118,173,174" Text="{Binding Mode=TwoWay, ElementName=Slider1,Path=Value, UpdateSourceTrigger=PropertyChanged}"></TextBox>

        <Label Content="Value " Height="28" HorizontalAlignment="Left" Margin="39,114,0,0" Name="label1" VerticalAlignment="Top" />

        <Label Content="Two way binding Demo :" Height="61" HorizontalAlignment="Left" Margin="17,12,0,0" Name="label2" VerticalAlignment="Top" FontSize="32" />

    </Grid>

</Window>

Just write the code like it and Run the project ..

You have successfully learned how to bind Two Controls Two way . :)

Thank you for reading article :)

Conclusion :

This article showed you how to work with two way binding in WPF.