Styling
UserControl           Skinning




 Custom Control
                  Parts Model
Scenario
  Fixed look with some logic
  Split large page into smaller chunks
  Reuse xaml/logic in multiple places
Platfor...
Update from 1.1 Alpha
  Replaces Control.InitializeFromXaml(“…”)
A Silverlight “page” is a UserControl
  Visual elements
 ...
Complete keyboard accessibility
  Full tab navigation support
  Full focus support
  Can implement own directional navigat...
Scenario
  Tweek minor visual characteristics
Platform Support
  Manually setting visual properties on control
  <Style>
Resources
   A shared XAML asset that can be referenced
   by multiple elements in your application.
<Style>
   A set of p...
Scenario
  Completely replace control’s visuals
Platform Support
  <ControlTemplate>
<ControlTemplate>
  A set of elements that make up the visual
  structure of a control.

{TemplateBinding}
  A link betwee...
Scenario
  Piece of custom logic
  Designers can customize look
Platform Support
  Derive from Control class
  Supply buil...
Control subclass

generic.xaml
  Assembly resource in controls dll
  Defines “built in” styles for control
I wonder
  I need a        I’ve got your
                what I need
RootElement,      RootElement,
  Pressed       to put...
Goals
  How to structure your control
  Defined separation between logic & visuals
  Explicit control contract

Recommende...
Element Parts
  Named element in template
  Type: FrameworkElement, Panel, Button, etc..
  Control logic will control elem...
States Parts
         Keyed resource inside template’s root element
         Type: Storyboard
         Control logic begin...
RootElement          NormalState
FocusVisualElement   MouseOverState
                     PressedState
UserControls
Custom Controls

Styles & Templates
Parts Model
© 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be...
Creating Rich, Dynamic User Interfaces with Silverlight 2
Creating Rich, Dynamic User Interfaces with Silverlight 2
Creating Rich, Dynamic User Interfaces with Silverlight 2
Creating Rich, Dynamic User Interfaces with Silverlight 2
Creating Rich, Dynamic User Interfaces with Silverlight 2
Creating Rich, Dynamic User Interfaces with Silverlight 2
Creating Rich, Dynamic User Interfaces with Silverlight 2
Creating Rich, Dynamic User Interfaces with Silverlight 2
Creating Rich, Dynamic User Interfaces with Silverlight 2
Creating Rich, Dynamic User Interfaces with Silverlight 2
Creating Rich, Dynamic User Interfaces with Silverlight 2
Creating Rich, Dynamic User Interfaces with Silverlight 2
Upcoming SlideShare
Loading in...5
×

Creating Rich, Dynamic User Interfaces with Silverlight 2

795

Published on

See how to use the Microsoft Silverlight 2 control model to efficiently design and develop custom controls, style existing controls, create control templates, and package your controls for re-use to develop Rich Internet Applications. Also hear about the capabilities for localization and accessibility.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
795
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Creating Rich, Dynamic User Interfaces with Silverlight 2

  1. 1. Styling UserControl Skinning Custom Control Parts Model
  2. 2. Scenario Fixed look with some logic Split large page into smaller chunks Reuse xaml/logic in multiple places Platform Support <UserControl x:Class=“MyControl”> … </> public partial class MyControl : UserControl {} XAML is optional
  3. 3. Update from 1.1 Alpha Replaces Control.InitializeFromXaml(“…”) A Silverlight “page” is a UserControl Visual elements Databinding Tabbing Mouse & keyboard events … and so on
  4. 4. Complete keyboard accessibility Full tab navigation support Full focus support Can implement own directional navigation Screen reader support coming in Beta2 Based on UIAutomation Mark Rideout’s video: Some additional work for full 508 compliance High Contrast
  5. 5. Scenario Tweek minor visual characteristics Platform Support Manually setting visual properties on control <Style>
  6. 6. Resources A 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” behavior Application theme styles not supported BasedOn styles not supported
  7. 7. Scenario Completely replace control’s visuals Platform Support <ControlTemplate>
  8. 8. <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
  9. 9. Scenario Piece of custom logic Designers can customize look Platform Support Derive from Control class Supply built-in style
  10. 10. Control subclass generic.xaml Assembly resource in controls dll Defines “built in” styles for control
  11. 11. I wonder I need a I’ve got your what I need RootElement, RootElement, Pressed to put in State, Pressed my template… State, etc.. etc..
  12. 12. 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. 13. Element Parts Named element in template Type: FrameworkElement, Panel, Button, etc.. Control logic will control element in some way DownButton Thumb UpButton Track
  14. 14. States Parts Keyed resource inside template’s root element Type: Storyboard Control logic begins & stops storyboard Initiator Code starts/stops Transition animation. Mouse Over Pressed STATE part
  15. 15. RootElement NormalState FocusVisualElement MouseOverState PressedState
  16. 16. UserControls Custom Controls Styles & Templates Parts Model
  17. 17. © 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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×