Wpf Introduction

Windows PresentationFoundation

Max KnorDeveloper EvangelistMicrosoft Austria

http://www.knor.net

http://www.knor.net/

Topics

Overview

XAML

Layout Panels

Controls

Dependency Objects & Routed Events

Styles, Templates & Resources

Data Binding

Demo

WPF Puzzle

Why WPF? Another UI Framework?

New Display EngineBased on Direct3D no window handles

Leverages Modern Hardware (GPUs)Resolution IndependenceVectorgraphics Scalable

Multimedia IntegrationControls + Documents + Video/Audio

New .NET based Development ConceptNew class librariesSeperated UI vs. Logic

XAML – XML based UI Specification language

Designer Developer

Developer Designer Collaboration

Topics

Overview

XAML

Layout Panels

Controls



Data Binding

XAML

Extensible Application Markup Language

Generic XML Object Instantiation

Not How – but What!Creates Object Hierarchies

Used inWindows Presentation Foundation

Windows Workflow Foundation

XAML vs. C#

<Button Background="Red">Click Me!

</Button>

Button button1 = new Button();button1.Content = "Click Me!";button1.Background = new SolidColorBrush(

Colors.Red);

XAML vs. C#

XML Namespaces <--> .NET Namespaces

XML Elements <--> .NET Objects

XML Attributes <--> .NET Object Properties

Demo

XAML

Topics

Overview

XAML

Layout Panels

Controls



Data Binding

WPF Positioning

Absolute PositioningX / Y, Width / Height

Relative PositioningNO X/Y, Width/Height

Margin

Alignment

<Button Margin="20,10,20,10">Hallo Welt</Button>

WPF Positioning - Alignment

HorizontalAlignmentStretch, Left, Right, Center

VerticalAlignmentStretch, Top, Center, Bottom

<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

Hallo Welt</Button>

<Button HorizontalAlignment="Left" VerticalAlignment="Bottom">

Hallo Welt</Button>

Layout Controls

StackPanelUnderneath, side-by-side

WrapPanelSame but with automatic wrapping

CanvasX-,Y- Positions

DockPanel

Grid

...

Demo

Using Layout Controls

Topics

Overview

XAML


Layout Panels

Controls


Commands

Data Binding

Class Hierarchy

Simple Controls

• PasswordBox

• ScrollBar

• ProgressBar

• Slider

• TextBox

• RichTextBox

Content Controls

Button

RepeatButton

ToggleButton

CheckBox

RadioButton

Label

Frame

ListBoxItem

StatusBarItem

ScrollBarViewer

ToolTip

UserControl

Window

NavigationWindow

Demo

Content Controls

Headered Content Controls

Content Control plus header

Expander

MenuItem

GroupBox

TabItem

…

Items Controls

Container for multiple items (lists)

ListBox

ComboBox

Menu

ContextMenu

StatusBar

TreeView

TabControl

...

Demo

Listbox, Toolbar, Menu

Topics

Overview

XAML

Layout Panels

Controls



Data Binding

Dependency Properties

Values stored in a central dictionaryInstead of being stored in a private member

Can include additional metadata (like default value)

Manipulated by the WPF runtimeDatabinding

Animation, Styles, etc…


public class MyDependencyObject : DependencyObject{

public static readonly DependencyPropertySomeStateProperty = DependencyProperty.Register("SomeState",

typeof(String), typeof(MyDependencyObject));

public string SomeState{

get { return (string)this.GetValue(SomeStateProperty); }set { this.SetValue(SomeStateProperty, value); }

}}

Attached Properties

Store Properties of one control on another one

<Grid><Button Grid.Column=“0" Grid.Row="40">

Click Me!</Button>

</Grid>

Demo


Attached Properties

Routed Events

Application

Window

Grid

Button

Canvas

Ellipse

Preview

Preview

Preview

Preview

Preview

Preview

Tunnelin

gBubblin

g

Routed Events (Attached Events)

“Collect” events at a higher hierarchy level

<Canvas Button.Click=“Button_Click”><Button>

Click Me!</Button>

</Canvas>

Events

Create Routed Events

Use RoutedEventArgs.Source instead of sender

public static readonly RoutedEvent TapEvent = EventManager.RegisterRoutedEvent("Tap", RoutingStrategy.Bubble, typeof(RoutedEventHandler),

typeof(MyButtonSimple));

public event RoutedEventHandler Tap { add { AddHandler(TapEvent, value); }remove { RemoveHandler(TapEvent, value); }

}

Demo

Routed Events

Topics

Overview

XAML

Layout Panels

Controls



Data Binding

Designer Developer

Styles are about setting properties…

Demo

Basic Styles

Resources

Resource Hierarchy

System Resources

Application

Resources

Element

Resources

Element

