MIX’09 – Reviewing – Building Microsoft Silverlight Controls

Karen Corby – Lead Program Manager on Silverlight Team - http://scorbs.com/work

“One major difference between site with a strong Brand Image … and one with weak Brand Image … is that brand positioning permeates every part of a strong site …” – Forrester, June 9, 2005

  1. Styling
    • “Property Bag” styling
    • Through the <Style> element
    • Works with Controls , UserControls, Shapes, Panels
    • App.xaml now support the MergedResourceDictionaries functionality like in WPF
      • <ResourceDictionary.MergedDictionaries>
        • <ResourceDictionary Source=”Assets.xaml”/>
      • </ResourceDictionary.MergedDictionaries>
    • Styles now support BasedOn
      • <Style x:Key=”NewStyle” BasedOn=”{StaticResource BaseStyle}”>
  2. Skinning
    • Completely replace visuals
    • Through <ControlTemplate> element
    • {TemplaceBinding} extension
    • Works with Custom Controls (not UserControls, Panels, Shapes)
    • Based on a well defined separation with: (same way as in Silverlight 2.0)
      • Control Logic
      • Control Visuals
    • Parts and States Model
      • Goals:
        • Make it easy to skin your control
        • Defined separation between logic and visuals
        • Explicit control contract
      • Parts:
        • Names element (x:Name) in Template
        • Why is it needed to be a named element? Because, code manipulates element in same way.
      • States:
        • Visual look of control in a particular state
        • Thought <VisualState> element
        • Not all ControlTemplates need a Visual State
      • StateGroups:
        • Set of mutually exclusive states
        • Different state groups are orthogonal
        • Though the <VisualStateGroup> element
      • Using States and Transitions
        • VisualStateManager.VisualStateGroups
          • Attached Properties on root visual of ControlTemplate
        • VisualStateGroup
          • Contains group of related states
        • VisualState class
          • Contains storyboard that represents visual look
        • VisualTransition class
          • Contains duration for automatic transition animations
          • Contains storyboard for explicit transition animations
          • Default, or “To/From” transitions
          • GeneratedEasingFunction that is part of Silverlight 3 and that make it easy to define how an animation will work without the need to a storyboard
  3. Data Binding
    • Validation and Binding
      • Flags we need to enable
        • NotifyOnValidationErrors
        • ValidatesOnExceptions
      • Bindings
        • RelativeSource Binding was included
          • Self & TemplatedParent as source
          • Power of full binding in Templates
            • Attached DP sources, converters, two-way, etc.
        • DependecyProperties as Sources for Bindings
          • Update based on DP changes
      • Out-of-the-Box controls with Validation enabled
        • TextBox
        • CheckBox
        • RadioButton
        • ComboBox
        • ListBox
        • PasswordBox
          • Currently isn’t bindable but it will be in the SL 3.0 RTW
    • Binding and Styles
      • ElementName binding
        • “UI to UI binding”
        • FrameworkElement can be used as a binding Source
      • The Styles can now be changed in runtime
        • the “write once” style limitation was removed in SL 3.0
    • Silverlight Styling vs WPF Styling
      • Currently not supported in SL 3.0
        • Implicit Styles
          • A workaround was used in the Silverlight Toolkit
        • Dynamic Resources
        • Triggers
          • Blend’s Behaviors
  4. Custom Controls
    • Based on Control class
    • Add the Control Contract in the Control Logic Class
      • TemplateVisualState elements
      • TemplatePart elements
    • Generic.xaml
      • Specific element and it must be placed inside a folder named themes on your project
      • Needs to be placed as a Resource on the project
    • Define the DefaultStyleKey property
      • Informs the element that it should go to the generic.xaml to get the default style
    • “Look-less” by default
    • Silverlight and WPF Skinning Model
      • Same Model
  5. From Silverlight to WPF
    • Viewbox in Silverlight is part of the Toolkit and in WPF is part of the core runtime
    • VSM in WPF is part of the WPF Toolkit and in Silverlight is in the core runtime – Will be part of the core runtime of WPF in the next version
    • EasingFunctions are part of the Silverlight core runtime and will only be part of the next version of WPF
  6. Layout
    • Custom Panels
    • In Silverlight is two pass algorithm
      • Measure
        • Check How much space do you need
      • Arrange
        • Having the space needed arrange your elements inside it

   One more very interesting talk about Silverlight in MIX'09 and that showed up some very important new features in terms of Styling, Skinning and Custom Control definition.

No Comments