1 Introduction to WPFNoea / PQC - 2008Web Introduction to WPF Introduction to WPF Based on a...

1 Introduction to WPF Noea / PQC - 2008Web

Introduction to WPFIntroduction to WPF

•Based on a Microsoft presentation


.NET At The Core


Topics

• Windows Presentation Foundation– Overview– 2D

– Controls and Layout

– Styles, Templates & Resources

– Data Binding

– Animation

Overview


Now

• GDI (20 years), GDI+, WinForms• DirectX (11 years), Direct3D• Quartz, DirectShow (8 years)

• Problems– Showing their age– Each API is different– Mixing APIs is challenging


Next Gen

• WPF – replaces GDI• Direct3D – large games, used by WPF• Media Foundation – ultimately will replace DirectShow

• MCML –markup language for Media Center Edition applications

• XNA – small games


WPF

• Compositing– UI, Documents, Media, 3D, Browser, …

• Declarative programming with XAML markup

• For Designers and Developers• Rewritten from scratch

– Built on top of Direct3D– Hardware accelerated– Vector based– Resolution independent– Retained graphics


WPF Vision

• Integrated, vector-based composition engine

– Utilizing the power of the PC throughout the graphics stack

• Unified approach to UI, Documents, and Media

– Integration as part of development and experience

• Declarative programming– Bringing designers directly into

application development

• Ease of deployment– Allowing administrators to deploy and

manage applications securely


Designer Developer

Developer Designer Collaboration


XAML

• XML for Applications Markup Language

<Button Name="button1">Click Me!

</Button>

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


Properties as Attributes or Elements

<Button Content="Click Me!" Background="LightGreen" />

<Button> <Button.Background> LightGreen </Button.Background> Click Me!</Button>


Attached Properties

<Canvas> <Button Canvas.Top="30" Canvas.Left="40"> Click Me! </Button></Canvas>

2D Graphics


Shapes

• Elements of UI tree– Just like controls and other elements

Rectangle

Ellipse

Polyline

Polygon

Path


Shapes Example

<Canvas Width="100" Height="100"> <Ellipse Fill="Yellow" Stroke="Black" StrokeThickness="7" Width="100" Height="100" />

<Ellipse Fill="Black" Width="10" Height="15" Canvas.Left="28" Canvas.Top="28" />

<Ellipse Fill="Black" Width="10" Height="15" Canvas.Left="62" Canvas.Top="28" />

<Path Stroke="Black" StrokeThickness="6" Data="M 30,60 Q 50,90 70,60" /></Canvas>


Shapes and Code

• Shapes accessible from code behind– Just like any element

• Change appearance by setting properties– Screen is automatically updated

<Ellipse Fill="Yellow" x:Name="myEllipse"

StrokeThickness="7" Stroke="Black" Width="100" Height="100" />

// ...in code behind

myEllipse.Width = 200;


Transforms

• Any element can be transformed– Scaling, rotation, shearing

• Optionally affects layout


Hit Testing

• Built in for all drawing elements

• Takes transformations into account

• Bubbling event model


Brushes

• Specifies how shape is filled– Used for properties throughout WPF

• Polymorphic• Composable

<Rectangle Fill="Red" Width="200" Height="100" />


Linear/RadialGradientBrush

• Fills across a range of colors• Enables interesting visual effects


ImageBrush

<TextBlock FontSize="72" FontFamily="Arial Black"> <TextBlock.Foreground>

<ImageBrush ImageSource="c:\Windows\Blue Lace 16.bmp" />

</TextBlock.Foreground> Hello, World!</TextBlock>


Composability: DrawingBrush

• Fill with vector image– Scalable


Composability: VisualBrush

• Fill with any UI element• Makes certain design tricks easy

– Reflection of UI– Use as 3D surface texture


OpacityMask

• Apply opacity to any visual using any Brush


Imaging and Video

• Elements– Image– MediaElement

• Integrate images and video into a brush– Paint shapes– Use as a 3D surface texture

• Extensive image handling support– System.Windows.Media.Imaging


Future Proofing the Platform and Your Applications

• Resolution independent graphics

• Double precision floating point coordinates and transformations

• Hardware capabilities are abstracted to better map to future hardware advances


Summary

• Modern integrated content platform

• Consistency across UI and development

• Higher quality through hardware advances

Controls and Layout


Class Hierarchy


Layout Controls

• StackPanel• WrapPanel• Canvas• DockPanel• Grid• ...


Simple Controls

• PasswordBox• ScrollBar• ProgressBar• Slider• TextBox• RichTextBox• ...


Content Controls

• Button• RepeatButton• ToggleButton• CheckBox• RadioButton• Label• Frame• ListBoxItem• StatusBarItem• ScollBarViewer

• ToolTip• UserControl• Window• NavigationWindow• ...


Headered Content Controls

• Expander• GroupBoxItem• TabItem• ...


Items Controls

• Menu• ContextMenu• StatusBar• TreeView• ListBox• ComboBox• TabControl• ...


Summary

• Controls• Containers• Events• Commands

