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.

Building Microsoft Silverlight Controls 9/12/2018 8:06 AM Building Microsoft Silverlight Controls Karen Corby Lead Program Manager Silverlight http://scorbs.com/work © 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.

“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

On The Menu Styling Skinning Data Binding Layout

Customizing Control Visuals Styling Customizing Control Visuals “Property Bag” Styling <Style> element Works with Controls, UserControls, Shapes, Panels Styling Skinning

demo Styling

demo Styling

New Styling Features BasedOn Styles Merged Resource Dictionaries Extend existing styles Merged Resource Dictionaries Breakout RDs into different files

Customizing Control Visuals Skinning Completely replace visuals <ControlTemplate> element {TemplateBinding} extension Works with Custom Controls (not UserControls, Panels, Shapes) Styling Skinning

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>

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

Parts Named element (x:Name) in template Code manipulates element in some way Not all Control Contracts have Parts DownRepeatButton Thumb UpRepeatButton Track

States Visual look of control in a particular state <VisualState> element Not all Control Contracts have States MouseOver Pressed

Transitions Visual look as control goes between states <VisualTransition> element VisualTransition MouseOver Pressed

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

Replacing TextBox’s ControlTemplate demo Skinning Replacing TextBox’s ControlTemplate

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

Validation State Transition New Value <VisualState/> in ControlTemplate TextBox.Text={Binding} Binding Engine Validation.Errors New Value Validation State Transition Exception DataObject Setter

Validation & Bindings NotifyOnValidationErrors ValidatesOnExceptions Binding flags. Initiate validations. UpdateSourceTrigger New Binding flag. Enable explicit update. BindingExpression.UpdateSource() Manually update associated Binding.

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. 

Validation UI "Out of Box" TextBox CheckBox RadioButton ComboBox ListBox PasswordBox (post-Beta)

demo Skinning in Blend TextBox

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

Silverlight Styling vs WPF Styling Implicit Styles See Toolkit talk Dynamic Resources Triggers Blend’s Behaviors

Creating Custom Controls Control Logic Control Visuals Control.cs <ControlTemplate>

RatingControl

StarControl RatingControl demo StarControl RatingControl

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

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 algorithms Measure Arrange

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. 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. 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!

Using Our Controls with Layout demo Putting it Together Using Our Controls with Layout

Power of the Siverlight Control Model Styling Skinning DataBinding Layout A true branded experience permeates every aspect of you site.

Resources Wishpot APIs: Silverlight My blog (will post video & source) http://scorbs.com/work Wishpot APIs: http://www.wishpot.com/help/developers.aspx Silverlight http://silverlight.net