1 / 37

Silverlight 2 Control Model

Silverlight 2 Control Model. Karen Corby Senior Program Manager http://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.

zayit
Download Presentation

Silverlight 2 Control Model

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Silverlight 2 Control Model Karen Corby Senior Program Manager http://scorbs.com/work

  2. “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

  3. On The Menu • Overview of Control Model • Skinnable Control and Parts & States Model • Silverlight & WPF

  4. Silverlight 2 Control Model • UserControl • Custom Control • Styling • Skinning

  5. User Controls Custom Controls Modularized Logic Designer Can Update Look Application Decomposition “Cheesy Re-use” Control Logic Control Visuals

  6. Property Bag Styling Customizing Existing Controls <Grid> <Grid.Resources> <Style x:Key="ButtonStyle" TargetType="Button"> <Setter Property="Foreground" Value="Gray"/> <Setter Property="Background" Value="Purple"/> <Setter Property="FontStyle" Value="Italic"/> <Setter Property="FontFamily" Value="Cool.tff#Cool"/> </Style> </Grid.Resources> <Button Style="{StaticResourceButtonStyle}" Content="Button" /> </Grid> Styling Skinning

  7. Skinning Customizing Existing Controls <Grid> <Grid.Resources> <!-- Button Template --> <ControlTemplate x:Key="ButtonTemplate" TargetType="Button"> <Grid> <Path Height="120.646" Width="129.736" Stretch="Fill" Data="M204, ... , 155" Stroke="#FFF77474“ Fill="{TemplateBinding Background}"/> <ContentPresenter Foreground="White" ... /> </Grid> </ControlTemplate> </Grid.Resources> <!-- Button --> <Button Content="Button" Template="{StaticResourceButtonTemplate}"> <Button.Background> <RadialGradientBrush> <GradientStop Color="#FFF4A1A1"/> <GradientStop Color="#FFBD2121" Offset="1"/> </RadialGradientBrush> </Button.Background> </Button> </Grid> Styling Skinning

  8. Silverlight 2 Control Model • UserControl • Custom Control • Styling • Skinning • How do you create a new Custom Control?

  9. demo Building a Custom Control

  10. Custom Control Structure • Control subclass • “Look-less” by default • generic.xaml • ResourceDictionary with Built-in Style • DefaultStyleKey • Used to determine which built-in style to use

  11. Defining the Control Contract 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

  12. Introducing The Parts And States Model • Goals • How to structure your control • Defined separation between logic & visuals • Explicit control contract • Recommended pattern • Not enforced by runtime • Will be supported by Blend

  13. Parts • Named element in template • Code manipulates element in some way • Not all Control Contracts have Parts DownRepeatButton Thumb UpRepeatButton Track

  14. States • Visual look of control in a particular state MouseOver Pressed

  15. Transitions • Visual look of control as it goes between states VisualTransition MouseOver Pressed

  16. State Group • Set of mutually exclusive states • Different state groups are orthogonal

  17. demo CheckBox Skin

  18. Using States • VisualStateManager.VisualStateGroup • VisualStateGroup class • VisualState class • Contains storyboard that represents visual look

  19. Using Transitions • VisualTransition class • Contains duration for automatic transition animations • Automatic Transition Animations • Generate linear transitions for properties set in VisualState by Color, Point, & Double animations

  20. Selecting The VisualTransition • Types of transitions: (MouseOver -> Pressed) • From/To • <VisualTransition To=“Pressed” From=MouseOver” …> • To • <VisualTransition To=“Pressed” … > • From • <VisualTransition From=“MouseOver” … > • Default • <VisualTransition …> • Selects most specific transition

  21. VisualStateManager VisualStateManager GoToState() VisualStateGroups Defined in template Called in control code

  22. demo WeatherControl

  23. Microsoft Confidential Creating The Control Class Logic • [TemplatePart] & [TemplateVisualState] • NOT used by runtime. Leveraged by tools. • public static VisualStateManager.GoToState() • Manages visual state change logic & transitions • public override void OnApplyTemplate() • Called when new template has been applied

  24. More Interesting Transitions… • Can provide explicit transitions animations • VisualTransition.Storyboard

  25. Developers & Designers

  26. demo Skinning in Blend

  27. Silverlight & WPF Control Model • The Same: • UserControl, CustomControl • <Style>, <ControlTemplate> • Silverlight 2’s <Style> • Write-Once Style Property • No BasedOn Styles Support • No Application-level Themes Support • VisualStateManager on WPF? • Triggers in Silverlight?

  28. VisualStateManager in WPF • Enables easy port of controls & skins • Today: • http://www.codeplex.com/wpf/Release • Future: • Next release of WPF

  29. demo VisualStateManager on WPF

  30. VisualStateBehaviors • Attach VSM skin to existing WPF control • WPFToolkit comes with: • ButtonBaseBehavior { Button, ToggleButton} • ListBoxItemBehavior • ProgressBarBehavior • TextBoxBehavior • ToggleButtonBehavior {CheckBox, RadioButton}

  31. Triggers in Silverlight • XAML can react to property changes or events • Expected in a future release of Silverlight • VisualStateManager to work with Triggers • <Trigger …> • <GoToState “MouseOver”/> • </Trigger>

  32. Be Your Own Button • Use Custom Controls, ControlTemplates & Visual StateManager to create deeply customized, branded controls • Control Model consistency between WPF & Silverlight http://scorbs.com/work

  33. evaluations Please fill out the online evalutions!

  34. Q&A Please use the microphones provided

  35. Links • Karen Corby’s Blog: • http://scorbs.com/work • Silverlight Site • http://silverlight.net • Silverlight Toolkit • http://codeplex.com/Silverlight • WPF Toolkit • http://www.codeplex.com/wpf

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

More Related