Styles, Templates and Resources


Designer Developer


Skele

ton

Prototype

&

Experiment

Feedback from Customers

Fin

al

Pro

du

ct

Design

Development Process

Styling & Styling & TemplatesTemplates


Styles are about setting properties…


Setting Setting PropertiesProperties

Trigger Trigger

AnimationsAnimations

TemplateTemplate

StylesStyles


Lookless Controls and Templates

• Control implies behaviour

• Probably supplies default look– Designer free to supply new look


Styling and Resources

• Style rarely defined inline– Tend to be reused for consistency

• Usually defined as resources


Resource Dictionaries

• Simple Key, Value collection• FrameworkElement.Resources

<Grid> <Grid.Resources> <Style x:Key="dapper"> <Setter Property="Background" Value="LimeGreen" /> </Style> </Grid.Resources>

...

<Button Style="{StaticResource dapper}">Click</Button>


Resource Hierarchy

System Resources

Application Resources

ElementResources

ElementResources

ElementResources

Window/PageResources

Window/PageResources

ElementResources


<Window> <Window.Resources> ... </Window.Resources>

<Grid> <Grid.Resources> ... </Grid.Resources>

<ListBox> <ListBox.Resources> ... </ListBox.Resources> </ListBox> </Grid></Window>



• Styles and templates• Shared graphics

<Application x:Class="ResourcePlay.MyApp" xmlns="http://schemas.microsoft.com/winfx/avalon/2005" xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">

<Application.Resources> <Style x:Key="dapper"> <Setter Property="Background" Value="LimeGreen" /> </Style> </Application.Resources></Application>


Page/Window Resources

• Utility elements– Data sources– Converters

• Page-specific templates


Element-Specific Resources

• Locally-scoped Styles and templates

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

... </Grid> ...</Window>


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="{x:Type TextBlock}"> <Setter Property="Margin" Value="5" /> </Style></Window.Resources>

System Resources

• SystemColors – Colors and Brushes• SystemFonts• SystemParameters (sizes, settings)

<Rectangle Height="50" Width="100" Fill="{x:Static SystemColors.ControlBrush}" />

<Rectangle Height="50" Width="100" Fill="{DynamicResource {x:Static

SystemColors.ControlBrushKey}}" />


Resources and Code-Behind

• FindResource• SetResourceReference• Change resource value with indexer

– someElem.Resources["foo"] = bar;• Initializing from code-behind not so good

– Must set before referencing XAML loaded– OK for app resources, less good otherwise


Summary

• Styles empower designers• Styles enable vibrant visuals• Styles are the glue for WPF• Styles depend on resources


Data Binding


Agenda

• Element data binding

• Object and XML data binding

• Data templates

• Master / child relationships

• Debugging


Data Binding Overview

• Target– Any property, any element

• Source– CLR Object– WPF Element– ADO.NET– XML

• Dynamic– INotifyPropertyChanged, DependencyProperty or

PropertyDescriptor• Multiple models

– One Time– One Way– Two Way

• Value Converter

• Target– Any property, any element

• Source– CLR Object– WPF Element– ADO.NET– XML

• Dynamic– INotifyPropertyChanged, DependencyProperty or

PropertyDescriptor• Multiple models

– One Time– One Way– Two Way

• Value Converter

Control

“Data Item” Property

Binding

Pro

perty


Binding in Markup

<Image Source="truck.png"Canvas.Left= "{Binding Path=Value, ElementID=horzPos}"/>

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

{Binding Path=Value, ElementName=horzPos}


Object Data Providers

• Add to resource dictionary– Named source objects

• Use with resource binding– {StaticResource theCars}

<Window> <Window.Resources> <ObjectDataProvider x:Key="myData" ObjectType=" {x:Type Foo}" /> </Window.Resources>

...

<TextBlock TextContent="{Binding Path=Bar, Source={StaticResource myData} }" />


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;


Binding to XML

<Cars> <Car Make="Ford" Model="F-150"> <Image>truck.png</Image> </Car> <Car> ... </Car></Cars>

cars.xml

<XmlDataProvider x:Key="cars" XPath="/Cars/Car" Source="cars.xml" />

<TextBlock TextContent="{Binding XPath=@Make, Source={StaticResource cars}}"/>


Provide XML From Code

• Can load XML data in codebehind– Just like any other data

XmlDocument doc = new XmlDocument();doc.LoadXml("<Foo><Bar>Hello, world</Bar></Foo>");

myGrid.DataContext = doc;


Databases and Web Services

• No special support required

• Use object binding– DataSet/DataTable support the TypeDescriptor system


Data and Controls

• ContentControl – singular content– Button, CheckBox, Label, ListBoxItem, …

• ItemsControl – plural content– ListBox, ComboBox, Menu, TabControl, ToolBar, …

• Can use data objects as content

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

myButton.Content = new Car();

Car c = (Car) myListBox.SelectedItem;


Data Templates

DataTemplate

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

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


Choosing a Data Template

• By Name (resource dictionary key)– ContentTemplate/ItemTemplate= {StaticResource myStyle}

