Data Binding Concepts and Its Modes in WPF

By // No comments:
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.   
wpf

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.
source

      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.
source
     
      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.

twoway

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

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:-


design

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:-
window1

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:-
mainwindow

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

window1 output

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:-


output


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
3

How to bind XML File Data in WPF Applications

By // No comments:
Hi friend, Today i will show you "how to bind XML file data in WPF Applications". This is very helpful concepts to bind any file data in WPF applications. Here you will also learn "how to write a XML codes (Syntax of XML) ". I have created a separate XML file (MY_XMLFile1.xml) and written some XML codes.In this, i have written some XML codes with XAML file also. In this post i have implemented Stack Panel and Grid Panel layout controls.You can implement it with Canvas, Dock Panel and wrap panel also.You can design your layout controls according to requirements .WPF provides more features to make complex design with the help of XAML codes.  If you want to understand complete XML binding concepts,download whole application from below and run it on your visual studio. I hope you will enjoy in this post.     
There are some steps to implement this concepts as given below:- 
3

Binding Overview Concepts of WPF

By // No comments:
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.
3

How to implement control properties in WPF Applications

By // No comments:
Hi Friend , Today i will explain about WPF control properties.This is basic part of any WPF Application.In our previous tutorial, I have already explained properties in c#. Here i will explain the control properties of WPF with the help of XAML Language.As you continue to explore WPF , you will see  that  the data binding layer ,animation graphics layers, and many other services are greatly simplified using this new methodologies.
There are various kinds of XAML property syntax .
  1. Dependent Property Syntax
  2. Property element syntax
  3. Attached Property syntax    
1.) Dependent Property Syntax:-
A dependent property allows WPF to compute a particular property's value based on other properties. A dependent property can be implemented to provide self contained validation,default values ,etc.
Example :- 

