copyright ©2004 virtusa corporation | confidential windows presentation foundation ruwan wijesinghe
TRANSCRIPT
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
3Copyright ©2004 Virtusa Corporation | CONFIDENTIAL
Architecture
Managed Unmanaged
4Copyright ©2004 Virtusa Corporation | CONFIDENTIAL
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
5Copyright ©2004 Virtusa Corporation | CONFIDENTIAL
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>
6Copyright ©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
7Copyright ©2004 Virtusa Corporation | CONFIDENTIAL
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>
8Copyright ©2004 Virtusa Corporation | CONFIDENTIAL
Using StackPanel Layout 2
<Window x:Class="WindowsApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
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>
9Copyright ©2004 Virtusa Corporation | CONFIDENTIAL
Using Grid Layout 1
<Window x:Class="WindowsApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
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>
10Copyright ©2004 Virtusa Corporation | CONFIDENTIAL
Using Grid Layout 2
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="0.5*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.25*" />
<ColumnDefinition Width="0.5*" />
<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>
11Copyright ©2004 Virtusa Corporation | CONFIDENTIAL
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>
12Copyright ©2004 Virtusa Corporation | CONFIDENTIAL
Events
<Window x:Class="WindowsApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
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>
13Copyright ©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"; } }
}
14Copyright ©2004 Virtusa Corporation | CONFIDENTIAL
Navigation Application – Hello World
<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="60,80,80,0" Height="35" VerticalAlignment="Top"
FontSize="30"> Hello World </TextBlock>
</Grid>
</Page>
15Copyright ©2004 Virtusa Corporation | CONFIDENTIAL
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));}
16Copyright ©2004 Virtusa Corporation | CONFIDENTIAL
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));
}
17Copyright ©2004 Virtusa Corporation | CONFIDENTIAL
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>
18Copyright ©2004 Virtusa Corporation | CONFIDENTIAL
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>
19Copyright ©2004 Virtusa Corporation | CONFIDENTIAL
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>
20Copyright ©2004 Virtusa Corporation | CONFIDENTIAL
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; }
21Copyright ©2004 Virtusa Corporation | CONFIDENTIAL
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")); }
}}
22Copyright ©2004 Virtusa Corporation | CONFIDENTIAL
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; }
23Copyright ©2004 Virtusa Corporation | CONFIDENTIAL
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
24Copyright ©2004 Virtusa Corporation | CONFIDENTIAL
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>
25Copyright ©2004 Virtusa Corporation | CONFIDENTIAL
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>
26Copyright ©2004 Virtusa Corporation | CONFIDENTIAL
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; }
27Copyright ©2004 Virtusa Corporation | CONFIDENTIAL
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; }
28Copyright ©2004 Virtusa Corporation | CONFIDENTIAL
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>
29Copyright ©2004 Virtusa Corporation | CONFIDENTIAL
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>
30Copyright ©2004 Virtusa Corporation | CONFIDENTIAL
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>
31Copyright ©2004 Virtusa Corporation | CONFIDENTIAL
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>
32Copyright ©2004 Virtusa Corporation | CONFIDENTIAL
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>