1 / 37

Building Microsoft Silverlight Controls

Building Microsoft Silverlight Controls. Karen Corby Lead Program Manager Silverlight http://scorbs.com/work. “One major difference between a site with a strong Brand Image ... and one with weak Brand Image ... is that brand positioning permeates every part of a strong site ...”

Download Presentation

Building Microsoft Silverlight Controls

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Building Microsoft Silverlight Controls Karen Corby Lead Program Manager Silverlight http://scorbs.com/work

  2. “One major difference between a 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

  3. On The Menu • Styling • Skinning • Data Binding • Layout

  4. Styling Customizing Control Visuals • “Property Bag” Styling • <Style> element • Works with Controls, UserControls, Shapes, Panels Styling Skinning

  5. demo Styling

  6. demo Styling

  7. New Styling Features • BasedOn Styles • Extend existing styles • Merged Resource Dictionaries • Breakout RDs into different files

  8. Skinning Customizing Control Visuals • Completely replace visuals • <ControlTemplate> element • {TemplateBinding} extension • Works with Custom Controls (notUserControls, Panels, Shapes) Styling Skinning

  9. Defining the Control Contract Custom Controls I wonder what I need to put in my template… I need a Thumb, Pressed state etc.. I’ve got your Thumb, Pressed state, etc.. Control Logic Control Visuals Control.cs <ControlTemplate>

  10. Parts And States Model • Goals • Make it easy to skin your control • Defined separation between logic & visuals • Explicit control contract • Recommended pattern • Not enforced by runtime • Supported by Blend

  11. Parts • Named element (x:Name) in template • Code manipulates element in some way • Not all Control Contracts have Parts DownRepeatButton Thumb UpRepeatButton Track

  12. States • Visual look of control in a particular state • <VisualState> element • Not all Control Contracts have States MouseOver Pressed

  13. Transitions • Visual look as control goes between states • <VisualTransition> element VisualTransition MouseOver Pressed

  14. State Group • Set of mutually exclusive states • Different state groups are orthogonal • <VisualStateGroup> element Normal MouseOver CommonStates ReadOnly Disabled Valid InvalidUnfocused ValidationStates ValidUnfocused Unfocused FocusStates Focused

  15. demo Skinning Replacing TextBox’sControlTemplate

  16. Using States & Transitions • VisualStateManager.VisualStateGroups • Attached property 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 animation • Default, or “To/From” transiitions • GeneratedEasingFunction coming SL3 Post-Beta

  17. Validation New Value <VisualState/> in ControlTemplate TextBox.Text={Binding} Binding Engine Validation.Errors New Value Validation State Transition Exception DataObject Setter

  18. Validation & Bindings • NotifyOnValidationErrors • ValidatesOnExceptions • Binding flags. Initiate validations. • UpdateSourceTrigger • New Binding flag. Enable explicit update. • BindingExpression.UpdateSource() • Manually update associated Binding.

  19. Bindings • RelativeSource Binding • Self & TemplatedParent as source • Power of full binding in Templates • Attached DP sources, converters, two-way, etc • DependencyProperty as Sources • Update based on DP changes. 

  20. Validation UI "Out of Box" • TextBox • CheckBox • RadioButton • ComboBox • ListBox • PasswordBox (post-Beta)

  21. demo Skinning in Blend TextBox

  22. Binding & Styles • ElementName Binding • “UI to UI Binding” • FrameworkElement can be binding Source • Change Style at runtime • Remove “write once” Style limitation

  23. Silverlight Styling vs WPF Styling • Implicit Styles • See Toolkit talk • Dynamic Resources • Triggers • Blend’s Behaviors

  24. Creating Custom Controls Control Logic Control Visuals Control.cs <ControlTemplate>

  25. RatingControl

  26. demo StarControlRatingControl

  27. Building a New Custom Control • Control subclass • “Look-less” by default • generic.xaml • ResourceDictionary with Built-in Style • DefaultStyleKey • Used to determine which built-in style to use

  28. Creating The Control Class Logic • [TemplatePart] & [TemplateVisualState] • NOT used by runtime. Leveraged by tools. • public static VisualStateManager.GoToState() • Manages visual state change logic & transitions

  29. Silverlight & WPF Skinning • Same Model • VisualStateManager in WPF Toolkit • See WPF/SL Talk

  30. Layout • Custom Panels • Two pass algorithms • Measure • Arrange

  31. Layout: Measure Layout: How much space do you think you need? Panel: Let me ask my children… Brb Panel: OK, I asked each of them. OMG - I need 1000 x 800 Layout: Gotcha. 1000 x 800. ttys

  32. Layout: Arrange Layout: OK – Got the space for ya. Arrange yourself in here. Panel: Will do. Let me go arrange all my children. One sec. Panel: OK, I gave them each some space at a specific X,Y. BTW, here’s the space I actually ended up using. Layout: Sweet. See you at the tables later? LOL!

  33. demo Putting it Together Using Our Controls with Layout

  34. Power of the Siverlight Control Model • Styling • Skinning • DataBinding • Layout A true branded experience permeates every aspect of you site.

  35. Resources • My blog (will post video & source) • http://scorbs.com/work • Wishpot APIs: • http://www.wishpot.com/help/developers.aspx • Silverlight • http://silverlight.net

More Related