1. Windows Presentation
Foundation
Max Knor
Developer Evangelist
Microsoft Austria
http://www.knor.net

2. Topics
Overview
XAML
Layout Panels
Controls
Dependency Objects & Routed Events
Styles, Templates & Resources
Data Binding

3. Demo
WPF Puzzle

4. Why WPF? Another UI Framework?
New Display Engine
Based on Direct3D  no window handles
Leverages Modern Hardware (GPUs)
Resolution Independence
Vectorgraphics  Scalable
Multimedia Integration
Controls + Documents + Video/Audio
New .NET based Development Concept
New class libraries
Seperated UI vs. Logic
XAML – XML based UI Specification language

5. Developer Designer Collaboration
Designer Developer

6. Topics
Overview
XAML
Layout Panels
Controls
Dependency Objects & Routed Events
Styles, Templates & Resources
Data Binding

7. XAML
Extensible Application Markup Language
Generic XML Object Instantiation
Not How – but What!
Creates Object Hierarchies
Used in
Windows Presentation Foundation
Windows Workflow Foundation

8. XAML vs. C#
<Button Background=quot;Redquot;>
Click Me!
</Button>
Button button1 = new Button();
button1.Content = quot;Click Me!quot;;
button1.Background = new SolidColorBrush(
Colors.Red);

9. XAML vs. C#
XML Namespaces <--> .NET Namespaces
XML Elements <--> .NET Objects
XML Attributes <--> .NET Object Properties

10. Demo
XAML

11. Topics
Overview
XAML
Layout Panels
Controls
Dependency Objects & Routed Events
Styles, Templates & Resources
Data Binding

12. WPF Positioning
Absolute Positioning
X / Y, Width / Height
Relative Positioning
NO X/Y, Width/Height
Margin
Alignment
<Button Margin=quot;20,10,20,10quot;>Hallo Welt</Button>

13. WPF Positioning - Alignment
HorizontalAlignment
Stretch, Left, Right, Center
VerticalAlignment
Stretch, Top, Center, Bottom
<Button HorizontalAlignment=quot;Stretchquot; <Button HorizontalAlignment=quot;Leftquot;
VerticalAlignment=quot;Stretchquot;> VerticalAlignment=quot;Bottomquot;>
Hallo Welt Hallo Welt
</Button> </Button>

14. Layout Controls
StackPanel
Underneath, side-by-side
WrapPanel
Same but with automatic wrapping
Canvas
X-,Y- Positions
DockPanel
Grid
...

15. Demo
Using Layout Controls

16. Topics
Overview
XAML
Dependency Objects & Routed Events
Layout Panels
Controls
Styles, Templates & Resources
Commands
Data Binding

17. Class Hierarchy

18. Simple Controls
• PasswordBox
• ScrollBar
• ProgressBar
• Slider
• TextBox
• RichTextBox

19. Content Controls
ScrollBarViewer
Button
ToolTip
RepeatButton
ToggleButton
UserControl
Window
CheckBox
NavigationWindow
RadioButton
Label
Frame
ListBoxItem
StatusBarItem

20. Demo
Content Controls

21. Headered Content Controls
Content Control plus header
Expander
MenuItem
GroupBox
TabItem
…

22. Items Controls
Container for multiple items (lists)
ListBox
ComboBox
Menu
ContextMenu
StatusBar
TreeView
TabControl
...

23. Demo
Listbox, Toolbar, Menu

24. Topics
Overview
XAML
Layout Panels
Controls
Dependency Objects & Routed Events
Styles, Templates & Resources
Data Binding

25. Dependency Properties
Values stored in a central dictionary
Instead of being stored in a private member
Can include additional metadata (like default value)
Manipulated by the WPF runtime
Databinding
Animation, Styles, etc…

