wpf & silverlight ui
DESCRIPTION
WPF & Silverlight UITRANSCRIPT
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