Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Windows Presentation Foundation Ruwan Wijesinghe

Copyright ©2004 Virtusa Corporation | CONFIDENTIAL

Windows Presentation Foundation

Ruwan Wijesinghe

2Copyright ©2004 Virtusa Corporation | CONFIDENTIAL

Introduction

• Windows Presentation Foundation uses XAML, a declarative markup language

• WPF applications can be• Completely developed using XAML

• Completely developed using Code

• Can be a mix of that(can separate presentation and presentation control logic, XAML for presentation and code for logic)

• Provides a uniform programming model for

• 2D and 3D graphics

• Multimedia• Documents

• Provides resolution independent graphics

• Based on managed code


Architecture

Managed Unmanaged


Application Types

• Windows ApplicationsSimilar to Windows Forms Application. Run is a separate window

• Navigation ApplicationSimilar to web applications. Page based. Can navigate back and

forth.

• Browser Based NavigationExecuted in Browser. Can used to develop internet and intranet based applications. Needs WinFX or WPF/E (Windows Presentation Foundation Everywhere) installed in client machine.

• Navigation Windows based NavigationExecuted in a Navigation windows. Used for installed applications


Hello World from XAML

<Window x:Class=“HelloApplication.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Hello Window" Height=“200" Width="300“ > <Canvas> <TextBlock Canvas.Top="1cm" Canvas.Left="1cm" FontSize="40">

Hello World

</TextBlock> </Canvas></Window>


Layout

• Layout controls are used in XAML to place the controls in desired positions

• Position and the size of the controls, when window is being resized is determined by the layout being used

• The following layout control are widely used in XAML

• Grid

• Canvas

• DockPanel

• StackPanel


Using StackPanel Layout

<Window x:Class=“HelloApplication.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title=" Hello Window" Height=“200" Width="300“ >

<StackPanel>

<TextBlock HorizontalAlignment="Left" FontSize="20">Hello World</TextBlock>

<Button HorizontalAlignment="Left" Width="2cm">Click Here</Button>

</StackPanel>

</Window>


Using StackPanel Layout 2

<Window x:Class="WindowsApplication1.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"


Title="WindowsApplication12" Height=“200" Width="300“ >

<StackPanel Orientation="Horizontal">

<TextBlock FontSize="20">Hello World</TextBlock>

<Button Width="70px" Height="25px" Margin="10,0,0,0" VerticalAlignment="Top">

Click Here

</Button>

</StackPanel>

</Window>


Using Grid Layout 1




Title="WindowsApplication12" Height="160" Width="300" >

<Grid>

<TextBlock Height="25" FontSize="20" Margin="90,20,0,0">

Hello World

</TextBlock>

<Button Height="25" Margin="100,80,100,0" >

Click Here

</Button>

</Grid>

</Window>


Using Grid Layout 2

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="0.5*" />

<RowDefinition Height="0.5*" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="0.25*" />



</Grid.ColumnDefinitions>

<TextBlock Grid.Row="0" Grid.Column="1" FontSize="20" VerticalAlignment="Center">

Hello World

</TextBlock>

<Button Grid.Row ="1" Grid.Column ="0" Height="20"> Button 1 </Button>

</Grid>


Using Dock Panel

<DockPanel>

<Border Background="Yellow" DockPanel.Dock="Top" Height="30px" >

<TextBlock HorizontalAlignment="Center"> My Heading Here </TextBlock>

</Border>

<TextBlock Background="Beige" DockPanel.Dock="Left" Width="60px"

TextWrapping="Wrap">

Some Text to be in the left panel of the window

</TextBlock>

<StackPanel>

<TextBlock> Hello World </TextBlock>

<Button HorizontalAlignment="Left"> Button 1 </Button>

</StackPanel>

</DockPanel>


Events




Title="WindowsApplication12" Height="154" Width="320" >

<Grid>

<TextBlock Height="20" Margin="131,24,58,0" Name="textBlock1"

VerticalAlignment="Top"> Some Text </TextBlock>

<Button Height="23" Margin="105,0,109,34" Name="button1"

VerticalAlignment="Bottom" Click="Button1_Click"> Button </Button>

</Grid>

</Window>


Events – Code Behind

namespace WindowsApplication12{ public partial class Window1 : Window

{

public Window1() { InitializeComponent(); }

void Button1_Click (object sender, EventArgs e) { textBlock1.Text = "Hello World"; } }

}


Navigation Application – Hello World

<Page x:Class="WindowsApplication1.Page1"



Title="Page1" >

<Grid>

<TextBlock Margin="60,80,80,0" Height="35" VerticalAlignment="Top"

FontSize="30"> Hello World </TextBlock>

</Grid>

</Page>


Navigations

<Page x:Class="WindowsApplication1.Page1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Page1" > <Grid> <TextBlock Margin="90,80,50,0" Height="35" VerticalAlignment="Top" FontSize="20"> Go to: <Hyperlink NavigateUri="Page2.xaml">Page1</Hyperlink> </TextBlock> <Button Margin="100,150,0,0" Height="20" Width=“100" Name="button1" Click="Navigate_Click" HorizontalAlignment="Left“ VerticalAlignment="Top">