26. Dependency Properties
public class MyDependencyObject : DependencyObject
{
public static readonly DependencyProperty
SomeStateProperty =
DependencyProperty.Register(quot;SomeStatequot;,
typeof(String), typeof(MyDependencyObject));
public string SomeState
{
get { return (string)this.GetValue(SomeStateProperty); }
set { this.SetValue(SomeStateProperty, value); }
}
}

27. Attached Properties
Store Properties of one control on another
one
<Grid>
<Button Grid.Column=“0quot; Grid.Row=quot;40quot;>
Click Me!
</Button>
</Grid>

28. Demo
Dependency Properties
Attached Properties

29. Routed Events
Preview Application
Preview Window
Tunneling
Bubbling
Preview Grid
Preview Button
Preview Canvas
Preview Ellipse

30. Routed Events (Attached Events)
“Collect” events at a higher hierarchy level
<Canvas Button.Click=“Button_Click”>
<Button>
Click Me!
</Button>
</Canvas>

31. Events
Create Routed Events
public static readonly RoutedEvent TapEvent =
EventManager.RegisterRoutedEvent(
quot;Tapquot;, RoutingStrategy.Bubble, typeof(RoutedEventHandler),
typeof(MyButtonSimple));
public event RoutedEventHandler Tap {
add { AddHandler(TapEvent, value); }
remove { RemoveHandler(TapEvent, value); }
}
Use RoutedEventArgs.Source instead of sender

32. Demo
Routed Events

33. Topics
Overview
XAML
Layout Panels
Controls
Dependency Objects & Routed Events
Styles, Templates & Resources
Data Binding

34. Designer Developer

35. Styles are about
setting properties…

36. Demo
Basic Styles
Resources

37. Resource Hierarchy
<Window>
System Resources <Window.Resources>
...
</Window.Resources>
Application Application
Resources Resources <Grid>
<Grid.Resources>
...
Window/Page Window/Page
</Grid.Resources>
Resources Resources
<ListBox>
Element Element <ListBox.Resources>
Resources Resources ...
</ListBox.Resources>
</ListBox>
Element Element
</Grid>
Resources Resources
</Window>

38. Automatic Styles/Templates
Most resources must use x:Key
Optional with Styles and Data Templates
Can use TargetType or DataType instead
Applied to target automatically – no reference required
<Window.Resources>
<Style TargetType=quot;{x:Type TextBlock}quot;>
<Setter Property=quot;Marginquot; Value=quot;5quot; />
</Style>
</Window.Resources>

39. Lookless Controls and Templates
Control implies behaviour
Probably supplies default look
Designer free to supply new look

40. Demo
Control Templates

41. Topics
Overview
XAML
Layout Panels
Controls
Dependency Objects & Routed Events
Styles, Templates & Resources
Data Binding

42. Data Binding
Concept
Binding Source
On<PropertyName>Changed
INotificationPropertyChanged
DependencyProperty

43. Binding in Markup
<Image Source=quot;truck.pngquot;
<Slider Orientation=
Canvas.Left=
quot;Horizontalquot;
quot;{Binding Path=Value,
Name=quot;horzPosquot;
ElementName=horzPos}quot;
Value=quot;40quot;/>
/>
{Binding Path=Value, ElementName=horzPos}

44. Demo
UI Element Binding
Object Binding

45. Share Common Source
DataContext=
StackPanel {Binding
Source={StaticResource myData}}
HorizontalSlider
Value=
{Binding Path=XPos,
Path=XPos}
Image Source={StaticResource myData}}
Canvas.Left=
{Binding Path=XPos,
Path=XPos}
Source={StaticResource myData}}

46. Provide Data From Code
May be easier to load data in codebehind
Can set DataContext in code
Foo myDataObject = new Foo();
myDataObject.Bar = 42;
// Set DataContext
myWindow.DataContext = myDataObject;

47. Data Binding – Conversion & Validation
Validation
ValidationRule
Converter
IValueConverter,
IMultiValueConverter

48. Demo
Databinding to CLR Objects

