View
219
Download
0
Tags:
Embed Size (px)
Citation preview
Creating Rich, Dynamic
User Interfaces with Silverlight 2 ControlsKaren CorbyProgram ManagerMicrosoft Corporationhttp://scorbs.com/work
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
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
Skinning
Property Bag “Styling”
Scenario Tweek minor visual characteristics
Platform SupportManually setting visual properties on control<Style>
Customizing Existing Controls
Styling
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
<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 Custom Control
ScenarioPiece of custom logicDesigners can customize look
Platform SupportDerive from Control classSupply built-in style
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.
© 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.