Building Microsoft Silverlight Controls

Karen CorbyLead Program ManagerSilverlighthttp://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 ...”

- Forrester, June 9, 2005

On The Menu

StylingSkinningData BindingLayout

Customizing Control Visuals

SkinningStyling

Styling

“Property Bag” Styling

<Style> element

Works with Controls, UserControls, Shapes, Panels

Styling

demo

Styling

demo

New Styling Features

BasedOn StylesExtend existing styles

Merged Resource DictionariesBreakout RDs into different files

Customizing Control VisualsSkinning

SkinningStyling

Completely replace visuals

<ControlTemplate> element

{TemplateBinding} extension

Works with Custom Controls (not UserControls, Panels,

Shapes)

Defining the Control ContractI need a

Thumb, Pressed state

etc..

I wonder what I need to put in my template…

I’ve got your Thumb,Pressed

state, etc..

Control Logic Control Visuals

Control.cs <ControlTemplate>

Custom Controls

Parts And States Model

GoalsMake it easy to skin your controlDefined separation between logic & visualsExplicit control contract

Recommended patternNot enforced by runtimeSupported by Blend

Parts

Named element (x:Name) in templateCode manipulates element in some way Not all Control Contracts have Parts

DownRepeatButton

UpRepeatButton

Thumb

Track

States

Visual look of control in a particular state<VisualState> elementNot all Control Contracts have States

MouseOver Pressed

Transitions

Visual look as control goes between states<VisualTransition> element

MouseOverPressed

VisualTransition

State Group

Set of mutually exclusive statesDifferent state groups are orthogonal<VisualStateGroup> element

MouseOver

Normal

ReadOnly

Disabled

Unfocused

Focused

Valid

InvalidUnfocused

ValidUnfocused

CommonStates

FocusStates

ValidationStates

Skinning

Replacing TextBox’s ControlTemplate

demo

Using States & Transitions

VisualStateManager.VisualStateGroupsAttached property on root visual of ControlTemplate

VisualStateGroupContains group of related states

VisualState classContains storyboard that represents visual look

VisualTransition classContains duration for automatic transition animationsContains storyboard for explicit transition animationDefault, or “To/From” transiitionsGeneratedEasingFunction coming SL3 Post-Beta

Validation

DataObject

Setter

<VisualState/>in

ControlTemplate

TextBox.Text={Binding}

New Value

New Value

Validation.Errors

BindingEngine

ExceptionValidation State Transition

Validation & Bindings

NotifyOnValidationErrorsValidatesOnExceptions

Binding flags. Initiate validations.

UpdateSourceTriggerNew Binding flag. Enable explicit update.

BindingExpression.UpdateSource()

Manually update associated Binding.

Bindings

RelativeSource BindingSelf & TemplatedParent as sourcePower of full binding in Templates

Attached DP sources, converters, two-way, etc

DependencyProperty as SourcesUpdate based on DP changes. 

Validation UI "Out of Box"

TextBoxCheckBoxRadioButtonComboBoxListBoxPasswordBox (post-Beta)

Skinning in Blend

TextBox

demo

Binding & Styles

ElementName Binding“UI to UI Binding”FrameworkElement can be binding Source

Change Style at runtimeRemove “write once” Style limitation

Silverlight Styling vs WPF Styling

Implicit StylesSee Toolkit talk

Dynamic Resources

TriggersBlend’s Behaviors

Creating Custom Controls

Control Logic Control Visuals

Control.cs <ControlTemplate>

RatingControl

StarControlRatingControl

demo

Building a New Custom Control

Control subclass“Look-less” by default

generic.xamlResourceDictionary with Built-in Style

DefaultStyleKeyUsed to determine which built-in style to use

Creating The Control Class Logic

[TemplatePart] & [TemplateVisualState]

NOT used by runtime. Leveraged by tools.

public static VisualStateManager.GoToState()

Manages visual state change logic & transitions

Silverlight & WPF Skinning

Same Model

VisualStateManager in WPF Toolkit

See WPF/SL Talk

Layout

Custom Panels

Two pass algorithmsMeasureArrange

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

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!

Putting it Together

Using Our Controls with Layout

demo

Power of the Siverlight Control Model

StylingSkinningDataBindingLayout

A true branded experience permeates every aspect of you site.

Resources

My blog (will post video & source)http://scorbs.com/work

Wishpot APIs:http://www.wishpot.com/help/developers.aspx

Silverlighthttp://silverlight.net