WPF & Silverlight UI
-
Upload
dave-allen -
Category
Technology
-
view
1.113 -
download
0
description
Transcript of WPF & Silverlight UI
![Page 1: WPF & Silverlight UI](https://reader033.fdocuments.in/reader033/viewer/2022061613/55561ce0d8b42ae0238b51c1/html5/thumbnails/1.jpg)
WPF & Silverlight 2.0 UI with XAMLWPF & Silverlight 2.0 UI with XAML
Dave AllenISV Application ArchitectDeveloper and Platform GroupMicrosoft UK
![Page 2: WPF & Silverlight UI](https://reader033.fdocuments.in/reader033/viewer/2022061613/55561ce0d8b42ae0238b51c1/html5/thumbnails/2.jpg)
AgendaAgenda
New WPF & Silverlight conceptsControlsLayout, Positioning, Transforms, and NavigationResourcesData Binding & Data TemplatesStyles and TemplatesAnimation
![Page 3: WPF & Silverlight UI](https://reader033.fdocuments.in/reader033/viewer/2022061613/55561ce0d8b42ae0238b51c1/html5/thumbnails/3.jpg)
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
![Page 4: WPF & Silverlight UI](https://reader033.fdocuments.in/reader033/viewer/2022061613/55561ce0d8b42ae0238b51c1/html5/thumbnails/4.jpg)
DemoDemoXAMLPad Visual Tree
![Page 5: WPF & Silverlight UI](https://reader033.fdocuments.in/reader033/viewer/2022061613/55561ce0d8b42ae0238b51c1/html5/thumbnails/5.jpg)
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.
![Page 6: WPF & Silverlight UI](https://reader033.fdocuments.in/reader033/viewer/2022061613/55561ce0d8b42ae0238b51c1/html5/thumbnails/6.jpg)
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
![Page 7: WPF & Silverlight UI](https://reader033.fdocuments.in/reader033/viewer/2022061613/55561ce0d8b42ae0238b51c1/html5/thumbnails/7.jpg)
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
![Page 8: WPF & Silverlight UI](https://reader033.fdocuments.in/reader033/viewer/2022061613/55561ce0d8b42ae0238b51c1/html5/thumbnails/8.jpg)
DemoDemoWPF Controls
![Page 9: WPF & Silverlight UI](https://reader033.fdocuments.in/reader033/viewer/2022061613/55561ce0d8b42ae0238b51c1/html5/thumbnails/9.jpg)
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
![Page 10: WPF & Silverlight UI](https://reader033.fdocuments.in/reader033/viewer/2022061613/55561ce0d8b42ae0238b51c1/html5/thumbnails/10.jpg)
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.
![Page 11: WPF & Silverlight UI](https://reader033.fdocuments.in/reader033/viewer/2022061613/55561ce0d8b42ae0238b51c1/html5/thumbnails/11.jpg)
DemoDemoLayout and Transforms with XAML
![Page 12: WPF & Silverlight UI](https://reader033.fdocuments.in/reader033/viewer/2022061613/55561ce0d8b42ae0238b51c1/html5/thumbnails/12.jpg)
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
![Page 13: WPF & Silverlight UI](https://reader033.fdocuments.in/reader033/viewer/2022061613/55561ce0d8b42ae0238b51c1/html5/thumbnails/13.jpg)
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
![Page 14: WPF & Silverlight UI](https://reader033.fdocuments.in/reader033/viewer/2022061613/55561ce0d8b42ae0238b51c1/html5/thumbnails/14.jpg)
Data BindingData Binding
![Page 15: WPF & Silverlight UI](https://reader033.fdocuments.in/reader033/viewer/2022061613/55561ce0d8b42ae0238b51c1/html5/thumbnails/15.jpg)
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
![Page 16: WPF & Silverlight UI](https://reader033.fdocuments.in/reader033/viewer/2022061613/55561ce0d8b42ae0238b51c1/html5/thumbnails/16.jpg)
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
![Page 17: WPF & Silverlight UI](https://reader033.fdocuments.in/reader033/viewer/2022061613/55561ce0d8b42ae0238b51c1/html5/thumbnails/17.jpg)
DemoDemoWPF Data Binding in XAML
![Page 18: WPF & Silverlight UI](https://reader033.fdocuments.in/reader033/viewer/2022061613/55561ce0d8b42ae0238b51c1/html5/thumbnails/18.jpg)
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>
![Page 19: WPF & Silverlight UI](https://reader033.fdocuments.in/reader033/viewer/2022061613/55561ce0d8b42ae0238b51c1/html5/thumbnails/19.jpg)
DemoDemoWPF Data Templates in XAML
![Page 20: WPF & Silverlight UI](https://reader033.fdocuments.in/reader033/viewer/2022061613/55561ce0d8b42ae0238b51c1/html5/thumbnails/20.jpg)
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
![Page 21: WPF & Silverlight UI](https://reader033.fdocuments.in/reader033/viewer/2022061613/55561ce0d8b42ae0238b51c1/html5/thumbnails/21.jpg)
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
![Page 22: WPF & Silverlight UI](https://reader033.fdocuments.in/reader033/viewer/2022061613/55561ce0d8b42ae0238b51c1/html5/thumbnails/22.jpg)
DemoDemoStyles and Templates
![Page 23: WPF & Silverlight UI](https://reader033.fdocuments.in/reader033/viewer/2022061613/55561ce0d8b42ae0238b51c1/html5/thumbnails/23.jpg)
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.
![Page 24: WPF & Silverlight UI](https://reader033.fdocuments.in/reader033/viewer/2022061613/55561ce0d8b42ae0238b51c1/html5/thumbnails/24.jpg)
DemoDemoAnimation
![Page 25: WPF & Silverlight UI](https://reader033.fdocuments.in/reader033/viewer/2022061613/55561ce0d8b42ae0238b51c1/html5/thumbnails/25.jpg)