Successfully reported this slideshow.

WPF & Silverlight UI

1,385 views

Published on

WPF & Silverlight UI

Published in: Technology
  • Be the first to like this

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 />

×