Go to Page 2 </Button> </Grid></Page>

void Navigate_Click(object sender, EventArgs e){ this.NavigationService.Navigate(new Uri("Page2.xaml", UriKind.Relative));}


Navigation in a Frame

<Page x:Class="WindowsApplication1.Page1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Page1" > <Grid> <Button Margin="100,40,120,0" Height="25" Name="button1"

Click="Navigate_Click" VerticalAlignment="Top" Width="80">Button</Button> <Frame BorderBrush="#FF000000" BorderThickness="1,1,1,1"

Margin="30,90,30,30" Name="frame1" FixedPage.NavigateUri="Page.xaml" /> </Grid></Page>

void Navigate_Click(object sender, EventArgs e)

{

frame1.Navigate (new Uri("Page2.xaml", UriKind.Relative));

}


Text Layout

<TextBlock Margin="33,23,0,80" TextWrapping="Wrap" TextAlignment="Justify"

HorizontalAlignment="Left" Width="200.576666666667">

<Span FontSize="30">Page 2</Span>

<Span FontSize="15">

<LineBreak/>

<LineBreak/>

<Run xml:space="preserve">

Click back arrow in the navigation window or click on

</Run>

<Hyperlink NavigateUri="Page1.xaml">this link</Hyperlink>

<Run xml:space="preserve"> to go back to the previous window</Run>

</Span>

</TextBlock>


Control Templates

<Grid>

<Button Margin="50,50,0,0" Width="100" Height="50"

HorizontalAlignment="Left" VerticalAlignment="Top">

<Button.Template>

<ControlTemplate>

<Grid>

<Ellipse Width="100" Height="50" Fill="Green"></Ellipse>

<TextBlock Name="ButtonText" Foreground ="Yellow"

VerticalAlignment="Center" HorizontalAlignment="Center" >

Button 1

</TextBlock>

</Grid>

</ControlTemplate>

</Button.Template>

</Button>

</Grid>


Control Templates as Resources

<Grid>

<Grid.Resources>

<ControlTemplate x:Key="MyBtnTemplate" TargetType="{x:Type Button}">

<Grid>

<Ellipse Width="100" Height="50" Fill="Green"></Ellipse>

<TextBlock Name="ButtonText" VerticalAlignment="Center"

HorizontalAlignment ="Center" Foreground ="Yellow">

Button 1

</TextBlock>

</Grid>

</ControlTemplate>

</Grid.Resources>

<Button Template="{StaticResource MyBtnTemplate}"

Margin="50,50,0,0" Width="100" Height="50"

HorizontalAlignment="Left" VerticalAlignment="Top">

</Button>

</Grid>


Data Binding

<Grid> <Label Height="20" HorizontalAlignment="Left" Margin=“50,10,0,0"

Name="label1" VerticalAlignment="Top" Width="130" Content="{Binding Path=Name}" />

<TextBox Margin=“50,50,120,70" Name="textBox1“ Text="{Binding Path=Prop1}" />

</Grid>

public Window1() { InitializeComponent(); MyItem1 item = new MyItem1(1,"Ruwan","AAA"); this.DataContext = item; }


using System.Collections.ObjectModel;

namespace WindowsApplication1{ class MyItemCollection: ObservableCollection<MyItem1> {

public MyItemCollection() { this.Add(new MyItem1(1,"Ruwan","AAA")); this.Add(new MyItem1(2,"Saman","BBB")); this.Add(new MyItem1(3,"Vimal","CCC")); }

}}


Data Binding to Collections

<Grid> <Grid.Resources> <DataTemplate DataType="{x:Type my:MyItem1}"> <TextBlock FontSize="10pt"> <TextBlock Text="{Binding Name}"/>: <TextBlock Text="{Binding Prop1}"/> </TextBlock> </DataTemplate> </Grid.Resources> <ListBox ItemsSource="{Binding}" Width="120" Height="50“ /></Grid>

public Window1() { InitializeComponent(); ObservableCollection<MyItem1> items = new ObservableCollection<MyItem1>(); items.Add(new MyItem1(1,"Ruwan","AAA")); items.Add(new MyItem1(2,"Saman","BBB")); items.Add(new MyItem1(3,"Vimal","CCC")); this.DataContext = items; }


Declarative Data Binding

<Window x:Class="WindowsApplication14.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:my="clr-namespace:WindowsApplication1" Title="WindowsApplication14" Height=“400" Width="450" > <Grid> <Grid.Resources>

<my:MyItemCollection x:Key="MyCollection" /> </Grid.Resources> <ListBox ItemsSource="{Binding Source={StaticResource MyCollection}}" Width="120" Height="50"> </ListBox> </Grid></Window>

This code adds the values return by ToString() method of the items in MyItemCollection to the ListBox


