1 Introduction to WPFUCN / 2012 Introduction to WPF Introduction to WPF Based on a Microsoft...

1 Introduction to WPF UCN / 2012

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

Application Resources

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

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

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


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


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 WPFUCN / 2012 Introduction to WPF Introduction to WPF Based on a Microsoft...

Documents

Transcript of 1 Introduction to WPFUCN / 2012 Introduction to WPF Introduction to WPF Based on a Microsoft...