Introduction to Windows Presentation Foundation (WPF)

1. Introduction to Windows Presentation Foundation (WPF) Dr. Frank McCown COMP 445 – GUI Programming

2. WPF History • Work began in early 2000’s by Microsoft under code name “Avalon” • Effort to provide a clearer separation between the interface and business logic • Avalon renamed WPF in July 2005 • WPF released in 2006 as part of .NET Framework 3.0 • Silverlight (released in 2007) is a subset of WPF • Windows Phone 7 (released in 2010) uses Silverlight or XNA to write apps http://channel9.msdn.com/posts/Charles/Michael-Wallent-Advent-and-Evolution-of-WPF/ http://www.eweek.com/c/a/Windows/Microsoft-Gives-Avalon-Indigo-Official-Names/

3. WPF Features • Works on top of DirectX to provide more advanced UI features • Support for 2D and 3D graphics, audio, and video • GUI appearance and content manipulated with XAML • WPF controls can be embedded in Windows Forms app and vice versa • Uses vector-based graphics for resolution independence • WPF apps can stand alone or run in Internet Explorer

4. Bringing it all together… http://windowsclient.net/wpf/white-papers/when-to-adopt-wpf.aspx

5. Extensible Application Markup Language (XAML) • Pronounced “zammel” • XML-based markup language for defining and arranging GUI controls • Can be manually generated/edited or edited by Visual Studio

6. Example XAML Document Window1.xaml <Window x:Class="WPF_HelloWindows.Window1” xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Hello WPF" Height="150" Width="250"> <Grid Background="AntiqueWhite" > <Label Name="label1"VerticalAlignment="Center" HorizontalAlignment="Center">Hello, WPF!</Label> </Grid> </Window>

7. Control Layout • Windows Forms: Set absolute (x,y) position • WPF: Set relative position in its layout container • Controls grow/shrink as window grows/shrinks • Control properties: • Width, Height • MinWidth, MinHeight, MaxWidth, MaxHeight • Margin: space around control’s edges (L,T,R,B) • HorizontalAlignment(Left, Center, Right, or Stretch) • VerticalAlignment (Top, Center, Bottom, or Stretch)

8. Alignment Introduction to WPF Layout by Christian Moser http://www.wpftutorial.net/LayoutProperties.html

9. Padding and Margin • The Margin is the extra space around the control. • The Padding is extra space inside the control. • The Padding of an outer control is the Margin of an inner control. Introduction to WPF Layout by Christian Moser http://www.wpftutorial.net/LayoutProperties.html

10. Common Layouts • Grid • Canvas • StackPanel • DockPanel • WrapPanel

11. Grid Layout Layout is defined by a grid of rows and columns with elements placed in cells. Grid Panel by Christian Moser http://www.wpftutorial.net/GridLayout.html

12. Canvas Layout Elements are placed in relation to the distance from the top and left edges of the Canvas. Canvas Panel by Christian Moser http://www.wpftutorial.net/Canvas.html

13. StackPanel Layout Elements are arranged in a single column or row. StackPanel by Christian Moser http://www.wpftutorial.net/StackPanel.html

14. DockPanel Layout Elements are positioned based on the edge they are docked to. Dock Panel by Christian Moser http://www.wpftutorial.net/DockPanel.html

15. WrapPanel Layout A wrapping StackPanel where elements are wrapped to the next row or column. Wrap Panel by Christian Moser http://www.wpftutorial.net/WrapPanel.html

16. Event Handling <Button Height="23" Margin="78,12,78,0" Name="button1"VerticalAlignment="Top" Click="button1_Click">Press Me</Button> // Code from Windows1.xaml.cs public partial class Window1 : Window { public Window1() { InitializeComponent(); } private void button1_Click(object sender, RoutedEventArgse) { label1.Content = "Button pressed!"; } }

17. Event Routing • All WPF events are routed events • Can travel up (from child to parent) • Can travel down (from parent to child) • Three types of routed events • Direct events: Don’t travel up or down • Bubbling events: Travel up (Source to Window) • Tunneling events: Travel down (top of containment hierarchy to Source)