<Button Name="bnt" FontSize="18" Width="134" Height="29">Proceed</Button>
Description:-
`Here you can see that the content value of the Button is indirectly set as a string data (ex. Proceed) within the <Button> XAML scope.
    We can set this string value to the content property of the control as given below:-

<Button Name="bnt" FontSize="18" Width="134" Height="29" Content="Proceed"/>

Note :- Any property concepts are basically used to make coding(c#,vb,XAML) easy. 

2.) Property Element Syntax:-
we generally know,some properties on a given control require more than simple string data.This property can be set on any Brush type found within the wpf APPs .
Example:- 

<Button Name="bnt" FontSize="18" Width="139" Height="34" Background="Red">Submit Me</Button>
Description :- 
Here you can see that the string value assigned to properties requiring a Brush derived type ()such as Background) map directly to a property on the system.windows.Media.Brushes type.We can use other syntax in which we can pass in start up values to the type.For this we use property element syntax as given below:-

<Button Name="bnt" FontSize="18" Width="139" Height="34" Content="Submit Me">
            <Button.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1.1">
                    <GradientStop Color="Red" Offset="0"/>
                    <GradientStop Color="Yellow" Offset="0.2"/>
                    <GradientStop Color="Green" Offset="0.4"/>
                    <GradientStop Color="Blue" Offset="1"/>
                </LinearGradientBrush>
            </Button.Background>
        </Button>

Output:-

Description : -
Here we are using the <Button.Background> property to specify the look and feel Linear Gradient Brush element

3.)  Attached Property Syntax:-
In Attached property syntax ,child element can store unique values of a property that is actually defined in a parent element.
Example :-

<DockPanel>
  <CheckBox DockPanel.Dock="Left">Remember Me</CheckBox>
 </DockPanel>

Description:-
In above example,tha child element <CheckBox> element is getting the Dock Property of its parent element <DockPanel> . You can easily know the concepts of child and parent element by below c# example.

private void bnt_Click(object sender, RoutedEventArgs e)
        {
            DockPanel my_dock = new DockPanel();
            CheckBox box = new CheckBox();
            box.Content = "Remember Me";
            my_dock.Children.Add(box);
            DockPanel.SetDock(box, Dock.Left);
        }

Note:- 
  • In this c# codes ,the parent type has define a method with a specific signature.
  • You can use above three property concepts in your new wpf application.
For More ...
  1. Namespace in WPF
  2. How to add role based security in asp.net website
  3. How to save and display images from database
  4. How implement login controls in asp.net application
  5. How to implement PLINQ Concepts in asp.net application
  6. Trigger concepts in SQL server
  7. How to run c# program on Notepad easily
  8. How to use WCF services in asp.net
3

How to implement Panel (Layout) Controls in WPF Applications with Example

By // No comments:
A WPF application contains a good number of User Interface (UI) elements such as user input controls ,Menu systems, graphical content,status bar etc.
Why we use panel controls in WPF:-When we place content within a window that does not make use of panels,it is positioned dead center within the window's container.If we want to place multiple element directly within window, you will get an error message (compile time errors).This error comes due to assign multiple objects in its content properties. A window can assign only a single object to its contents property. when a window needs to multiple elements,they must be putted within any number of panels. All the panel controls come under System.Windows.Controls namespace.To build complex user interfaces , panel controls can be intermixed(ex. A Dock panel contains Stack panel controls) to provide  for a great deal of flexibility and control. 
3

Namespace in WPF Application with Examples

By // No comments:
Hi Friends, Today, I will discuss about Namespace in WPF. Before developing any WPF applications ,we have to understand the concepts of Namespace in WPF Application.There are lots of students in the world ,they can develop any WPF applications easily.But they don't know about Namespaces. This is not Good for a .NET Developers.If you are working in company then you will need to this knowledge otherwise you will never develop any unique application.Before developing any things ,We would understand its basics parts.Now we shall understand about Namespace and Layout controls in WPF Application.
When we install the .Net Framework 3.0/3.5/4.0/4.5 on your system then you will find a number of assemblies have been added  to the GAC. These assemblies provide references to our .net applications.These assemblies define a number of new namespaces and lots of NET Types(classes, structures, enumerations ,interfaces and delegates).
There are three Core WPF assemblies as given below:-
  1. WindowsBase .dll :-   This is helpful to define the core types and constitute the infrastructure of the wpf API.
  2. Presentationcore.dll:- This defines many types that constitute the foundation of the WPF GUI layer.
  3. PresentationFoundation.dll:- This dll defines the WPF controls types multimedia and animation support,data binding support , and other WPF services. 
There are some Namespaces used in above Assemblies files as given below:-
  • System.Windows:- This is main namespace of WPF. This includes two core types  such as Window and Application that are required any WPF desktop applications.
  • System.Windows.Controls :-  This is helpful to build WPF Widgets such as  menu systems, tool tips and numerous  layout managers.
  • System.Windows.Navigation :-  This namespace helps to provide  Navigation logic for XAML Browser Applications.
  • System.Windows.Markup :- This defines a number of types that allow XAML Markup to be parsed  as binary format.
  • System.Windws.Media :- This namespace provides animations,3D Rendering and other primitives multimedia for WPF applications.
  • System.Windows.shapes:-  This names defines basic geometric shapes such as Rectangle,hyperbola,elliptic .polygon,etc. Using this namespace, we can make any shapes for WPF Applications. 
There are some roles of Application and Window classes as given below:-
1.) Application Class :- The System.window.Application class type represents a global instance of a running WPF application.This is helpful to handle the series of events such as Startup and Exit .
There are some properties of Application Type as given below:-
  • Mainwindow :-This property allow us  to  get and set  the main window of the application programmatically.
  • Current :- This is very useful property that allows to gain access to the running application object from anywhere in your code. 
  • Properties :- This property allow us to establish and get data that is accessible throughout a WPF application.
  • StartupUri :- This property helps to get and set a URL that specifies a window to open  automatically when the wpf application starts.
  • Windows :-This property is helpful to return a WindowCollection type.which provides access to each window created from the thread that created the application object.
Example:-

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 WpfApplication1
{
    /// 
    /// Interaction logic for MainWindow.xaml
    /// 
    public partial class wpfApp : Application
    {
        static void main()
        {
            wpfApp wp = new wpfApp();
            wp.Startup += new StartupEventHandler(wp_Startup);
            wp.Exit += new ExitEventHandler(wp_Exit);
            wp.Run();
        }
        static void wp_Exit(object sender, ExitEventArgs e)
        {
            MessageBox.Show(" Application has successfully exited");
        }
        static void wp_Startup(object sender, StartupEventArgs e)
        {
            Window my_window = new Window();
            my_window.Title = "Welocme to my first wpf application";
            my_window.Height = 200;
            my_window.Width = 300;
            my_window.WindowStartupLocation = WindowStartupLocation.CenterScreen;
            my_window.Show();
        }
    }
}

2.)  Window class:-  The System.Windows.Window  type represent a single window owned by application derived class. This is included any dialogs displayed by the main window.
There are some hierarchy of the window Type ,this is helpful to support many features in window class object as given below:-
  • System.Windows.Controls.Contentcontrol:-This base class provides derived types with the ability to host content. A content control has the ability to contain a great number of UI elements beyond simple string data.
  • System.Windows.Controls.Control:- This control defines properties to establish the control's size ,tab order logic,opacity,background color,cursor to display etc.
  • System.Windows.UIElement:- This class provides more events to account  for drag and drop operations,mouse movement ,keyboard input ,stylus input etc.
  • System.Windows.FrameworkElement:- This framework Element  supports for WPF data binding services and the ability to participate in WPF style model.
  • System.Windows.Media.Visual:-  This class is helpful for Media and Graphical rendering operations such as painting a pie on a window's surface.
  • System.Windows.DependencyObject:- This property allows a type to compute the value of a property based on the value of other property.This is very helpful when programming against the WPF data binding model.I will discuss it in details in Our coming post.
  • System.Windows.Threading.DispatcherObject:- This provides the basic constructs for dealing with concurrency and threading .This lower level class that can be ignored by the majority of your WPF applications.
3

How to implement Tree concepts in WPF Applications

By // No comments:
Tree in WPF:-
All elements of  a WPF UI (User Interface) are hierarchically related.The template of WPF contains two types of tree concepts...
  1. Logical Tree
  2. Visual Tree.
Why we use Logical and visual tree in WPF:-
We generally use these two tree (Logical & visual ) in WPF application  A WPF application uses multiple controls to develop a real application with the help of XAML .Each control consist of more primitive controls.
Ex .  Label control :-
 It contains the following UI element classes:-
1.) Border
2.) Content presenter 
3.) Text Block

Here Label is a part of a logical tree . Border ,Contentpresenter & Text Block are the part of visual tree.
These elements are visual children of label control .It is helpful to rendering the Label values We can't display the Label control's values without this visual tree(Border ,  Contentpresenter & Text Block). So these both tree are important to visualize the UI element in WPF Application.
3

Introduction and Implementation of XAML in WPF With an Example

By // No comments:
Hi Friends ! Today ,I will Show to "How to Implement XAML Concepts in WPF Applications".
What is XAML?
  • XAML Stands for Extensible Application Markup Language.
  • XAML is a declarative XML- based Language that defines objects and their Properties in XML.
  • XAML can be used to create visible UI elements in the declarative XAML markup.
  • XAML files are xml files that generally represent the .xaml extension.
  • XAML is a flexible Language that can be used designing and programming purpose at a time.
  • XAML Parser instantiates and writes up the objects using appropriate API and sets their properties.
  • If we use XAML with Avalon then Procedural code (code behind) is separate from user interface (UI).
  • We can use XAML Language in WPF,SilverLight and WF .NET Technologies.
  •   XAML is  Very powerful  binding Technologies.
Advantage of XAML:-
  • Graphical designer tools are used XAML language (ex. Blend).
  • XAML Code is flexible and short.
  • XAML code is used for designing and Business logic codes.
3

The Architecture of WPF

By // No comments:
Hi Friends ! Today i will explain Architecture of WPF.I will publish each post one by one ,so that students can Easily learn the actual concepts of WPF.WPF is very good technology that can be used in windows forms application as well as web application.If You understand the basic of wpf then you can easily built interactive application in wpf.I will also build some wpf application after covered this theory parts.
WPF uses a multilayered architecture which is shown in below figure.There are Three main layer of WPF Technology.
1.) The Managed WPF API Layer
2.) The Media Integration Layer
3.) Unmanaged Component Layer(lower level)
3

Introduction of Windows Presentation Foundation (WPF) Technology

By // No comments:
Windows Presentation Foundation(WPF) :-WPF is nothing but it is the wrapper component on the top of Direct X  Architecture. WPF is a two -dimension (2-D) and three-Dimension (3-D) graphics engine with following features and capabilities as given below:-
  • It contains many common user interface components including button,text box ,sliders ,labels and edit boxes etc.
  • It supports 2-d and 3-d animations.
  • It supports Documents and media into a single environment.
  • It contains hyperlinks for navigating between documents and tables.
  • It provides various types of grids and panels to assist in layout.
  • It supports tier 0 tier 1 and tier 2 Architecture  models.
3
Powered by Blogger.