WPF & Silverlight UI


Published on

WPF & Silverlight UI

Published in: Technology
1 Comment
  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • The logical tree exists so that content models can readily iterate over their possible child elements, and so that content models can be extensible. Also, the logical tree provides a framework for certain notifications, such as when all elements in the logical tree are loaded.In addition to the concept of the logical tree, there is also the concept of the visual tree in WPF. The visual tree describes the structure of visuals represented by the Visual base class. When you write a template for a control, you are defining or redefining the visual tree that applies for that control. The visual tree is also of interest to developers who want lower-level control over drawing for performance and optimization reasons. One exposure of the visual tree as part of conventional WPF application programming is that event routes for a routed event mostly travel along the visual tree, not the logical tree. This subtlety of routed event behaviour might not be immediately apparent unless you are a control author. Routing through the visual tree enables controls that implement composition at the visual level to handle events or create event setters.
  • XAMLPad Visual Tree
  • Feature Montage demo
  • Layout is based on the Panel Class… Canvas, StackPanel and Grid are all instances of Panels.. The value of panel is that it has the Children collection, it pre-wires all the arranges making it easy to override, and you get a consistent base class so you can do polymorphism as needed. Panel also has basic layout heuristics like firing Invalidate when Width or other layout property changes, etc..
  • XAML Layout demos
  • Converters is a very handy data binding feature.. When you are binding to an object that has a property of a type that does not match the type represented by the UI you want to show, you can use a converter to shape your object into some thing the UI can understand.. For example, when we look at financials data, common convention is 0 == Black and < 0 == Red… To take a number ( e.g. quote) and translate it to a color, we could use a converter. This would increase reuse as the converter can be reused. It also works seamlessly with data binding and is part of the binding pipeline.. So you don’t have to write business logic or add extra properties to objects..
  • WPF & XAML Data Binding demos
  • Property Trigger– Invoked when the value of a dependency property changesData Trigger – Invoked when the value of a plain .NET property changesEvent Trigger – Invoked when a routed event is raised
  • XAML Demos for Style and Triggershttp://silverlight.net/learn/learnvideo.aspx?video=66711
  • XAML Demos
  • WPF & Silverlight UI

    1. 1. WPF & Silverlight 2.0 UI with XAML<br />Dave Allen<br />ISV Application Architect<br />Developer and Platform Group<br />Microsoft UK<br />
    2. 2. Agenda<br />New WPF & Silverlight concepts<br />Controls<br />Layout, Positioning, Transforms, and Navigation<br />Resources<br />Data Binding & Data Templates<br />Styles and Templates<br />Animation<br />
    3. 3. Logical & Visual Trees<br />Logical tree<br />Enable iteration of children<br />Framework for notifications<br />Not just in XAML<br />Visual tree does not contain all elements of logical tree<br />Routed events travel along Visual Tree not the Logical Tree<br />
    4. 4. Demo<br />XAMLPad Visual Tree<br />
    5. 5. Dependency properties<br />Extend functionality of.NET(CLR) properties<br />Provide built-in change notifications<br />Events handled in just XAML<br />Compute value of a property based on other inputs<br />Support multiple providers <br />Dependency properties enable:<br />Animation<br />Data binding<br />Property value inheritance<br />Attached properties<br />Etc.<br />
    6. 6. Routed Events<br />Extend functionality of .NET(CLR) events<br />Designed to work with a tree of elements<br />Can travel up or down the visual and logical tree<br />Routing strategies<br />Tunneling<br />Event raised on root until source reached or handled<br />Bubbling<br />Event raised on source until root is reached or handled<br />Direct<br />Event only raised on source element<br />Allow attached events<br />
    7. 7. WPF Controls<br />Content, Items, Range and Text controls<br />Controls in the box<br />Common<br />Border, Button, CheckBox, ComboBox, Image, Label, ListBox, Radio, Rectangle, Tab, TextBox<br />Other<br />WebBrowser, Content, DocViewer, Ellipse, Expander, Frame, GridSplitter, GroupBox, ListView, MediaElement, Menu, PasswordBox, ProgressBar, RichTextBox, ScrollBar, ScrollViewer, Seperator, Slider, StatusBar, TextBlock, ToolBar, TreeView, ViewBox, WinFormsHost<br />Layout<br />Canvas, DockPanel, Grid, StackPanel, WrapPanel<br />
    8. 8. Demo<br />WPF Controls<br />
    9. 9. Silverlight 2.0 Controls<br />Controls in the box<br />Button, Calendar, Checkbox, Datagrid, DateTimePicker, GridSplitter, HyperLink, Image, ListBox, MediaElement, MultiScaleImage, Popup, Radio, Slider, TextBox, TextBlock, Toggle, Tooltip, etc.<br />Layout <br />Canvas<br />Border<br />StackPanel<br />Grid<br />User Control – aggregation of existing controls<br />
    10. 10. Layout, positioning, and transforms<br />Panel base class<br />Children collection<br />MeasureOverride<br />Panel passes available Size to each child<br />Child determines its DesiredSize<br />ArrangeOveride<br />Panel positions its children<br />Transforms<br />Rotate<br />Scale<br />Skew<br />Etc.<br />
    11. 11. Demo<br />Layout and Transforms with XAML<br />
    12. 12. WPF Navigation<br />WPF supports browser-style navigation<br />WPF classes that support navigation<br />Page – root element for windows that support navigation<br />Hyperlink – simple navigation mechanism<br />NavigationService – for more complex navigation<br />JournalEntry – holds the back and forwards stacks and maintains state<br />NavigationCommands – direct control over navigation<br />Silverlight doesn’t support navigation!<br />Community patterns emerging<br />
    13. 13. Resources<br />Binary resources – same as they always were<br />Logical (XAML) Resources<br />Share resources across Windows and Elements in XAML<br />Styles<br />Data Sources<br />Etc.<br />Static Resources<br />Applies only once<br />Dynamic Resources<br />Provide dynamic updates, e.g. changing font size<br />Work with Dependency Properties<br />
    14. 14. Data Binding<br />
    15. 15. Data Binding (2)<br />Sharing Source with DataContext<br />Property on FrameworkElement (FE) that defines the data source for that element and all elements in that sub-tree<br />XAML Binding will traverse hierarchy until DataContext is found<br />Binding Modes<br />One-way<br />Updates to Data Source object are reflected in the UI<br />DataSource implements INotifyPropertyChanged for notification<br />Two-way<br />Changes to the UI update the .NET object<br />
    16. 16. Data Binding (3)<br />For controls that support collections<br />ItemSource binds to anything that supports IEnumerable<br />Must implement INotifyPropertyChanged<br />Use ObservableCollection<T> as this has change notification built in<br />Write value converters for different types<br />Implement IValueConveter<br />Can be used with XAML Binding syntax<br />One or Two Way<br />From source = Convert <br />From target = ConvertBack<br />
    17. 17. Demo<br />WPF Data Binding in XAML<br />
    18. 18. Data Templates<br />Allow customization of visualization of data<br />Most commonly used with Data Binding<br />DataTemplate<br />class Car<br />{<br /> string Image {get;set}<br /> string Model {get;set]<br />}<br /><DataTemplate x:Key="carTemplate"><br /> <Border BorderBrush="Blue" BorderThickness="2" Background="LightGray"<br /> Margin="10" Padding="15,15,15,5"><br /> <StackPanel><br /> <Image HorizontalAlignment="Center" Source="{Binding Path=Image}" /><br /> <Border HorizontalAlignment="Center" BorderBrush="Navy"<br /> Background="#DDF“ BorderThickness="1" Margin="10" Padding="3"><br /> <TextBlockFontSize="18" TextContent="{Binding Path=Model}" /><br /> </Border> </StackPanel><br /> </Border><br /></DataTemplate><br />
    19. 19. Demo<br />WPF Data Templates in XAML<br />
    20. 20. Styles and Triggers<br />Styles<br />Probably the most compelling feature of WPF/Silverlight<br />The ability to stylize an application without building from scratch<br />Separates property values from UI elements, similar to CSS<br />Nothing inherently visual about Styles, just groups properties<br />Share style amongst heterogeneous elements<br />Triggers<br /> Apply style based on a condition<br />Property Trigger<br />Data Trigger<br />Event Trigger<br />Conflicting triggers – last one wins<br />
    21. 21. Control Templates<br />What tells controls how to visualize themselves<br />Can be replaced without impacting functionality<br />Completely customize the Visual Tree<br />Work closely with Triggers<br />Respect the control name, look, & feel<br />If it’s a button is should have some resemblance and functionality of a button<br />Very dangerous in the wrong hands<br />
    22. 22. Demo<br />Styles and Templates<br />
    23. 23. Animation<br />Not just for Disney!<br />Animation much more subtle than spinning buttons<br />Button MouseOver event uses animation<br />Animation classes<br />164 classes to support animation of different .NET types<br />No support for Generics in XAML<br />DoubleAnimation, ColorAnimation, ThicknessAnimaton, etc.<br />Storyboard<br />Container for animation<br />Derives from Timeline<br />Holds animation properties such as Duration, RepeatBehavior, etc.<br />
    24. 24. Demo<br />Animation<br />