Data Binding Concepts and Its Modes in WPF

Data Binding:- This is the process that establishes a connection between the application UI and business logic.The use of data binding is to place server or local configuration data into forms or other UI controls.In wpf, this concept is expanded to include the binding of a broad range of properties to a variety of  data sources.The dependency properties of elements can be bound to CLR objects and XML data in wpf applications.   

There are some characteristics of data binding in WPF.

• User Interface(UI) can be bound to CLR objects or XML .
• Dependency properties can also be bound to ado.net and objects associated with web services and web properties.
• Data templates can be applied to data.
• Filter,sort and group views can be generated on the top of the data.

There are  mainly four elements used for data binding in wpf.

1. Source
2. Source Path
3. Target Dependency Property
4. Target Dependency object

Example:-

<TextBlock Background="LightBlue" Name="textBlock1" Text="{Binding ElementName=textBox1,   Path=Text}"/>

Descriptions:-
In above example, you can find above four elements which is used for binding in wpf as given below:-
 TextBlock :--->Target Dependency object
 Text   :----> Target Dependency Property
Source :---> textBox1
Source Path --> Text
Note:- 

• From where data comes that is called Source . In above example,data comes from TextBox so this is called Source element. 
• Source and Target property values are changing at different different situation.Some time Source act as target and some time Target act as source.It it totally depend on your requirements.

Binding Modes in WPF 
There are four binding modes in WPF as given below:-

1. One Way
2. One Time
3. Two Way
4. OneWayToSource

     1.) One Way :- In this,if we do a change in Source  then it will automatically update to Target.

      2.) One Time :- If we do any change first time in DataContext then the data flow will start from Source to Target when  your wpf application start Run.But if do change again (second time) in Source then it will not be reflected to Target again.

     
      3.) Two Way :- In this binding ,"the changes to either the source or the target ,automatically update to other".
In this binding, If we change in source then it will be automatically updated to Target and its Vice Versa also true.

     4.) OneWayToSource :-It is reverse the One Way binding.In this,when the target property changes then it will automatically update to source. 

There are some steps to implement this whole concepts in WPF application as given below:-
Step 1:- First open your visual studio --> File -->New -->Project --> Select WPF Application --> OK --> Now drag and drop textBox ,TextBlock and Button Control on Window from the toolbox ---> Bind the textBox controldata to the TextBlock controls as shown in XAML codes:-

<Window x:Class="binding_types.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>
        <Grid.RowDefinitions>
            <RowDefinition Height="61*" />
            <RowDefinition Height="250*" />
        </Grid.RowDefinitions>
        <TextBox Height="29" HorizontalAlignment="Left" Margin="103,45,0,0" Name="textBox1" VerticalAlignment="Top" Background="Yellow" Width="167" Grid.RowSpan="2" />
        <TextBlock Height="23" HorizontalAlignment="Left" Background="LightBlue" Margin="114,33,0,0" Name="textBlock1" Text="{Binding ElementName=textBox1, Path=Text}" VerticalAlignment="Top" Width="114" Grid.Row="1" />
        <Label Content="Write some text in TextBox and bind it to in TextBlock" Height="28" HorizontalAlignment="Left" Margin="59,12,0,0" Name="label1" VerticalAlignment="Top" Width="357" />
        <Button Content="Proceed Next" Grid.Row="1" Height="29" HorizontalAlignment="Left" Margin="146,97,0,0" Name="button1" VerticalAlignment="Top" Width="105" Click="button1_Click" />
    </Grid>
</Window>

See Window Layout:-

Note:- In above example ,i have used simple binding of textBox data to the  TextBlock Text. Here you can use 

• One Way
• OnewayToSource

Step 2:- Now open Solution Explorer -->  Add a New window(WPF) (Window1.xaml) --> create some controls(comboBox,textBox ,ListBox and TextBlock) using XAML codes or Toolbox as shown below:-

XAML Codes:-

<Window x:Class="binding_types.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="481">
    <Grid>
        <ComboBox x:Name ="combo1" Height="23"  Background="LightBlue"  VerticalAlignment="Top" Width="159" Margin="62,33,238,0">
            <ComboBoxItem Content="Red"/>
            <ComboBoxItem Content="Violet"/>
            <ComboBoxItem Content="Green"/>
            <ComboBoxItem Content="Blue"/>
            <ComboBoxItem Content="Yellow"/>
            <ComboBoxItem Content="Pink"/>
            <ComboBoxItem Content="Black"/>
            <ComboBoxItem Content="orange"/>
            <ComboBoxItem Content="LightBlue"/>
            <ComboBoxItem Content="skyBlue"/>
            <ComboBoxItem Content="Purple"/>
            <ComboBoxItem Content="Red"/>
            <ComboBoxItem Content="Red"/>
            <ComboBoxItem Content="Red"/>
        </ComboBox>
        <TextBox  Text="{Binding ElementName=combo1, Path=SelectedItem.Content, Mode=TwoWay}" Height="23" HorizontalAlignment="Left" Margin="71,94,0,0" Background="{Binding ElementName=listBox1, Path=SelectedItem.Content,Mode=TwoWay}" Name="textBox1" VerticalAlignment="Top" Width="120" />
        <ListBox Height="100" HorizontalAlignment="Left" Margin="291,17,0,0" Background="{Binding ElementName=combo1, Path=SelectedItem.Content,Mode=TwoWay}" Name="listBox1" VerticalAlignment="Top" Width="146" >
            <ListBoxItem Content="{Binding ElementName=textBox1, Path=Text, Mode=TwoWay}"/>
        </ListBox>
        <Label Content="Select Your Colors" Height="28" HorizontalAlignment="Left" Margin="68,14,0,0" Name="label1" VerticalAlignment="Top" Width="114" />
        <TextBlock Height="23" HorizontalAlignment="Left" Margin="68,156,0,0" Name="textBlock1" Background="{Binding ElementName=listBox1, Path= SelectedItem.Content, Mode=OneWay}" VerticalAlignment="Top" Width="136" />
    </Grid>
</Window>

Note:- In above codes i have used one way and two way mode binding . You can use Onewaytosource and other mode binding after some little changes in this code.  

Step 3:- Now Run the application (Press F5) -->Write some value in textBox then you will see that these values automatically update in TextBock Control as shown below:-

Step 4:- Now Proceed with Next Button --> Select any value from combo box -->You will see the following output as shown below:-

Description:- 

• In above example,When we select any value (colours) in combo box then it will automatically update to listbox.Here i have used One way Mode binding.

Step 5:- Now Click listBox item (Red) then you will see following changes in textBox and TextBlock control as shown below:-

Description:- 

• If we select the list box value (red) then changes will automatically update to textBox and Textblock controls. Here Listbox and textBox is used in two way mode but TextBlock in one way mode.

Note:- 

• Similarly you can implement OnewayTo Source mode like OneWay  mode but it is totally opposite (reverse).
• You can implement One Time mode binding from DataContext from here.

If you want to understand the whole concepts of  wpf binding then run this application on your visual studio and see the all changes.You can download whole application from below:-

For More...

1. How to implement Join Concepts in sql server
2. How to implement multi threading concepts in c#
3. How to implement navigation control in asp.net
4. Generic collection in c#
5. How to host asp.net website on server free
6. How to host asp.net website on iis server

Download Whole Attached File
    Download