49. Data and Controls
ContentControl – singular content
Button, CheckBox, Label, ListBoxItem, …
ItemsControl – plural content
ListBox, ComboBox, Menu, TabControl, ToolBar, …
Can use data objects as content
myButton.Content = new Car();
myListBox.Items.Add(new Car());
Car c = (Car) myListBox.SelectedItem;

50. Data Templates
class Car
{
string Image {get;set}
string Model {get;set}
}
DataTemplate
<DataTemplate x:Key=quot;carTemplatequot;>
<Border BorderBrush=quot;Bluequot; BorderThickness=quot;2quot; Background=quot;LightGrayquot;
Margin=quot;10quot; Padding=quot;15,15,15,5quot;>
<StackPanel>
<Image HorizontalAlignment=quot;Centerquot; Source=quot;{Binding Path=Image}quot; />
<Border HorizontalAlignment=quot;Centerquot; BorderBrush=quot;Navyquot;
Background=quot;#DDFquot; BorderThickness=quot;1quot; Margin=quot;10quot; Padding=quot;3quot;>
<TextBlock FontSize=quot;18quot; Text=quot;{Binding Path=Model}quot; />
</Border>
</StackPanel>
</Border>
</DataTemplate>

51. Demo
Databinding a list
Datatemplates

52. Topics
Overview
XAML
Layout Panels
Controls
Dependency Objects & Routed Events
Styles, Templates & Resources
Data Binding

53. Have a look at
XAML Powertoys
(http://karlshifflett.wordpress.com/xaml-power-toys/)
WPF Toolkit – Datagrid, DatePicker, Ribbon
(www.codeplex.com/wpf/)
WPF Themes
(www.codeplex.com/wpfthemes/)
Silverlight Toolkit
(www.codeplex.com/silverlight/)

54. Contact
Max Knor
Developer Evangelist
Microsoft Austria
http://www.knor.net

56. WPF Commands

57. WPF Commands
GOF Command Pattern
Decoupling control and command
ICommand interface
Execute(), CanExecute()
Implemented by RoutedUICommand
Source implements ICommandSource

58. Commands Architecture

59. Defining Commands
Controls define a command
<Button Command=quot;ApplicationCommands.Newquot;>
<Image Source=quot;toolbargraphics/New.bmpquot; />
</Button>
CommandBindings define the handler
<Window.CommandBindings>
<CommandBinding
Command=quot;ApplicationCommands.Newquot;
Executed=quot;FileNewquot;
CanExecute=quot;CanFileNewquot; />
</Window.CommandBindings>

60. Command Libraries
Predefined Command Libraries
ApplicationCommands
ComponentCommands
EditingCommands
MediaCommands
NavigationCommand

61. Demo
CommandBindings

62. Custom Commands
Instantiate an RoutedUICommand
Assign InputGestures
Pack into CommandLibrary

63. Demo
Custom Command

64. Interop and Migration

65. Interoperability!
Can use WPF with existing code
WPF inside existing code
Existing code inside WPF
Interop at the component level
Maximum richness => all WPF

66. Airspace
One pixel, one technology
File Edit View Help File Edit View Help
Win32 WPF Win32 WPF
DirectX DirectX

67. Airspace
File Edit View Help File Edit View Help
Win32
Win32
WPF
WPF
DirectX
DirectX

68. Chrome and Canvas
Chrome
Canvas

69. Mixed Application Ideas
A new look for your chrome
Visual effects for your canvas
WPF for faster rendering?
Wizards and help systems
Generate HTML => Generate XAML

70. Windows Forms
private void WindowLoaded(object sender, EventArgs e)
{
WindowsFormsHost host = new WindowsFormsHost();
host.Height = new Length(120);
host.Width = new Length(150);
swf.Control child = new UserControl1();
child.Dock = swf.DockStyle.None;
host.AddChild(child);
border.Child = host;
}

71. Demo
WPF <--> Windows Forms Interop

72. Summary
Can use WPF with existing code
Maximum richness => all WPF
Interop is for components