Building Microsoft Silverlight Controls

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

4. “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

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

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

7. demo Styling

8. demo Styling

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

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

11. 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>

12. 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

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

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

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

16. 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

17. demo Skinning Replacing TextBox’sControlTemplate

18. 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

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

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

21. 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. 

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

23. demo Skinning in Blend TextBox

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

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

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

27. RatingControl

28. demo StarControlRatingControl

29. 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

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

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

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

33. 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

34. 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!

35. demo Putting it Together Using Our Controls with Layout

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

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