Introduction:
In this article,i am going to explain how to do wpf programming in asp.net 3.5 and above
.Net versions.And also in this article i am going to explain about wpf Elements,layouts,
properties in wpf,

1.Dependency Property,
2.Attached Property,
3.Routed Events,

Main:
Window Presentation Foundation to develop Rich User Interface applications using XAML .
WPF based on Managed code (CLR) and declarative Programming (use xml-type e.g. )

Main Goals for WPF are,

1.To Use Modern Hardware,
2.Simply Coding,
3.To Separate Business logic from presentation,

XAML Overview:

1.XAML is simply a declarative language,
2.Each and every elements representing CLR class,
3.Most of the xaml elements correspond to a derived class from some abstract classes in CLR,

WPF Elements:
There are five kinds of elements in XAML,

1.Root Elements:The root elements of xaml files.Window and page are common root elements,
and window is more common.

2.Panel Elements:These elements are used to layout user interfaces and keep other elements.
StackPanel,DockPanel,Grid and Canvas are four panel elements.

3.Control Elements:These elements are used to represent controls in XAML.

4.Geometric Elements:These elements are used to draw a geometric shapes in XAML.

5.Documentation Elements:Most Common usage of this element is when you want to
change the presentation of a document.

WPF Attributes:
When elements represent .NET Clr classes their attribures represent class properties and
that is true.So in an inheritence hierarchy each element inherits some properties from its
parent.

We has two option to define attributes,

1.Inline Attributes efinition is similar to normal XML attributes.

2.Explicit:In this option you declare attributes as a child of the parent element.
Explicit option is a good choice when an element has many attributes.

<Window x:Class="FirstWPFapp.Window1" //ROOT ELEMENT DECLARATION xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" //PRIMARY NAMESPACE DECLARATION FOR THIS XAML CODE, xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" //SECONDARY NAMESPACE DECLARATION FOR THIS XAML CODE, Title="FirstWPFapp" Height="400" Width="364" FlowDirection="LeftToRight" Loaded="Window_Loaded"> //TITLE AND HEIGHT AND WIDTH OF THE XAML PAGE, <Grid> <StackPanel Margin ="5"> <Image Source="Hydrangeas.jpg" Width ="160" Height ="160" /> <Label Name="l1" HorizontalAlignment ="center" FontSize ="24" Content="WELCOME to WPF"/> <Label Name="l2" FontSize="20" Content="Enter Your name"></Label> <TextBox Name="t1" FontSize ="20" Margin="5" Background ="Aqua"></TextBox> <Button Name="b1" Click="b1_Click" FontSize ="20" Margin="5" Width="150" Background ="Yellow" Content="Greet"></Button> </StackPanel> </Grid> </Window>

The WPF programming mainly contains the two parts named,
1.Code –> Written in some .NET languages like C#,
2.Markup –> Pure XAML part,

WPF Layout Controls,

STACKPANEL –> Will layout its children in a vertical or horizontal stack
DOCKPANEL –> Allocate the entire edge of its client to each child
GRID –> Arranges its child controls in rows and columns
CANVAS –> Allows you to layout children freely using absolute position by setting their top,left,width and height properties

Dependency Property,

Dependency property is used with data binding,animation,styles,

Whenever the value of a dependency property changes, WPF can automatically trigger a number of actions depending on the property’s metadata. These actions can be re-rendering the appropriate elements, updating the current layout, refreshing data bindings.

built-in change notification is done through property triggers, which enable you to perform your own custom actions when a property value changes without writing any procedural code.

for ex,

<Window x:Class="WPFdependency_demo.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPFdependency_demo" Height="335" Width="406" >   <StackPanel Margin ="10" Background ="Olive"> <Slider Name ="sldvalue" Minimum ="0" Maximum ="100" Margin ="10" > </Slider> <TextBlock Name ="t1" HorizontalAlignment ="Center" FontSize ="18" Margin ="10" Width="350" ></TextBlock> <TextBox Name="txt" HorizontalAlignment ="Center" Width="200" FontSize="20" Text="{Binding ElementName=sldvalue , Path=Value}" ></TextBox> </StackPanel>   </Window>

Attached Property allows as use some attach some styles globalically,

Attached Property:

StackPanel panel = new StackPanel(); TextElement.SetFontSize(panel, 30); TextElement.SetFontStyle(panel, FontStyles.Italic); panel.Orientation = Orientation.Horizontal; panel.HorizontalAlignment = HorizontalAlignment.Center; Button helpButton = new Button(); helpButton.MinWidth = 75; helpButton.Margin = new Thickness(10); helpButton.Content = “Help”; Button okButton = new Button(); okButton.MinWidth = 75; okButton.Margin = new Thickness(10); okButton.Content = “OK”; panel.Children.Add(helpButton); panel.Children.Add(okButton);

Routed Events

Routed events are events that are designed to work well with a tree of elements.
When a routed event is raised, it can travel up or down the visual and logical tree, getting raised
on each element in a simple and consistent fashion, without the need for any custom code.

Routing Events Strategies
Tunneling—The event is first raised on the root, then on each element down the tree until the
source element is reached.

Bubbling—The event is first raised on the source element, then on each element up the tree until
the root is reached.

Direct—The event is only raised on the source element.

The tunning is normal event in WPF programming,

Event Bubbling:

In xaml file,

<Window x:Class="WPFdependency_demo.Window3" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" MouseRightButtonDown="AboutDialog_MouseRightButtonDown" Title="Window3" Height="300" Width="300" Loaded="Window_Loaded"> <Grid>   </Grid> </Window>

In Xaml.cs file,

The Event will fire in window right click,

using System; using System.Collections.Generic; 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 WPFdependency_demo { /// <summary> /// Interaction logic for Window3.xaml /// </summary> public partial class Window3 : Window { public Window3() { InitializeComponent(); }   private void Window_Loaded(object sender, RoutedEventArgs e) {   }   void AboutDialog_MouseRightButtonDown(object sender, MouseButtonEventArgs e) { this.Title = "Source = " + e.Source.GetType().Name + ", OriginalSource = " + e.OriginalSource.GetType().Name + " @ " + e.Timestamp; Control source = e.Source as Control; if (source.BorderThickness != new Thickness(5)) { source.BorderThickness = new Thickness(5); source.BorderBrush = Brushes.Black; } else source.BorderThickness = new Thickness(0); }   } }

Conclusion:
Hope this helps,
Happy Coding.