1. MIX 09
9/12/2018 8:06 AM
© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

2. Building Microsoft Silverlight Controls
9/12/2018 8:06 AM
Building Microsoft Silverlight Controls
Karen Corby
Lead Program Manager
Silverlight
© 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

4. “One major difference between a site with a strong Brand Image
“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. Customizing Control Visuals
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 Merged Resource Dictionaries
Extend existing styles
Merged Resource Dictionaries
Breakout RDs into different files

10. Customizing Control Visuals Skinning
Completely replace visuals
<ControlTemplate> element
{TemplateBinding} extension
Works with Custom Controls
(not UserControls, 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 Recommended pattern
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. Replacing TextBox’s ControlTemplate
demo
Skinning
Replacing TextBox’s ControlTemplate

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 State Transition
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 DependencyProperty as Sources
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 Change Style at runtime
“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. StarControl RatingControl
demo
StarControl RatingControl

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
OK, I asked each of them.
OMG - I need 1000 x 800
Gotcha x 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.
OK, I gave them each some space at a specific X,Y.
BTW, here’s the space I actually ended up using.
Sweet. See you at the tables later? LOL!

35. Using Our Controls with Layout
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 Wishpot APIs: Silverlight My blog (will post video & source)
Wishpot APIs:
Silverlight