Silverlight Controls Karen Corby Lead Program Manager Silverlight httpscorbscomwork One major difference between a site with a strong Brand Image and one with weak Brand Image is that ID: 598986
Download Presentation The PPT/PDF document "Building Microsoft" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1Slide2
Building Microsoft Silverlight Controls
Karen Corby
Lead Program Manager
Silverlight
http://scorbs.com/workSlide3Slide4
“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, 2005Slide5
On The Menu
Styling
Skinning
Data BindingLayoutSlide6
Customizing Control Visuals
Skinning
Styling
Styling
“Property Bag” Styling
<Style> element
Works with Controls,
UserControls
, Shapes, PanelsSlide7
Styling
demoSlide8
Styling
demoSlide9
New Styling Features
BasedOn
Styles
Extend existing stylesMerged Resource DictionariesBreakout RDs into different filesSlide10
Customizing Control Visuals
Skinning
Skinning
Styling
Completely replace visuals
<
ControlTemplate
> element
{
TemplateBinding
} extension
Works with Custom Controls
(
not
UserControls
, Panels, Shapes)Slide11
Defining the Control Contract
I 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 ControlsSlide12
Parts And States Model
Goals
Make it easy to skin your control
Defined separation between logic & visualsExplicit control contractRecommended patternNot enforced by runtimeSupported by BlendSlide13
Parts
Named element (x:Name) in template
Code manipulates element in some way
Not all Control Contracts have Parts
DownRepeatButton
UpRepeatButton
Thumb
TrackSlide14
States
Visual look of control in a particular state
<
VisualState> elementNot all Control Contracts have StatesMouseOver
PressedSlide15
Transitions
Visual look as control goes between states
<
VisualTransition> element
MouseOver
Pressed
VisualTransitionSlide16
State Group
Set of mutually exclusive states
Different state groups are orthogonal
<VisualStateGroup> element
MouseOver
NormalReadOnly
Disabled
UnfocusedFocusedValid
InvalidUnfocusedValidUnfocused
CommonStates
FocusStates
ValidationStatesSlide17
Skinning
Replacing
TextBox’s
ControlTemplatedemoSlide18
Using States & Transitions
VisualStateManager.VisualStateGroups
Attached property on root visual of
ControlTemplateVisualStateGroupContains group of related statesVisualState class
Contains storyboard that represents visual lookVisualTransition classContains duration for automatic transition animationsContains storyboard for explicit transition animationDefault, or “To/From” transiitionsGeneratedEasingFunction
coming SL3 Post-BetaSlide19
Validation
DataObject
Setter
<
VisualState
/>
in
ControlTemplate
TextBox.Text
={Binding}
New Value
New Value
Validation.Errors
Binding
Engine
Exception
Validation State TransitionSlide20
Validation & Bindings
NotifyOnValidationErrors
ValidatesOnExceptions
Binding flags. Initiate validations.UpdateSourceTriggerNew Binding flag. Enable explicit update.BindingExpression.UpdateSource()Manually update associated Binding.Slide21
Bindings
RelativeSource
Binding
Self & TemplatedParent as sourcePower of full binding in TemplatesAttached DP sources, converters, two-way, etcDependencyProperty as SourcesUpdate based on DP changes. Slide22
Validation UI "Out of Box"
TextBox
CheckBox
RadioButtonComboBoxListBoxPasswordBox (post-Beta)Slide23
Skinning in Blend
TextBox
demoSlide24
Binding & Styles
ElementName
Binding
“UI to UI Binding”FrameworkElement can be binding SourceChange Style at runtimeRemove “write once” Style limitationSlide25
Silverlight Styling vs WPF Styling
Implicit Styles
See Toolkit talk
Dynamic ResourcesTriggersBlend’s BehaviorsSlide26
Creating Custom Controls
Control Logic
Control Visuals
Control.cs
<
ControlTemplate
>Slide27
RatingControlSlide28
StarControlRatingControl
demoSlide29
Building a New Custom Control
Control subclass
“Look-less” by default
generic.xamlResourceDictionary with Built-in StyleDefaultStyleKeyUsed to determine which built-in style to useSlide30
Creating The Control Class Logic
[
TemplatePart
] & [TemplateVisualState] NOT used by runtime. Leveraged by tools.public static VisualStateManager.GoToState()Manages visual state change logic & transitionsSlide31
Silverlight & WPF Skinning
Same Model
VisualStateManager
in WPF ToolkitSee WPF/SL Talk Slide32
Layout
Custom Panels
Two pass algorithms
MeasureArrangeSlide33
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 800Layout:Gotcha. 1000 x 800.
ttys Slide34
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!Slide35
Putting it Together
Using Our Controls with Layout
demoSlide36
Power of the Siverlight Control Model
Styling
Skinning
DataBindingLayout
A true branded experience permeates every aspect of you site.Slide37
Resources
My blog (will post video & source)
http://scorbs.com/work
Wishpot APIs:http://www.wishpot.com/help/developers.aspxSilverlighthttp://silverlight.net