Declarative Data Binding using Data Templates

<Grid> <Grid.Resources> <my:MyItemCollection x:Key="MyCollection" /> <DataTemplate DataType="{x:Type my:MyItem1}"> <TextBlock FontSize="10pt"> <TextBlock Text="{Binding Name}"/>: <TextBlock Text="{Binding Prop1}"/> </TextBlock> </DataTemplate> </Grid.Resources> <ListBox ItemsSource="{Binding Source={StaticResource MyCollection}}"

Width="120" Height="50"> </ListBox> </Grid>


Built-in Command

<DockPanel>

<MenuItem Header="Edit">

<MenuItem Command ="ApplicationCommands.Cut" />

<MenuItem Command ="ApplicationCommands.Copy" />

<MenuItem Command="ApplicationCommands.Paste" />

</MenuItem>

<Grid>

<TextBox Margin="0,0,0,0" />

</Grid>

</DockPanel>


Custom Commands

<Window.CommandBindings> <CommandBinding Command="{x:Static my:Window1.CustCommand}"

Executed=“CustCmdExecuted" CanExecute=“CustCmdCanExecute" /></Window.CommandBindings><DockPanel> <Menu DockPanel.Dock="Top"> <MenuItem Header="My Command" Command ="{x:Static my:Window1.CustCommand}" /> </Menu> <Grid></Grid></DockPanel>

public static RoutedCommand CustCommand = new RoutedCommand();

void CustCmdExecuted(object target, ExecutedRoutedEventArgs e) { MessageBox.Show(“My custom command has been invoked."); }

void CustCmdCanExecute(object sender, CanExecuteRoutedEventArgs e) { e.CanExecute = true; }


Hot-Keys

<Window.InputBindings> <KeyBinding Command="{x:Static my:Window1.CustCommand}" Modifiers="Control" Key="R" CommandParameter="InputGesture"/> </Window.InputBindings><Window.CommandBindings> <CommandBinding Command="{x:Static my:Window1.CustCommand}"

Executed=“CustCmdExecuted" CanExecute=“CustCmdCanExecute" /> </Window.CommandBindings>

public static RoutedCommand CustCommand = new RoutedCommand();

void CustCmdExecuted(object target, ExecutedRoutedEventArgs e) { MessageBox.Show(“My custom command has been invoked."); }

void CustCmdCanExecute(object sender, CanExecuteRoutedEventArgs e) { e.CanExecute = true; }


Animations

<Rectangle Name="MyRectangle" Width="100" Height="100" Fill="Blue"> <Rectangle.Triggers> <EventTrigger RoutedEvent="Rectangle.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="MyRectangle"

Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:5"

AutoReverse="True" RepeatBehavior="Forever" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Rectangle.Triggers></Rectangle>


Styles

<Window.Resources>

<Style TargetType="{x:Type Button}">

<Setter Property="Background" Value="Blue" />

<Setter Property="Foreground" Value="White" />

</Style>

</Window.Resources>

<Grid>

<Button Width="60" Height="30">Button 1</Button>

</Grid>


Named Styles

<Window.Resources> <Style TargetType="{x:Type Button}"> <Setter Property="Background" Value="Blue" /> <Setter Property="Foreground" Value="White" /> </Style> <Style x:Key="Style2" TargetType="{x:Type Button}"> <Setter Property="Background" Value="Green" /> <Setter Property="Foreground" Value="White" /> </Style> </Window.Resources>

<Grid> <Button Style="{StaticResource Style2}" Width="75" Height="30" Margin="100,50,0,0"

HorizontalAlignment="Left" VerticalAlignment="Top">Button 1</Button> <Button Width="75" Height="30" Margin="100,100,0,0" HorizontalAlignment="Left"

VerticalAlignment="Top">Button 1</Button> </Grid>


Triggers

<Window.Resources> <Style x:Key="Triggers“ TargetType="{x:Type Button}"> <Style.Triggers>

<Trigger Property="Button.IsMouseOver" Value="true"> <Setter Property = "Background" Value="Red"/> </Trigger> <Trigger Property="Button.IsPressed" Value="true"> <Setter Property = "Foreground" Value="Green"/> </Trigger>

</Style.Triggers> </Style></Window.Resources>

<Grid> <Button Style="{StaticResource Triggers}" Width="75" Height="30" Margin="100,50,0,0"

HorizontalAlignment="Left" VerticalAlignment="Top">Button 1</Button></Grid>


Data Triggers

<Grid> <Grid.Resources> <my:MyItemCollection x:Key="MyCollection" /> <Style TargetType="{x:Type ListBoxItem}"> <Style.Triggers> <DataTrigger Binding="{Binding Path=Prop1}" Value="BBB"> <Setter Property="Foreground" Value="Red" /> </DataTrigger> </Style.Triggers> </Style> </Grid.Resources> <ListBox ItemsSource="{Binding Source={StaticResource MyCollection}}"

Width="120" Height="50"> </ListBox></Grid>