WPF & Silverlight 2.0 UI with XAMLWPF & Silverlight 2.0 UI with XAML

Dave AllenISV Application ArchitectDeveloper and Platform GroupMicrosoft UK

AgendaAgenda

New WPF & Silverlight conceptsControlsLayout, Positioning, Transforms, and NavigationResourcesData Binding & Data TemplatesStyles and TemplatesAnimation

Logical & Visual TreesLogical & Visual Trees

Logical treeEnable iteration of childrenFramework for notificationsNot just in XAML

Visual tree does not contain all elements of logical tree

Routed events travel along Visual Tree not the Logical Tree

DemoDemoXAMLPad Visual Tree

Dependency propertiesDependency properties

Extend functionality of.NET(CLR) propertiesProvide built-in change notifications

Events handled in just XAML

Compute value of a property based on other inputsSupport multiple providers Dependency properties enable:

AnimationData bindingProperty value inheritanceAttached propertiesEtc.

Routed EventsRouted Events

Extend functionality of .NET(CLR) eventsDesigned to work with a tree of elementsCan travel up or down the visual and logical treeRouting strategies

TunnelingEvent raised on root until source reached or handled

BubblingEvent raised on source until root is reached or handled

DirectEvent only raised on source element

Allow attached events

WPF ControlsWPF Controls

Content, Items, Range and Text controlsControls in the box

CommonBorder, Button, CheckBox, ComboBox, Image, Label, ListBox, Radio, Rectangle, Tab, TextBox

OtherWebBrowser, Content, DocViewer, Ellipse, Expander, Frame, GridSplitter, GroupBox, ListView, MediaElement, Menu, PasswordBox, ProgressBar, RichTextBox, ScrollBar, ScrollViewer, Seperator, Slider, StatusBar, TextBlock, ToolBar, TreeView, ViewBox, WinFormsHost

LayoutCanvas, DockPanel, Grid, StackPanel, WrapPanel

DemoDemoWPF Controls

Silverlight 2.0 ControlsSilverlight 2.0 Controls

Controls in the boxButton, Calendar, Checkbox, Datagrid, DateTimePicker, GridSplitter, HyperLink, Image, ListBox, MediaElement, MultiScaleImage, Popup, Radio, Slider, TextBox, TextBlock, Toggle, Tooltip, etc.

Layout CanvasBorderStackPanelGrid

User Control – aggregation of existing controls

Layout, positioning, and transformsLayout, positioning, and transforms

Panel base classChildren collectionMeasureOverride

Panel passes available Size to each childChild determines its DesiredSize

ArrangeOveridePanel positions its children

TransformsRotateScaleSkewEtc.

DemoDemoLayout and Transforms with XAML

WPF NavigationWPF Navigation

WPF supports browser-style navigationWPF classes that support navigation

Page – root element for windows that support navigationHyperlink – simple navigation mechanismNavigationService – for more complex navigationJournalEntry – holds the back and forwards stacks and maintains stateNavigationCommands – direct control over navigation

Silverlight doesn’t support navigation!Community patterns emerging

ResourcesResources

Binary resources – same as they always wereLogical (XAML) Resources

Share resources across Windows and Elements in XAMLStylesData SourcesEtc.

Static ResourcesApplies only once

Dynamic ResourcesProvide dynamic updates, e.g. changing font sizeWork with Dependency Properties

Data BindingData Binding

Data Binding (2)Data Binding (2)

Sharing Source with DataContextProperty on FrameworkElement (FE) that defines the data source for that element and all elements in that sub-treeXAML Binding will traverse hierarchy until DataContext is found

Binding ModesOne-way

Updates to Data Source object are reflected in the UIDataSource implements INotifyPropertyChanged for notification

Two-wayChanges to the UI update the .NET object

Data Binding (3)Data Binding (3)

For controls that support collectionsItemSource binds to anything that supports IEnumerable

Must implement INotifyPropertyChangedUse ObservableCollection<T> as this has change notification built in

Write value converters for different typesImplement IValueConveter Can be used with XAML Binding syntaxOne or Two Way

From source = Convert From target = ConvertBack

DemoDemoWPF Data Binding in XAML

Data TemplatesData Templates

Allow customization of visualization of dataMost commonly used with Data Binding

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" TextContent="{Binding Path=Model}" /> </Border> </StackPanel> </Border></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" TextContent="{Binding Path=Model}" /> </Border> </StackPanel> </Border></DataTemplate>

DemoDemoWPF Data Templates in XAML

Styles and TriggersStyles and Triggers

StylesProbably the most compelling feature of WPF/SilverlightThe ability to stylize an application without building from scratchSeparates property values from UI elements, similar to CSSNothing inherently visual about Styles, just groups propertiesShare style amongst heterogeneous elements

Triggers Apply style based on a conditionProperty TriggerData TriggerEvent TriggerConflicting triggers – last one wins

Control TemplatesControl Templates

What tells controls how to visualize themselvesCan be replaced without impacting functionalityCompletely customize the Visual TreeWork closely with TriggersRespect the control name, look, & feel

If it’s a button is should have some resemblance and functionality of a buttonVery dangerous in the wrong hands

DemoDemoStyles and Templates

AnimationAnimation

Not just for Disney!Animation much more subtle than spinning buttonsButton MouseOver event uses animationAnimation classes

164 classes to support animation of different .NET typesNo support for Generics in XAMLDoubleAnimation, ColorAnimation, ThicknessAnimaton, etc.

StoryboardContainer for animationDerives from TimelineHolds animation properties such as Duration, RepeatBehavior, etc.

DemoDemoAnimation