Wpf Introduction

transcript

Windows PresentationFoundation

Max KnorDeveloper EvangelistMicrosoft Austria

http://www.knor.net

Topics

Overview

Layout Panels

Controls

Dependency Objects & Routed Events

Styles, Templates & Resources

Data Binding

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

Layout Panels

Controls

Data Binding

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

Topics

Overview

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

Hallo Welt</Button>

Hallo Welt</Button>

Layout Controls

StackPanelUnderneath, side-by-side

WrapPanelSame but with automatic wrapping

CanvasX-,Y- Positions

DockPanel

Using Layout Controls

Topics

Overview

Layout Panels

Controls

Commands

Data Binding

Class Hierarchy

Simple Controls

• PasswordBox

• ScrollBar

• ProgressBar

• Slider

• TextBox

• RichTextBox

Content Controls

Button

RepeatButton

ToggleButton

CheckBox

RadioButton

ListBoxItem

StatusBarItem

ScrollBarViewer

ToolTip

UserControl

Window

NavigationWindow

Content Controls

Headered Content Controls

Content Control plus header

Expander

MenuItem

GroupBox

TabItem

Items Controls

Container for multiple items (lists)

ListBox

ComboBox

ContextMenu

StatusBar

TreeView

TabControl

Listbox, Toolbar, Menu

Topics

Overview

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

Click Me!</Button>

</Grid>

Attached Properties

Routed Events

Application

Window

Button

Canvas

Ellipse

Preview

Tunnelin

gBubblin

Routed Events (Attached Events)

“Collect” events at a higher hierarchy level

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); }

Routed Events

Topics

Overview

Layout Panels

Controls

Data Binding

Designer Developer

Styles are about setting properties…

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

Control Templates

Topics

Overview

Layout Panels

Controls

Data Binding

Concept

Binding SourceOn<PropertyName>Changed

INotificationPropertyChanged

DependencyProperty

Binding in Markup

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

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

{Binding Path=Value, ElementName=horzPos}

UI Element Binding

Object Binding

Share Common Source

StackPanel

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

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>

Databinding a list

Datatemplates

Topics

Overview

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

Contact

Max Knor

Developer Evangelist

Microsoft Austria

http://www.knor.net

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>

<Window.CommandBindings><CommandBinding

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

</Window.CommandBindings>

Command Libraries

Predefined Command LibrariesApplicationCommands

ComponentCommands

EditingCommands

MediaCommands

NavigationCommand

CommandBindings

Custom Commands

Instantiate an RoutedUICommand

Assign InputGestures

Pack into CommandLibrary

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

File Edit View Help

DirectX

File Edit View Help

DirectX

Airspace

One pixel, one technology

File Edit View Help

DirectX

Airspace

File Edit View Help

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;

WPF <--> Windows Forms Interop

Summary

Can use WPF with existing code

Maximum richness => all WPF

Interop is for components

Wpf Introduction

Technology