Resources

Element

Resources

Window/Page

Resources

Window/Page

Resources

Element

Resources

Application

Resources

<Window><Window.Resources>...

</Window.Resources>

<Grid><Grid.Resources>...

</Grid.Resources>

<ListBox><ListBox.Resources>...</ListBox.Resources>

</ListBox></Grid>

</Window>

Automatic Styles/Templates

Most resources must use x:Key

Optional with Styles and Data TemplatesCan use TargetType or DataType instead

Applied to target automatically – no reference required

<Window.Resources><Style TargetType="{x:Type TextBlock}"><Setter Property="Margin" Value="5" />

</Style></Window.Resources>

Lookless Controls and Templates

Control implies behaviour

Probably supplies default lookDesigner free to supply new look

Demo

Control Templates

Topics

Overview

XAML

Layout Panels

Controls



Data Binding

Data Binding

Concept

Binding SourceOn<PropertyName>Changed

INotificationPropertyChanged

DependencyProperty

Binding in Markup

<Image Source="truck.png"Canvas.Left=

"{Binding Path=Value, ElementName=horzPos}"

/>

<Slider Orientation="Horizontal"Name="horzPos"Value="40"/>

{Binding Path=Value, ElementName=horzPos}

Demo

UI Element Binding

Object Binding

Share Common Source

StackPanel

Image

HorizontalSlider

Value={Binding Path=XPos,Source={StaticResource myData}}

Canvas.Left={Binding Path=XPos,

Source={StaticResource myData}}

DataContext={Binding Source={StaticResource myData}}

Value={Binding Path=XPos}

Canvas.Left={Binding Path=XPos}

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 DataContextmyWindow.DataContext = myDataObject;

Data Binding – Conversion & Validation

ValidationValidationRule

ConverterIValueConverter,

IMultiValueConverter

Demo

Databinding to CLR Objects

Data and Controls

ContentControl – singular contentButton, CheckBox, Label, ListBoxItem, …

ItemsControl – plural contentListBox, ComboBox, Menu, TabControl, ToolBar, …

Can use data objects as content

myListBox.Items.Add(new Car());

myButton.Content = new Car();

Car c = (Car) myListBox.SelectedItem;

class Car{string Image {get;set}string Model {get;set}

}

Data Templates

DataTemplate

<DataTemplate x:Key="carTemplate"><Border BorderBrush="Blue" BorderThickness="2" Background="LightGray"

Margin="10" Padding="15,15,15,5"><StackPanel><Image HorizontalAlignment="Center" Source="{Binding Path=Image}" /><Border HorizontalAlignment="Center" BorderBrush="Navy"

Background="#DDF" BorderThickness="1" Margin="10" Padding="3"><TextBlock FontSize="18" Text="{Binding Path=Model}" />

</Border></StackPanel>

</Border></DataTemplate>

Demo

Databinding a list

Datatemplates

Topics

Overview

XAML

Layout Panels

Controls



Data Binding

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

http://karlshifflett.wordpress.com/xaml-power-toys/





http://www.codeplex.com/wpf/

http://www.codeplex.com/wpfthemes/

http://www.codeplex.com/silverlight/

Contact

Max Knor

Developer Evangelist

Microsoft Austria

http://www.knor.net



WPF Commands

WPF Commands

GOF Command Pattern

Decoupling control and command

ICommand interface

Execute(), CanExecute()

Implemented by RoutedUICommand

Source implements ICommandSource

Commands Architecture

Defining Commands

Controls define a command

CommandBindings define the handler

<Button Command="ApplicationCommands.New"><Image Source="toolbargraphics/New.bmp" />

</Button>

<Window.CommandBindings><CommandBinding

Command="ApplicationCommands.New" Executed="FileNew" CanExecute="CanFileNew" />

</Window.CommandBindings>

Command Libraries

Predefined Command LibrariesApplicationCommands

ComponentCommands

EditingCommands

MediaCommands

NavigationCommand

Demo

CommandBindings

Custom Commands

Instantiate an RoutedUICommand

Assign InputGestures

Pack into CommandLibrary

Demo

Custom Command

Interop and Migration

Interoperability!

Can use WPF with existing codeWPF inside existing code

Existing code inside WPF

Interop at the component level

Maximum richness => all WPF

WPF

File Edit View Help

Win32

DirectX

WPF

File Edit View Help

Win32

DirectX

Airspace

One pixel, one technology

File Edit View Help

Win32

DirectX

WPF

Airspace

File Edit View Help

Win32

WPF

DirectX

Chrome and Canvas

Canvas

Chrome

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

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;

}

Demo

WPF <--> Windows Forms Interop

Summary

Can use WPF with existing code

Maximum richness => all WPF

Interop is for components

Technology

Wpf Introduction