Binding Overview Concepts of WPF

On By
Introduction :
WPF  Provides a simple and powerful technique to update data between the business logic and user interface (UI).This is called data binding .When we change your business logic codes then it will automatically reflect the user interface (UI) and vise versa.
There are two types of data binding in WPF.
  1. Unidirectional (source ---> target  or vice versa)
  2. Bidirectional (source <---> target)
The source binding can be a normal .NET Property  or a dependency property.But one things always remember that target property of the binding must be a dependency property.

Data Context :-
Data context is the dependency property which contains the data.The data may be following type like:
  • Data set 
  • Collection object
  • CLR Object
  • XML Data Provider etc.
Every WPF Control derived from framework element that is part of a Data  Context property. All WPF  user interfaces are derived from dependency property object ,it can be layout controls or content controls.In WPF data binding is done in XAML by using { Binding  } markup extension.

Dependency Property:-
 "A property that depend with another property, is called dependency property".Dependency property use more efficient storage and support additional features such as change notification and property value inheritance (the ability to propagate default values down the element tree ). Dependency properties are also the basis for a number of key WPF features including data binding ,animation and styles.
  Dependency properties ae a completely new implementation of properties.Most of the properties that are exposed by WPF element are dependency properties.

 Note:- If Data Context is set on parent elements then there are no need to set binding source to child elements.

There are some steps to understand the Data context binding  concepts in wpf application as given below:-
 Step 1: - First open your visual studio --> File --> New -->Project -->WPF Application --> OK --> Drag and drop Label ,Text Box and Button controls on the page fom the toolbox as shown below:-
layout

  Step 2: - Now Open Solution Explorer --> Create a Class (Class1.cs) --> Now create properties for a Student_Records as given below:-

using System;
using System.Text;

namespace Wpf_data_context
{
    class Student_Records
    {
        public int id
        {
            get;
            set;
        }
        public string name
        {
            get;
            set;
        }
        public string city
        {
            get;
            set;
        }
        public string address
        {
            get;
            set;
        }
    }
}

Step 3: - Now write the XAML and C# codes for data bindings as given below:-
XAML Codes:-

<Window x:Class="Wpf_data_context.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local= "clr-namespace:Wpf_data_context"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:Student_Records x:Name="Data" id="102" name="Ramashanker" city="Delhi" address="128/102 Ghaziabad" />
    </Window.DataContext>
    <Grid>
        <Label Content="Id" Height="28" HorizontalAlignment="Left" Margin="61,51,0,0" Name="label1" VerticalAlignment="Top" Width="33" FontSize="15" />
        <TextBox Height="23" Text="{Binding Path=id}" HorizontalAlignment="Left" Margin="112,51,0,0" Name="textBox1" VerticalAlignment="Top" Width="166" />
        <Label Content="Name" Height="28" HorizontalAlignment="Left" Margin="44,101,0,0" Name="label2" VerticalAlignment="Top" FontSize="15" />
        <TextBox Height="23" Text="{Binding Path=name}" HorizontalAlignment="Left" Margin="112,102,0,0" Name="textBox2" VerticalAlignment="Top" Width="166" />
        <Label Content="City" Height="28" HorizontalAlignment="Left" Margin="59,147,0,0" Name="label3" VerticalAlignment="Top" FontSize="15" />
        <TextBox Height="23" Text="{Binding Path=city}" HorizontalAlignment="Left" Margin="112,152,0,0" Name="textBox3" VerticalAlignment="Top" Width="166" />
        <Label Content="Address" Height="28" HorizontalAlignment="Left" Margin="31,200,0,0" Name="label4" VerticalAlignment="Top" FontSize="15" />
        <TextBox Height="23" Text="{Binding Path=address}" HorizontalAlignment="Left" Margin="112,200,0,0" Name="textBox4" VerticalAlignment="Top" Width="166" />
        <Button Content="Proceed Next Window" Height="23" HorizontalAlignment="Left" Margin="59,264,0,0" Name="button1" VerticalAlignment="Top" Width="158" Click="button1_Click" />
        <Button Content="Proceed Second Window" Height="23" HorizontalAlignment="Left" Margin="240,266,0,0" Name="button2" VerticalAlignment="Top" Width="154" Click="button2_Click" />
    </Grid>
</Window>
C# codes :- 

using System;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace Wpf_data_context
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            Student_Records st = new Student_Records();
            st.id = 101;
            st.name = "Ramashanker";
            st.city = "Ghaziabad";
            st.address = "511/128 lucknow";
            this.DataContext = st;
        }
        private void button1_Click(object sender, RoutedEventArgs e)
        {
            Window1 win1 = new Window1();
            win1.Show();

        }

        private void button2_Click(object sender, RoutedEventArgs e)
        {
            Window2 win2 = new Window2();
            win2.Show();
        }
    }
}
Description :-
Here i have bound the data with XAML and C# codes .You  can refer any of  one for binding purpose.
Note :- 
  • Here i have explained  C#  +  XAML data binding concepts.
  • i have included a namespace xmlns:local= "clr-namespace:Wpf_data_context"  in every XAML Codes.
