Introduction

WPF is used to develop RICH interactive desktop application. SilverLight is used to develop RICH interactive web application. WPF and SilverLight concepts are 98% same.

Generally WPF is required

1. While developing RICH graphics.
2. While working with colors and brushes.
3. While working with transformations.
4. While working with animations.

To work with WPF .net introduced "WPF application" project template. When WPF application project is opened, then a window(looks like form) will be opened. Every window will be having 3 modes. Design mode, XAML mode, Code mode. WPF window must be a class and which must be a class and which must be inherited from a predefined class called as window. To work with WPF, a new programming style called as XAML(extensible application markup language) is introduced.

Differences between HTML, XML, and XAML

HTML	XML	XAML
Used to design a webpage	Used to describe the data	Used for designing webpages and describing the data
Markup language	Descriptive language	Both
Not case sensitive	Case sensitive	Case sensitive
Error-free markup language	Structure based language	Structure based language
Special type of interpreter	Parser based	Compiler based
Predefined tags	Collection of userdefined tags	Both

Standard syntax of a XAML document:

<window> --> Root tag
<grid> --> Container tag
<button name="b1" content="click here" click="b1_click"></button> --> Control tag
</grid>
</window>

• WPF documentation must contain only one root tag.
• WPF application root tag must be window.
• Every opened tag must be closed.
• Every tag is a predefined class.

Display some text in a label when clicked on a button:

With the help of XAML
Open WPF application project, open XAML mode
Write the below code inside of the grid tags and execute

<grid>
<Textblock Text="abcd" Name="t1" Fontsize="30" Fontfamily="calibri"/>
<Button content="click here" name="b1" margin="25,30,40,50" click="b1-click" />
</grid>

Code for button1_click

private void button1_click(object sender, RoutedEventArgs e)
{
    t1.text="Welcome to WPF";
}

With the help of design and drag & drop options

Open WPF application project
Place a textblock and a button control from the toolbox

protected void button1_Click(object sender, EventArgs e)
{
    textblock1.text="welcome to WPF";
}

Working With layout manager:
Layout managers are also called as containers, helps to organise the controls in a proper way. At the heart of the layout engine in WPF are panels. Visual elements are placed within panels, and they then interact with the panel to control their size and position. WPF supports basically 5 types of layout managers:
GRID: The Grid is a tabular control, consisting of columns and rows. Elements can be positioned into specific cells within the Grid, and can then be aligned and sized accordingly. Elements can also span multiple columns and rows in much the same way that table cells can in HTML tables. Grid allows relative positioning not absolute positioning.
CANVAS: A canvas can be used to explicitly position an element using absolute coordinates and sizes. This control is generally not good for resizable user interfaces. Canvas allows absolute positioning.
STACK PANEL: As its name suggests, a StackPanel simply stacks controls up either vertically or horizontally. Truncation occurs if there is insufficient space in the StackPanel for all of the elements.
DOCK PANEL: A DockPanel can be used to dock elements to its edges, in much the same way that the Dock property is used in Windows Forms. DockPanels are excellent hosts for the “chrome” elements in the UI, such as Toolbars, Menus and StatusBars. Elements with a DockPanel can also be sized to fill all remaining space within the control.
WRAP PANEL: A wrap panel can be used when changing the size of the window. When window size is changing the controls are automatically resized as per the window size.

Example on GRID with one row and two columns along with gridsplitter:
Open WPF application project
Type below code inside of grid tags and execute the project

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="d:\pic1.jpg" Stretch="Fill"/>
<GridSplitter Width="3" Background="Yellow"/>
<Image Source="d:\pic2.jpg" Stretch="Fill" Grid.Row="0" Grid.Column="1"/>       
</Grid>

Example on wrap panel along with the concept of nested layout managers:

Open WPF application project.
Change the open grid tag as follows and execute the project

private void grid1_loaded(object sender, RoutedEventArgs e)
{
    WrapPanel w = new WrapPanel();
    string[] x = System.IO.Directory.GetFiles("d:\\imges", "*.jpg");
    for (int i = 0; i < x.Length; i++)
    {
        Image y = new Image();
        y.Source = new BitmapImage(new Uri(x[i]));
        y.Width = 100;
        y.Height = 100;
        w.Children.Add(y);
    }
    grid1.Children.Add(w);
}

Working with Brushes: WPF supports 3 types of brushes.
1. SolidColorBrush: Solidcolor brush fills only one color in the controls.
2. Gradient Brush: Gradient brush can fill multiple colors in the controls. Gradient brushes are of two types:
LinearGradient Brush
RadialGradient Brush
3. Image Brush: It can fill images in the controls. For example images within the names.

Example on canvas with brushes:

Open WPF application project
Replace grid tag with canvas tag and type as follows inside of canvas tags and execute the project

<Canvas>
<Ellipse Width="200" Height="200" Stroke="Black" StrokeThickness="5">            
<Ellipse.Fill>
<SolidColorBrush Color="Green" />                
</Ellipse.Fill>
</Ellipse>
<Ellipse Width="200" Height="200" Stroke="red" StrokeThickness="5" Canvas.Left="205">            
<Ellipse.Fill>
<LinearGradientBrush>
<GradientStop Offset=".3" Color="Green"/>
<GradientStop Offset=".4" Color="White"/>
<GradientStop Offset=".7" Color="Orange"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Width="80" Height="80" Canvas.Left="420" Canvas.Top="90" Stroke="Gold" StrokeThickness="3">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Offset=".3" Color="DarkBlue"/>
<GradientStop Offset=".4" Color="HotPink"/>
<GradientStop Offset=".5" Color="Brown"/>
</RadialGradientBrush>
</Ellipse.Fill> 
</Ellipse>        
</Canvas>

Example on image brush:
Open WPF application project
Replace grid with canvas
Write as follows inside of the canvas and execute

 <Canvas>
<TextBlock Text="WPF" FontSize="200" FontFamily="Calibri" >            
<TextBlock.Foreground>
<ImageBrush ImageSource="d:\pic.jpg"></ImageBrush>
</TextBlock.Foreground>
</TextBlock>
</Canvas>

Working with WPF animation:

Animation is a concept of changing the position or changing the angle of an object continuously. In windows forms application projects to execute some logic continuously we require timer control. WPF is not having any control like timer. <StoryBoard> is a predefined tag, which works like a timer control. <StoryBoard> tag must be a part of <BeginStoryBoard> tag. WPF supports property based animations. To work with animations WPF introduced DoubleAnimation, ColorAnimation, etc.. concepts

Standard syntax of a WPF animation program:

<Window>        
<Canvas>
<controlTag>
<controlTag.Triggers>
<EventTrigger>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</controlTag.Triggers>
</controlTag>
</Canvas>
</Window>