Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

Styles and Templates by qpv40869

VIEWS: 12 PAGES: 25

									                                             8/28/2007




                                         1




    Styles and Templates




Styles and Templates
•
                                         2
    Why developers need style(s)
•   WPF look-less controls
•   Example: Restyling a Listbox
•   Defining your first WPF style
•   Basing styles on other styles
•   Applying styles
•   Using Templates to change controls
•   Selecting templates dynamically




                                                     1
                                              8/28/2007




The OwnerDraw Cliff
                                          3




             Old Customization
                Continuum
 Prop-    Custom         Owner Draw
 erties    Draw       or Custom Control




                                                      2
                                                                                8/28/2007




           WPF Customization
              Continuum
Prop-                Pay for Play Customization:                  Custom
erties   Rich Content, Visual Styling, Built for a new Platform   Control




                                                                            6




Styles are about setting
     properties….




                                                                                        3
                                              8/28/2007




Using Styles
• Can only target dependency properties
                                          7




                                          8
                        Setting
                       properties


    Styles                     Trigger


                        Storyboards


        Template




                                                      4
                                                    8/28/2007




Styling and Resources
• Style rarely defined inline
                                               9



  – Tend to be reused for consistency


• Usually defined as resources




Defining a Style
• Named Style
                                               10
                                    Required




• Named Style with TargetType



• Default Style




                                                            5
                                         8/28/2007




Style Inheritance
• You can base a Style on another
                                    11




• Even on the default Style




Triggers
• Triggers are conditional Styles
                                    12




                                                 6
                                                                                                     8/28/2007




Introduction to Templates
• Using Snoop to look at a simple button
                                                                              13




                                                                        http://www.blois.us/Snoop/
Logical vs. Visual Tree
                                                                              14
                                       Window
               Window
                                                              Control
                                       Border

                                                               Visual
Logical Tree




                                       Adorner
                        Visual Tree




                                      Decorator

               Grid                                           Template
                                       Content
                                      Presenter


                                        Grid       Button


                                                   Button
               Button                              Chrome


                                                   Content
                                                  Presenter


                                                  TextBlock




                                                                                                             7
                                                      8/28/2007




Templates
• Control implies behavior, not look!
                                                 15



• Controls are rendered through their template
• Template is the blue-print
  – Factory
• Change the template to change the look




Restyling a Listbox
                                                 16




                                                              8
                                                  8/28/2007




Templates
• Use a Style to set the Template property
                                             17



• Value is always a “Template”




• Use TemplateBinding to refer to control




ContentPresenter
• Is replaced by control’s real content
                                             18




                                                          9
                                           8/28/2007




ControlTemplate.Triggers
• Triggers can be used for feedback
                                      19




ListBoxes and Templates
• Listboxes have several templates
                                      20



  – ItemsTemplate => DataBinding
  – PanelTemplate


• PanelTemplate receives the items




                                                  10
                                                    8/28/2007




TemplateBinding
• Retrieves control’s properties
                                               21




IsItemsHost
• Panel with IsItemsHost=True receives items
                                               22




                                                           11
                                                 8/28/2007




Using Blend to template a button
• Right-Click the button
                                            23



  – Select Edit Control Parts (Template)
     • Create Empty…




Naming the Template
• Create Control Template Resource dialog
                                            24




• Adds the template as a resource




                                                        12
                                                    8/28/2007




Editing the Template
• Now we are in template editing mode
                                               25




      Leave
    template
    edit mode




Add a Border control
• Double-click the border control in toolbar
                                               26



• Then change border brush to solid white
• Then change BorderThickness and
  CornerRadius




                                                           13
                                                       8/28/2007




Add another Border
• Inside previous border
                                                  27



• Set background to Black with Alpha=50%




                                       Alpha




• Set BorderBrush to Black with rounded corner




Add a Grid to inner border
• Then make grid the insertion point
                                                  28




• Then add two rows
                                   Add a column

 Toggle between
   Canvas and
    Grid mode


                      Add a row




                                                              14
                                                      8/28/2007




Adding the shine
• Add a border to the top row
                                                 29




• Then remove the margin
                                   Make “Auto”



                                     Stretch



                                     Margin




Create the shine effect
• Set background to a gradient brush
                                                 30




• Then change the brushes colors




                                                             15
                                                  8/28/2007




Adding a glow effect
• Like the one in taskbar
                                             31




• Add another border to the grid
  – Then change layout




Using a RadialGradientBrush
• Change background to RadialGradientBrush
                                             32



• Then resize to like this




                                                         16
                                               8/28/2007




Finishing the glow effect
• Change GradientStops and CornerRadius
                                          33




• Finally send the Border back




Naming your elements
• Name your elements to avoid confusion
                                          34




                                                      17
                                                       8/28/2007




Adding Content
• Make the grid the insertion point
                                                  35



• Add a content presenter from asset library

  Use
Search




Changing the content presenter
• Content presenter is shown in top left corner
                                                  36



• Change layout




• Send content presenter back




                                                              18
                                                   8/28/2007




Adding triggers
• Set the glow border’s opacity to 0%
                                              37




• Add a new property trigger




Changing the trigger
• Set the trigger’s property to IsMouseOver
                                              38



  – With value = true




                                                          19
                                                      8/28/2007




Adding the activating action
• Click the + button on the activating actions
                                                 39




• Click Ok to create a new timeline




Objects and Timeline
• We will animate the glow opacity
                                                 40



  – Drag timeline to 0.3 second



                                  Timeline




                                                             20
                                                      8/28/2007




Making the glow appear
• Select the glow border
                                                 41



  – Then set opacity to 100%
  – This will add a keyframe




                                      Keyframe




Making the glow dissappear
• Add another animation as the deactivating
                                                 42



  – By default this uses the same timeline
  – Create a new timeline




                                                             21
                                                  8/28/2007




Modifying the second timeline
• Set opacity to 0%
                                             43



  – Make opacity 1% first, then back to 0%




Adding a “Pushed” trigger
• Go back to the default timeline
                                             44




• Then add another
  property trigger
  – IsPressed




                                                         22
                                               8/28/2007




Setting the trigger’s properties
• First set glow’s visibility to Hidden
                                          45



  – To make it dissappear
• Then set shine’s opacity to 40%
• Then set the inner border’s brush
  – Set Alpha to 80%




Testing our template
• Leave the template editor
                                          46



  – Press Scope Up




• Set buttons foreground to white
  – To see the content better
  – Run your project!




                                                      23
                                              8/28/2007




The result
                                         47




                        Normal




                      Mouse over




                        Pressed




Applying the template
• Add another button
                                         48



  – This will use the default template
• Right-click the button




                                                     24
             8/28/2007




Nice!
        49




                    25

								
To top