• By Type– <DataTemplate DataType="{x:Type cc:Car}">– <DataTemplate DataType="Book"> for XML


Summary

• WPF understands your data– use your favorite data model: XML, objects, SQL, WS …– Bind data to controls

• Templates give your data a face

• Controls “think” data – Data is pervasive across and integrated into the platform

Animation


Why Animation?

• Enabling richer experiences

• Make a UI feel more naturalistic

• Smoother visual transitions


Animation Anywhere

• Any property can be animated

• Anywhere ≠ everywhere

– Exercise taste & discretion


Declarative animation

• Tell animation system what you want– E.g. change Width from 10 to 100 over 10 seconds

• Does all the work for you– No need to set up timers– No need for custom drawing

<DoubleAnimation From="10" To="100" Duration="0:0:10" Storyboard.TargetName="myellipse" Storyboard.TargetProperty="(Ellipse.Width)" />


Essential Elements

• Triggers

• Timelines

• Animations


Triggers

• Fire animations in response to stimuli– Use in element, Style, or template

• Two trigger styles:– Event-driven: <EventTrigger>– Property-driven: <Trigger> (enter and exit animations)


Timelines

• A stretch of time: BeginTime and Duration• Timelines form a hierarchy• Some timelines are just structural

– E.g. ParallelTimeline• Other timelines do interesting things

– Animation timelines


Animation Timelines

• Animations specific to target type– DoubleAnimation, PointAnimation, etc.

<DoubleAnimation From="10" To="100" Duration="0:0:10" Storyboard.TargetName="myellipse" Storyboard.TargetProperty="(Ellipse.Width)" />


Relative vs Absolute Animations

• From and To• Just To• By• From and By


Acceleration/Deceleration

• Adds more natural feel to motion

<DoubleAnimation From="50" To="70" AccelerationRatio="0.2" DecelerationRatio="0.3" Storyboard.TargetName="someElement" Storyboard.TargetProperty="(Ellipse.Width)" />

Sum must be <= 1


Repeating and Reversing Timelines

• RepeatBehavior– Forever– Time, e.g. “0:0:5” repeats for 5 seconds– Count, e.g. “5.6x” repeats 5.6 times

• AutoReverse– True or False


Key Frame Animations

• Simpler than lots of individual timelines• Also offer spline animation


Animations and Styles

• Can add animation by restyling control– No special support required by control

• Style.Triggers

• ControlTemplate.Triggers


Example: Triggers<ControlTemplate TargetType="{x:Type Button}">

<Grid>

<Rectangle Fill="{TemplateBinding Background}"

RadiusX="10" RadiusY="10" Stroke="Black" x:Name="outline" />

<ContentPresenter

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

</Grid>

<ControlTemplate.Triggers>

<EventTrigger RoutedEvent="Mouse.MouseEnter">

<EventTrigger.Actions>

<BeginStoryboard>

<Storyboard>

<DoubleAnimation Duration="0:0:0.2" AutoReverse="True"

Storyboard.TargetProperty="(Rectangle.StrokeThickness)"

Storyboard.TargetName="outline" By="1" />

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

</ControlTemplate.Triggers>

</ControlTemplate>


Animation in Code

• Can launch animations from code– Alternative to markup+storyboards– Allow more runtime flexibility

DoubleAnimation d = new DoubleAnimation(500, new Duration(TimeSpan.FromSeconds(2)));

myRect.BeginAnimation(Rectangle.WidthProperty,d);


CompositionTarget.Render

• Animation timelines not always ideal solution– Real-time physics modeling doesn’t fit this model well

• Low level alternative: Render event– Called for each frame– That is all

• Note: frame rate not constant


Summary

• Any property can be animated

• Define animations as Timeline hierarchies

• Put animations on page or in styles

• Declarative control with triggers


Links

• Sites– http://windowsclient.net/ – http://wpf.netfx3.com/ (moving to windowsclient)– WPF Windows SDK Documentation– My Five Day Course For Hitting the WPF Curve/Cliff – www.brains-N-brawn.com/backRow/– http://sessions.visitmix.com/ – http://wpf.netfx3.com/files/folders/labs/default.aspx

(The tutorials are from here)– http://devlicio.us/blogs/rob_eisenberg/default.aspx

(Søg efter ‘Crash Course’


Exercise

• Make tutorials of free choice from the tutorial folder or from the videos on http://windowsclient.net/

• The following are recommended:– Creating Rich 2D and 3D Content in WPF– ColorSwatch– Using Data Binding in WPF– LiveSearch (using a webservice and data binding)– The video tutorials!• You might also visit the video casts from the Mix

Conferences: http://sessions.visitmix.com/ • Challenge:– Make a rotating cube with a playing video on each side.– Might need some computing power to run :-(

1 Introduction to WPFNoea / PQC - 2008Web Introduction to WPF Introduction to WPF Based on a...

Documents

Transcript of 1 Introduction to WPFNoea / PQC - 2008Web Introduction to WPF Introduction to WPF Based on a...