introduction to windows presentation foundation (wpf)
DESCRIPTION
Introduction to Windows Presentation Foundation (WPF). Dr. Frank McCown COMP 445 – GUI Programming. 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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/1.jpg)
Introduction to Windows Presentation Foundation (WPF)
Dr. Frank McCownCOMP 445 – GUI Programming
![Page 2: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/2.jpg)
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/
![Page 3: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/3.jpg)
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
![Page 4: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/4.jpg)
Bringing it all together…
http://windowsclient.net/wpf/white-papers/when-to-adopt-wpf.aspx
![Page 5: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/5.jpg)
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
![Page 6: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/6.jpg)
Example XAML Document
<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>
Window1.xaml
![Page 7: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/7.jpg)
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)
![Page 8: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/8.jpg)
Alignment
Introduction to WPF Layout by Christian Moserhttp://www.wpftutorial.net/LayoutProperties.html
![Page 9: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/9.jpg)
Padding and Margin
Introduction to WPF Layout by Christian Moserhttp://www.wpftutorial.net/LayoutProperties.html
• 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.
![Page 10: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/10.jpg)
Common Layouts
• Grid• Canvas• StackPanel• DockPanel• WrapPanel
![Page 11: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/11.jpg)
Grid Layout
Grid Panel by Christian Moserhttp://www.wpftutorial.net/GridLayout.html
Layout is defined by a grid of rows and columns with elements placed in cells.
![Page 12: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/12.jpg)
Canvas Layout
Canvas Panel by Christian Moserhttp://www.wpftutorial.net/Canvas.html
Elements are placed in relation to the distance from the top and left edges of the Canvas.
![Page 13: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/13.jpg)
StackPanel Layout
StackPanel by Christian Moserhttp://www.wpftutorial.net/StackPanel.html
Elements are arranged in a single column or row.
![Page 14: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/14.jpg)
DockPanel Layout
Dock Panel by Christian Moserhttp://www.wpftutorial.net/DockPanel.html
Elements are positioned based on the edge they are docked to.
![Page 15: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/15.jpg)
WrapPanel Layout
Wrap Panel by Christian Moserhttp://www.wpftutorial.net/WrapPanel.html
A wrapping StackPanel where elements are wrapped to the next row or column.
![Page 16: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/16.jpg)
Event Handling<Button Height="23" Margin="78,12,78,0" Name="button1" VerticalAlignment="Top" Click="button1_Click">Press Me</Button>
// Code from Windows1.xaml.cspublic partial class Window1 : Window { public Window1() { InitializeComponent(); }
private void button1_Click(object sender, RoutedEventArgs e) { label1.Content = "Button pressed!"; }}
![Page 17: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/17.jpg)
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)
![Page 18: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/18.jpg)
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, MouseButtonEventArgs e){ // Label notified of event first, then GroupBox}
Bubbling event
![Page 19: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/19.jpg)
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
![Page 20: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/20.jpg)
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
![Page 21: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/21.jpg)
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
![Page 22: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/22.jpg)
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
![Page 23: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/23.jpg)
Styles Example 1<Window.Resources> <Style x:Key="WashedOut" TargetType="{x:Type FrameworkElement}" > <Setter Property="Opacity" Value="0.5" /> </Style></Window.Resources>
<Slider Name="button1" Content="Button" Style="{StaticResource WashedOut}" /><Slider Name="label1" Content="Label" Style="{StaticResource WashedOut}" /><Slider Name="checkBox1" Content="CheckBox" Style="{StaticResource WashedOut}" />
Same style applied to
different controls
![Page 24: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/24.jpg)
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="{StaticResource SliderStyle}" /><Slider Name="greenSlider" Style="{StaticResource SliderStyle}" /><Slider Name="blueSlider" Style="{StaticResource SliderStyle}" />
![Page 25: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/25.jpg)
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
![Page 26: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/26.jpg)
Control Template Example<Window.Resources> <ControlTemplate x:Key=“MyButtonTemplate" TargetType="Button"> <Border Name="Border" BorderThickness="2" CornerRadius="10" BorderBrush="BlueViolet"> <ContentPresenter HorizontalAlignment="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="{StaticResource MyButtonTemplate}"> Button 2</Button>
![Page 27: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/27.jpg)
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
![Page 28: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/28.jpg)
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="{StaticResource MyButtonStyle}">Push Me</Button>
![Page 29: Introduction to Windows Presentation Foundation (WPF)](https://reader030.vdocuments.net/reader030/viewer/2022012903/56815ed4550346895dcd6bc5/html5/thumbnails/29.jpg)
Control Template with Trigger Example <Window.Resources> <ControlTemplate x:Key=“MyButtonTemplate" TargetType="Button"> <Border Name="Border" BorderThickness="2" CornerRadius="10" BorderBrush="BlueViolet"> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" TextBlock.FontWeight="Bold" TextBlock.Foreground="Firebrick" Content="{TemplateBinding Content}" /> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="Border" Property="Background" Value="LightBlue" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate></Window.Resources>
<Button Name="button2" Width="100" Height="30" Template="{StaticResource MyButtonTemplate}">Button 2</Button>
trigger