WPF - An introduction

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

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.

What I don’t intend to do.
 Advocate WPF over Windows Forms

 Pretend to be an authority on WPF

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

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

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.

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.

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

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

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>

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>

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.)

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>

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>

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>

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>

Layout Panels - WrapPanel

<WrapPanel Orientation="Horizontal">
<Button Content="Button" />
</WrapPanel>

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.

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>

Content Presenter
 WPF equivalent of “your content here”

<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding
Property=Background}">
<ContentPresenter />
</Border>
</ControlTemplate>

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

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>

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>

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>

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>

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>

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

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

WPF - An introduction

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to WPF - An introduction (20)

WPF - An introduction

Editor's Notes