Creating Rich, Dynamic

User Interfaces with Silverlight 2 ControlsKaren CorbyProgram ManagerMicrosoft Corporationhttp://scorbs.com/work

Control Model

Silverlight 1

Silverlight 2

UserControl

Custom Control

Styling

Skinning

Parts Model

Motivation for UserControl

Motivation for UserControl

UserControl

ScenarioFixed look with some logicSplit large page into smaller chunksReuse xaml/logic in multiple places

Platform Support<UserControl x:Class=“MyControl”> … </>public partial class MyControl : UserControl {}XAML is optional

UserControl Trivia

Update from 1.1 AlphaReplaces Control.InitializeFromXaml(“…”)

A Silverlight “page” is a UserControlVisual elementsDatabindingTabbingMouse & keyboard events… and so on

UserControl

Building a UserControl

demo

Accessibility

Complete keyboard accessibilityFull tab navigation supportFull focus supportCan implement own directional navigation

Screen reader support coming in Beta2Based on UIAutomationMark Rideout’s video:

Some additional work for full 508 compliance

High Contrast

User Controls

Control Logic Control Visuals

Custom Controls

Skinning

Property Bag “Styling”

Scenario Tweek minor visual characteristics

Platform SupportManually setting visual properties on control<Style>

Customizing Existing Controls

Styling

Styling

Using <Style>

demo

Property Bag “Styling”

ResourcesA shared XAML asset that can be referenced by multiple elements in your application.

<Style>A set of properties that can be applied to controls, text, shapes, …

Silverlight 2“Write once” behaviorApplication theme styles not supportedBasedOn styles not supported

Customizing Existing Controls

Skinning

“Skinning”

ScenarioCompletely replace control’s visuals

Platform Support<ControlTemplate>Styling

Skinning

Using <ControlTemplate>

demo

Skinning

<ControlTemplate>A set of elements that make up the visual structure of a control.

{TemplateBinding}A link between the template visuals and the control’s visual properties

Building a new Custom Control

Control Logic Control Visuals

Building a Custom Control

ScenarioPiece of custom logicDesigners can customize look

Platform SupportDerive from Control classSupply built-in style

Custom Control

Building an ImageControl

demo

Custom Control Structure

Control subclass

generic.xamlAssembly resource in controls dllDefines “built in” styles for control

I’ve got your RootElement,

Pressed State, etc..

I wonder what I

need to put in my template

…

Defining the Control Contract

Control Logic Control Visuals

I need a RootElement,

Pressed State, etc..

Introducing the Parts ModelGoals

How to structure your controlDefined separation between logic & visualsExplicit control contract

Recommended patternNot enforced by runtimeWill be supported by Blend

Parts Model

Element PartsNamed element in templateType: FrameworkElement, Panel, Button, etc..Control logic will control element in some way

DownButton UpButton

Thumb

Track

Part Model

States PartsKeyed resource inside template’s root elementType: StoryboardControl logic begins & stops storyboard

MouseOver

Transition

Initiator

Pressed

STATE part

Code starts/stopsanimation.

ImageControl Parts

RootElementFocusVisualElement

NormalStateMouseOverStatePressedState

Parts Model

ImageControl Parts Contract

demo

Developers & Designers

What's in YourControl Model Toolbox?

UserControls Custom Controls

Styles & TemplatesParts Model

© 2008 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.