Step 4: -  Now open Solution Explorer --> Add  New Window (WPF) (Window1.xaml)--> Now you can refer Another way of binding using  XAML codes  as given below:-

<Window x:Class="Wpf_data_context.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local= "clr-namespace:Wpf_data_context"
        Title="Window1" Height="300" Width="489">
    <Window.Resources>
        <local:Student_Records x:Key="My_Data" id="105" name="Sachin" city="Delhi" address="128/102 Ghaziabad" />
    </Window.Resources>
    <Grid DataContext="{StaticResource My_Data}" Width="460">
        <Label Content="Id" Height="28" HorizontalAlignment="Left" Margin="61,51,0,0" Name="label1" VerticalAlignment="Top" Width="33" FontSize="15" />
        <TextBox Height="23" Text="{Binding Path=id}" HorizontalAlignment="Left" Margin="112,51,0,0" Name="textBox1" VerticalAlignment="Top" Width="166" />
        <Label Content="Name" Height="28" HorizontalAlignment="Left" Margin="44,101,0,0" Name="label2" VerticalAlignment="Top" FontSize="15" />
        <TextBox Height="23" Text="{Binding Path=name}" HorizontalAlignment="Left" Margin="112,102,0,0" Name="textBox2" VerticalAlignment="Top" Width="166" />
        <Label Content="City" Height="28" HorizontalAlignment="Left" Margin="59,147,0,0" Name="label3" VerticalAlignment="Top" FontSize="15" />
        <TextBox Height="23" Text="{Binding Path=city}" HorizontalAlignment="Left" Margin="112,152,0,0" Name="textBox3" VerticalAlignment="Top" Width="166" />
        <Label Content="Address" Height="28" HorizontalAlignment="Left" Margin="31,200,0,0" Name="label4" VerticalAlignment="Top" FontSize="15" />
        <TextBox Height="23" Text="{Binding Path=address}" HorizontalAlignment="Left" Margin="112,200,0,0" Name="textBox4" VerticalAlignment="Top" Width="166" />
    </Grid>
</Window>

Note :- 
  • Here i have explained pure XAML  data binding concepts.
  • Design will be same as step 1.
Step 5: -  Now again  open Solution Explorer --> Add  New Window (WPF)  (Window2.xaml) --> Write the c# codes for data binding purpose as given below:-

using System;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace Wpf_data_context
{
    /// <summary>
    /// Interaction logic for Window2.xaml
    /// </summary>
    public partial class Window2 : Window
    {
        public Window2()
        {
            InitializeComponent();
            Student_Records st = new Student_Records();
            st.id = 200;
            st.name = "Neha Singh";
            st.city = "Kolkata";
            st.address = "511/128 kolkata";
            // Now binding data with textbox using properties
           /* .................................................*/
            //here id binding with first textbox
            Binding b1 = new Binding("id");
            b1.Source = st;
            textBox1.SetBinding(TextBox.TextProperty,b1);
            //here name binding with second textbox
            Binding b2 = new Binding("name");
            b2.Source = st;
            textBox2.SetBinding(TextBox.TextProperty, b2);
            //here city binding with third textbox
            Binding b3 = new Binding("city");
            b3.Source = st;
            textBox3.SetBinding(TextBox.TextProperty, b3);
            //here Address binding with fourth textbox
            Binding b4 = new Binding("address");
            b4.Source = st;
            textBox4.SetBinding(TextBox.TextProperty, b4);
        }
    }
}
Note :- 
  • Here i have explained pure C#  data binding concepts.
  • Every WPF Window design will be same such as  MainWindow,Window1 and Window2. Which is already shown in Step 1.
Step 6: - Now Run the  Application (press F5) --> You will see the following output as shown below:-
output

Step 7: - Now Press Proceed Next Window Button --> You will see the following output as shown below:-
ouput
                                 
Step 8: - Now press Proceed Second Window --> You will see following output as shown below:-
output

Note :- 
  • In above examples ,i have explained "How to bind data with the help of Data Context class in wpf Applications'. 
  • I have also used pure c# data binding concepts in wpf applications.
  • To understand the whole concepts ,you can run this application on your visual studio.You can download whole application from the below link.
For More...
  1. How to import excel file data in sql database and display it in gridview control
  2. How to implement Role based security in web applications 
  3. How to make 3 tier architecture application in asp.net
  4. How to use trigger in sql server database
  5. How to display image in picture box control in .NET
  6. How to install ajax toolkit in visual studio
Download Whole attached file
      Download
Subscribe through email and get Free updates in inbox
Please like and share this post with your friends...

You May Also Like...

0 comments:

Post a Comment

Powered by Blogger.