1. Presented by G. Sharada

2. Who is this training for?
 If you have relevant experience in building UI with
either WinForms or ASP.NET controls
 If you have been coding in C# (or VB.NET) for
sometime now.
 If you want to learn WPF

3. What I intend to do.
 Present WPF in ways that you learn it by doing, rather
than just reading about it.
 Introduce you to the new buzz-words around WPF –
so you can google them later.

4. What I don’t intend to do.
 Advocate WPF over Windows Forms
 Pretend to be an authority on WPF

5. Agenda
Overview • 25 minutes
Introduction to XAML • 15 minutes
Screen layouts in WPF • 20 minutes
Working with controls • 30 minutes
Applying styles • 15 minutes
Managing resources • 15 minutes
WPF Lab #1
Q&A

7. WPF - Overview
 A new Windows UI Framework
 Declarative programming model – XAML
 State of the art graphics
 DirectX under the covers
 2D, 3D graphics
 Not tied to hardware - logical pixels
 Raised abstraction level
 Data Contexts
 Resources

8. Will Microsoft dump WinForms?
 No, WinForms is here to stay.
 WPF is not intended to replace
WinForms.
 Microsoft will continue to enhance and
support WinForms for years to come.
 We have high interoperability between
WinForms and WPF.

9. Issues with WPF
 Learning curve can be a bit steep
 Its easier to find WinForms developers then WPF
developers
 Comparatively, WinForms has much larger online
resources and developer community support.

10. So, is WPF worth it all?

11. WPF Pros
 Superior Data Binding
 Clean separation between UI and business logic
 Easy UI extensibility through Data/Control
templates/Attached behaviors
 Powerful support for styles and themes
 In-built UI virtualization
 Can incorporate various media types, videos,
documents, 3D content, or dynamically load portions
of a user interface from web

13. XAML
 It stands for “Extensible Application Markup
Language”
 It is an XML-based language for creating and
initializing .NET objects.
 It is used by WPF to determine where all of the
controls and other UI elements go

14. Declaring a Window in XAML
<Window x:Class="LameApplications.Sample1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<Button
x:Name="btn"
Width="200"
Height="25"
Click="btn_Click">Click me, baby, one more time!</Button>
</Grid>
</Window>

15. XAML – Markup Extensions
 Markup extensions add special processing to XAML
attribute values.
 For example, this:
<TextBox Text="{Binding Path=Name}" />
is just a shortcut for this –
<TextBox.Text>
<Binding Path="Name" />
</TextBox.Text>

17. Layouts in WPF
 A layout panel is a control that knows how to arrange its
content.
 A conversation takes place between the layout container
and its children. (in two stages referred to as passes.)

18. Layout Panels - Canvas
<Canvas>
<Rectangle Canvas.Left="40" Canvas.Top="31" Width="63" Height="41"
Fill="Blue" />
<Ellipse Canvas.Left="130" Canvas.Top="79" Width="58" Height="58"
Fill="Blue" />
<Path Canvas.Left="61" Canvas.Top="28" Width="133" Height="98"
Fill="Blue" Stretch="Fill" Data="M61,125 L193,28"/>
</Canvas>

19. Layout Panels - DockPanel
<DockPanel LastChildFill="True">
<Button Content="Dock=Top" DockPanel.Dock="Top"/>
<Button Content="Dock=Bottom" DockPanel.Dock="Bottom"/>
<Button Content="Dock=Left"/>
<Button Content="Dock=Right" DockPanel.Dock="Right"/>
<Button Content="LastChildFill=True"/>
</DockPanel>

20. Layout Panels - Grid
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2">A</Button>
<Button Grid.Row="0“
Grid.Column="2">C</Button>
<Button Grid.Row="1" Grid.Column="0"
Grid.RowSpan="2">D</Button>
</Grid>

21. Layout Panels - StackPanel
<StackPanel>
<TextBlock Margin="10" FontSize="20">How do you like your
coffee?</TextBlock>
<Button Margin="10">Black</Button>
<Button Margin="10">With milk</Button>
<Button Margin="10">Latte machiato</Button>
<Button Margin="10">Chappuchino</Button>
</StackPanel>

22. Layout Panels - WrapPanel
<WrapPanel Orientation="Horizontal">
<Button Content="Button" />
<Button Content="Button" />
<Button Content="Button" />
<Button Content="Button" />
</WrapPanel>

24. WPF Control Tree

25. Control

26. A second look

27. Types of controls
 ContentControl - is a control that has an
additional Content property. This is often used for simple
containers. Example: Window
 HeaderedContentControl - is a control that has
an Content and a Header property. This is used for controls with
a header like TabControl.
 ItemsControl - a control that has an
additional Items collection. This is a good choice for controls
that display a dynamic list of items without selection.
 Selector - an ItemsControl whose items can be indexed and
selected. This is used for ListBox, ComboBox.

28. Control Template
 Modify the visual appearance of a control, while
maintaining the behavior
<Button Margin="0,0,2,2" Grid.Row="0"
Grid.Column="0" Name="cell00">
<Button.Template>
<ControlTemplate>
<Grid>
<Rectangle />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>

29. Content Presenter
 WPF equivalent of “your content here”
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding
Property=Background}">
<ContentPresenter />
</Border>
</ControlTemplate>

31. Styles
 A set of properties applied to content used for visual
rendering
 The ability to apply different visual effects based on
user events
 A collection property setter elements

32. Inline Styles
Set style property inline using standard XAML property
element syntax
<Button Name="cell00">
<Button.Style>
<Style>
<Setter Property="Button.FontSize"
Value="32pt" />
<Setter Property="Button.FontWeight"
Value="Bold" />
</Style>
</Button.Style>
</Button>

33. Named Styles
 Apply style using key
<Window ...>
<Window.Resources>
<Style x:Key="CellTextStyle">
<Setter Property="Control.FontSize"
Value="32pt" />
<Setter Property="Control.FontWeight"
Value="Bold" />
</Style>
</Window.Resources>
<Button Style="{StaticResource CellTextStyle}” Name="cell00" />
</Window>

34. Target typed Styles
 With key
<Style x:Key="CellTextStyle" TargetType="{x:Type Button}">
<Setter Property="FontSize" Value="32pt" />
<Setter Property="FontWeight" Value="Bold" />
</Style>
 Without key (is applied to all controls of target-type)
<Style TargetType="{x:Type Button}">
<Setter Property="FontSize" Value="32pt" />
<Setter Property="FontWeight" Value="Bold" />
</Style>

35. Extending Styles
 Extend a style by adding new properties, or overriding
existing properties
<Style x:Key="CellTextStyle">
<Setter Property="Control.FontSize" Value="32pt" />
<Setter Property="Control.FontWeight" Value="Bold" />
</Style>
<Style x:Key="StatusTextStyle" BasedOn="{StaticResource
CellTextStyle}">
<Setter Property="TextBlock.FontWeight" Value=“Bold" />
<Setter Property="TextBlock.Foreground" Value="White" />
</Style>

36. Style Triggers
 Triggers are a way to wrap one or more Setter elements in a
condition
 Simplest form of a trigger is a PropertyTrigger
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="Content" Value="{x:Null}" >
<Setter Property="ToolTip" Value="click
to move here" />
</Trigger>
</Style.Triggers>
</Style>

38. Resources in WPF
 Centralizing information regarding
 Styles
 Fonts
 data sources
 Images
 Dlls
 Static resource - One time lookup of a resource entry
 Dynamic resource - Auto updating lookup of a
resource entry

39. Scope
 Scope of a resource is limited to its parent
 Application level (global to whole application)
 Window level (specific to window)
 User control level
 Control level