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

2 Copyright ©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

3 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Architecture Managed Unmanaged

4 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Application Types Windows Applications Similar to Windows Forms Application. Run is a separate window Navigation Application Similar to web applications. Page based. Can navigate back and forth. Browser Based Navigation Executed 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 Navigation Executed in a Navigation windows. Used for installed applications

5 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Hello World from XAML < Window x:Class =“ HelloApplication.Window1 " xmlns =" " xmlns:x =" " Title =" Hello Window " Height =“ 200 " Width =" 300 “ > Hello World

6 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL 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

7 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Using StackPanel Layout < Window x:Class =“ HelloApplication.Window1 " xmlns =" " xmlns:x =" " Title =" Hello Window " Height =“ 200 " Width =" 300 “ > Hello World Click Here

8 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Using StackPanel Layout 2 <Window x:Class="WindowsApplication1.Window1" xmlns=" xmlns:x=" Title="WindowsApplication12" Height=“200" Width="300“ > Hello World Click Here

9 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Using Grid Layout 1 <Window x:Class="WindowsApplication1.Window1" xmlns=" xmlns:x=" Title="WindowsApplication12" Height="160" Width="300" > Hello World Click Here

10 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Using Grid Layout 2 Hello World Button 1

11 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Using Dock Panel My Heading Here <TextBlock Background="Beige" DockPanel.Dock="Left" Width="60px" TextWrapping="Wrap"> Some Text to be in the left panel of the window Hello World Button 1

12 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Events <Window x:Class="WindowsApplication1.Window1" xmlns=" xmlns:x=" Title="WindowsApplication12" Height="154" Width="320" > <TextBlock Height="20" Margin="131,24,58,0" Name="textBlock1" VerticalAlignment="Top"> Some Text <Button Height="23" Margin="105,0,109,34" Name="button1" VerticalAlignment="Bottom" Click="Button1_Click"> Button

13 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Events – Code Behind namespace WindowsApplication12 { public partial class Window1 : Window { public Window1() { InitializeComponent(); } void Button1_Click (object sender, EventArgs e) { textBlock1.Text = "Hello World"; }

14 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Navigation Application – Hello World <Page x:Class="WindowsApplication1.Page1" xmlns=" xmlns:x=" Title="Page1" > <TextBlock Margin="60,80,80,0" Height="35" VerticalAlignment="Top" FontSize="30"> Hello World

15 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Navigations <Page x:Class="WindowsApplication1.Page1" xmlns=" xmlns:x=" Title="Page1" > Go to: Page1 <Button Margin="100,150,0,0" Height="20" Width=“100" Name="button1" Click="Navigate_Click" HorizontalAlignment="Left“ VerticalAlignment="Top"> Go to Page 2 void Navigate_Click(object sender, EventArgs e) { this.NavigationService.Navigate(new Uri("Page2.xaml", UriKind.Relative)); }

16 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Navigation in a Frame <Page x:Class="WindowsApplication1.Page1" xmlns=" xmlns:x=" Title="Page1" > <Button Margin="100,40,120,0" Height="25" Name="button1" Click="Navigate_Click" VerticalAlignment="Top" Width="80">Button <Frame BorderBrush="#FF000000" BorderThickness="1,1,1,1" Margin="30,90,30,30" Name="frame1" FixedPage.NavigateUri="Page.xaml" /> void Navigate_Click(object sender, EventArgs e) { frame1.Navigate (new Uri("Page2.xaml", UriKind.Relative)); }

17 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Text Layout <TextBlock Margin="33,23,0,80" TextWrapping="Wrap" TextAlignment="Justify" HorizontalAlignment="Left" Width=" "> Page 2 Click back arrow in the navigation window or click on this link to go back to the previous window

18 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Control Templates <Button Margin="50,50,0,0" Width="100" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"> <TextBlock Name="ButtonText" Foreground ="Yellow" VerticalAlignment="Center" HorizontalAlignment="Center" > Button 1

19 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Control Templates as Resources <TextBlock Name="ButtonText" VerticalAlignment="Center" HorizontalAlignment ="Center" Foreground ="Yellow"> Button 1 <Button Template="{StaticResource MyBtnTemplate}" Margin="50,50,0,0" Width="100" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top">

20 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Data Binding <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}" /> public Window1() { InitializeComponent(); MyItem1 item = new MyItem1(1,"Ruwan","AAA"); this.DataContext = item; }

21 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL using System.Collections.ObjectModel; namespace WindowsApplication1 { class MyItemCollection: ObservableCollection { public MyItemCollection() { this.Add(new MyItem1(1,"Ruwan","AAA")); this.Add(new MyItem1(2,"Saman","BBB")); this.Add(new MyItem1(3,"Vimal","CCC")); }

22 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Data Binding to Collections : public Window1() { InitializeComponent(); ObservableCollection items = new ObservableCollection (); items.Add(new MyItem1(1,"Ruwan","AAA")); items.Add(new MyItem1(2,"Saman","BBB")); items.Add(new MyItem1(3,"Vimal","CCC")); this.DataContext = items; }

23 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Declarative Data Binding <Window x:Class="WindowsApplication14.Window1" xmlns=" xmlns:x=" xmlns:my="clr-namespace:WindowsApplication1" Title="WindowsApplication14" Height=“400" Width="450" > <ListBox ItemsSource="{Binding Source={StaticResource MyCollection}}" Width="120" Height="50"> This code adds the values return by ToString() method of the items in MyItemCollection to the ListBox

24 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Declarative Data Binding using Data Templates : <ListBox ItemsSource="{Binding Source={StaticResource MyCollection}}" Width="120" Height="50">

25 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Built-in Command

26 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Custom Commands <CommandBinding Command="{x:Static my:Window1.CustCommand}" Executed=“CustCmdExecuted" CanExecute=“CustCmdCanExecute" /> 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; }

27 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Hot-Keys <KeyBinding Command="{x:Static my:Window1.CustCommand}" Modifiers="Control" Key="R" CommandParameter="InputGesture"/> <CommandBinding Command="{x:Static my:Window1.CustCommand}" Executed=“CustCmdExecuted" CanExecute=“CustCmdCanExecute" /> 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; }

28 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Animations <DoubleAnimation Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />

29 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Styles Button 1

30 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Named Styles <Button Style="{StaticResource Style2}" Width="75" Height="30" Margin="100,50,0,0" HorizontalAlignment="Left" VerticalAlignment="Top">Button 1 Button 1

31 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Triggers <Button Style="{StaticResource Triggers}" Width="75" Height="30" Margin="100,50,0,0" HorizontalAlignment="Left" VerticalAlignment="Top">Button 1

32 Copyright ©2004 Virtusa Corporation | CONFIDENTIAL Data Triggers <ListBox ItemsSource="{Binding Source={StaticResource MyCollection}}" Width="120" Height="50">