18. Bubbling Event Example <GroupBox Name="myGroupBox" Header="Bubbling Example“ MouseLeftButtonUp="MyCallback"> <Label Name="myLabel" MouseLeftButtonUp=“MyCallback">Click Me</Label> </GroupBox> private void MyCallback(object sender, MouseButtonEventArgse) {// Label notified of event first, then GroupBox } Bubbling event

19. Tunneling Event Example <GroupBox Name="myGroupBox" Header="Bubbling Example“ PreviewMouseLeftButtonUp="Tunneling"> <Label Name="myLabel" PreviewMouseLeftButtonUp="Tunneling">Click Me</Label> </GroupBox> private void Tunneling(object sender, MouseButtonEventArgs e) {// GroupBox notified of event first, then Label } Tunneling event

20. Commands • Any action or task that may be triggered by different user interactions • Example: File  Exit from the menu and Exit button may both need to execute the same command • Commands can better synchronize a tasks’ availability • Example: If copy command requires text to be highlighted, all controls using this command can be disabled if no text is highlighted • Some common built-in commands: New, Open, Save, Close, Cut, Copy, Paste • Can create your own custom commands

21. Command Example <Window x:Class="WPF_HelloWindows.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Hello WPF" Height="150" Width="250"> <Window.CommandBindings> <CommandBinding Command="Close" Executed="closeCommand_Executed" /> </Window.CommandBindings> <Grid Background="AntiqueWhite" > <Button Height="23" Margin=“80,0,80,14" Name="button1" VerticalAlignment="Bottom“ Command="Close">Press Me</Button> <Menu Name="menu1" Height="23"VerticalAlignment="Top"> <MenuItem Header="File" > <MenuItem Header="Exit" Command="Close"/> </MenuItem> </Menu> </Grid> </Window> Called by Menu and Button

22. Styles • WPF style is a collection of reusable property-value & event-handler definitions • Concept is similar to style sheets for HTML • Same Style might be applied to different types of controls • Styles are WPF resources • Reusable objects defined for entire application

23. Styles Example 1 <Window.Resources> <Style x:Key="WashedOut" TargetType="{x:TypeFrameworkElement}" > <Setter Property="Opacity" Value="0.5" /> </Style> </Window.Resources> <Slider Name="button1" Content="Button" Style="{StaticResourceWashedOut}" /> <Slider Name="label1"Content="Label" Style="{StaticResourceWashedOut}" /> <Slider Name="checkBox1" Content="CheckBox" Style="{StaticResourceWashedOut}" /> Same style applied to different controls

24. Styles Example 2 <Window.Resources> <Style x:Key="SliderStyle"> <Setter Property="Slider.Minimum" Value="0" /> <Setter Property="Slider.Maximum" Value="255" /> <Setter Property="Slider.IsSnapToTickEnabled" Value="True" /> <EventSetter Event="Slider.ValueChanged" Handler="slider_ValueChanged" /> </Style> </Window.Resources> <Slider Name="redSlider" Style="{StaticResourceSliderStyle}" /> <Slider Name="greenSlider" Style="{StaticResourceSliderStyle}" /> <Slider Name="blueSlider" Style="{StaticResourceSliderStyle}" />

25. Control Templates • Appearance of WPF controls determined by a control template • Control template is a hierarchy of visual elements • All visual controls use a default control template • Changes to a control’s control template can redefine the appearance of the control without changing its functionality Button | Border | ContentPresenter | String Displays single element

26. Control Template Example <Window.Resources> <ControlTemplate x:Key=“MyButtonTemplate"TargetType="Button"> <Border Name="Border"BorderThickness="2"CornerRadius="10" BorderBrush="BlueViolet"> <ContentPresenterHorizontalAlignment="Center" VerticalAlignment="Center" TextBlock.FontWeight="Bold" TextBlock.Foreground="Firebrick" Content="{TemplateBinding Content}" /> </Border> </ControlTemplate> </Window.Resources> <Button Name="button1" Width="100" Height="30">Button 1</Button> <Button Name="button2" Width="100" Height="30" Template="{StaticResourceMyButtonTemplate}"> Button 2</Button>

27. Triggers • Triggers can be used to change a control’s appearance when it enters a certain state • Can be used with Styles or Control Templates • Must be defined in Style.Triggers or ControlTemplate.Triggers

28. Style with Trigger Example <Window.Resources> <Style x:Key="MyButtonStyle" > <Setter Property="Button.Opacity" Value="0.5" /> <Style.Triggers> <Trigger Property="Button.IsMouseOver" Value="True"> <Setter Property="Button.Opacity" Value="1" /> </Trigger> </Style.Triggers> </Style> </Window.Resources> <Button Name="mybutton"Width="100" Height="30" Style="{StaticResourceMyButtonStyle}">Push Me</Button>

29. Control Template with Trigger Example <Window.Resources> <ControlTemplate x:Key=“MyButtonTemplate"TargetType="Button"> <Border Name="Border"BorderThickness="2"CornerRadius="10" BorderBrush="BlueViolet"> <ContentPresenterHorizontalAlignment="Center" VerticalAlignment="Center" TextBlock.FontWeight="Bold" TextBlock.Foreground="Firebrick" Content="{TemplateBinding Content}" /> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <SetterTargetName="Border" Property="Background" Value="LightBlue" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Window.Resources> <Button Name="button2" Width="100" Height="30" Template="{StaticResourceMyButtonTemplate}">Button 2</Button> trigger