WPF Line of Business Control Templates Styles


Published on

WPF Line of Business Control Templates Styles

Published in: Design, Technology, Business
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 06/10/09 15:29 © 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.
  • WPF Line of Business Control Templates Styles

    1. 1. Don Burnett UXMagic.com http://Blog.DonBurnett.com
    2. 3. Overview <ul><li>Controls </li></ul><ul><li>Styles </li></ul><ul><li>Templates </li></ul><ul><li>Creating New Controls </li></ul>
    3. 5. Controls <ul><li>WPF Object Model </li></ul><ul><li>Visual </li></ul><ul><li>UIElement </li></ul><ul><li>FrameworkElement </li></ul><ul><li>Control </li></ul><ul><li>Control Base Classes </li></ul><ul><li>WPF Toolbox </li></ul><ul><li>New Controls </li></ul>
    4. 6. WPF Object Model Control FrameworkElement UIElement Visual Decorator Panel Shape FrameworkContentElement ContentElement Visual3D Freezable Animatable DispatcherObject Dependency Object
    5. 7. Background <ul><li>The Visual object is a core WPF object, with a primary role of providing rendering support. User interface controls, such as Button and TextBox, use the Visual defined properties for persisting their rendering data. The Visual object provides support for the following: </li></ul><ul><li>Output display </li></ul><ul><li>Transformations </li></ul><ul><li>Clipping </li></ul><ul><li>Hit testing </li></ul><ul><li>Bounding box calculations </li></ul><ul><li>Architecturally, the Visual object does not include support for other application development requirements or WPF features that are not immediately related to its rendering; conceptually Visual is similar to an HWND (handle) in Win32. Visual is provided as a public abstract class from which further classes can be derived. </li></ul><ul><li>Visual class provides for building a tree of visual objects, each optionally containing drawing instructions and metadata about how to render those instructions (clipping, transformation, etc.). Visual is designed to be extremely lightweight and flexible, so most of the features have no public API exposure and rely heavily on protected callback functions. </li></ul><ul><li>Visual is really the entry point to the WPF composition system. Visual is the point of connection between these two subsystems, the managed API and the unmanaged milcore. </li></ul>
    6. 8. Visual <ul><li>Provides: </li></ul><ul><ul><li>Support for rendering </li></ul></ul><ul><ul><li>Hit testing </li></ul></ul><ul><ul><li>Clipping </li></ul></ul><ul><ul><li>Transformations </li></ul></ul><ul><li>Similar to the Win32 handle </li></ul><ul><li>concept (HWND) </li></ul>Control FrameworkElement UIElement Visual
    7. 9. UIElement <ul><li>Provides: </li></ul><ul><ul><li>Support for user input events </li></ul></ul><ul><ul><li>Support for routed events </li></ul></ul><ul><ul><li>Support for routed commands </li></ul></ul><ul><ul><li>Support for animation system </li></ul></ul><ul><ul><ul><li>BeginAnimation </li></ul></ul></ul><ul><ul><li>Logic for sizing and positioning </li></ul></ul><ul><ul><ul><li>Measure </li></ul></ul></ul><ul><ul><ul><li>Arrange </li></ul></ul></ul><ul><ul><ul><li>DesiredSize </li></ul></ul></ul>Control FrameworkElement UIElement Visual
    8. 10. UIElement <ul><li>UIElement introduces User interaction with Eventing, Input Commands and Layout. The UIElement class also introduces interaction with the animation system, particularly with Dependency Properties. A UIElement has the following capabilities that are specifically defined by the UIElement class: </li></ul><ul><li>Can respond to user input (including control of where input is getting sent to via their handling of event routing, or routing of commands) </li></ul><ul><li>Can raise routed events that travel a route through the logical element tree </li></ul><ul><li>Supports some aspects of the animation system </li></ul><ul><li>Contains logic that is used to size and position possible child elements of a UIElement (when interpreted by a layout system) </li></ul>
    9. 11. FrameworkElement <ul><li>Provides: </li></ul><ul><ul><li>Rich property metadata </li></ul></ul><ul><ul><li>Additional layout characteristics </li></ul></ul><ul><ul><li>Styles </li></ul></ul><ul><ul><li>Storyboards </li></ul></ul><ul><ul><li>Triggers </li></ul></ul>Control FrameworkElement UIElement Visual
    10. 12. Control <ul><li>Provides </li></ul><ul><ul><li>Support for control templates </li></ul></ul><ul><ul><li>Dependency properties for use in control templates </li></ul></ul>Control FrameworkElement UIElement Visual
    11. 13. Control Base Classes ItemsControl ContentControl FrameworkElement Control
    12. 14. WPF Toolbox ButtonBase <ul><li>Button </li></ul><ul><li>GridViewColumnHeader </li></ul><ul><li>RepeatButton </li></ul><ul><li>ToggleButton </li></ul><ul><ul><li>CheckBox </li></ul></ul><ul><li>RadioButton </li></ul>Panel Canvas DockPanel Grid TabPanel ToolBarOverflowPanel UniformGrid StackPanel VirtualizingPanel WrapPanel ItemsControl <ul><li>HeaderedItemsControl </li></ul><ul><ul><li>MenuItem </li></ul></ul><ul><ul><li>ToolBar </li></ul></ul><ul><ul><li>TreeViewItem </li></ul></ul><ul><ul><li>GroupBox </li></ul></ul><ul><li>MenuBase </li></ul><ul><ul><li>ContextMenu </li></ul></ul><ul><ul><li>Menu </li></ul></ul><ul><li>Selector </li></ul><ul><ul><li>ComboBox </li></ul></ul><ul><ul><li>ListBox </li></ul></ul><ul><ul><li>ListView </li></ul></ul><ul><ul><li>MultiSelector </li></ul></ul><ul><ul><li>TabControl </li></ul></ul><ul><li>StatusBar </li></ul><ul><li>TreeView </li></ul>ContentControl <ul><li>Label </li></ul><ul><li>ListBoxItem </li></ul><ul><ul><li>ComboBoxItem </li></ul></ul>FrameworkElement TextBlock
    13. 15. Toolbox continued... Decorator Adorner Decorator ButtonChrome ListboxChrome Border Viewbox InkPresenter ClassicBorderDecorator Primitives <ul><li>Popup </li></ul><ul><li>Thumb </li></ul><ul><ul><li>GridSplitter </li></ul></ul><ul><li>ResizeGrip </li></ul><ul><li>TickBar </li></ul><ul><li>Track </li></ul><ul><li>TextBoxBase </li></ul><ul><ul><li>TextBox </li></ul></ul>Shape Ellipse Rectangle Line Path RangeBase ScrollBar ProgressBar Slider Control PasswordBox Separator
    14. 16. New Controls <ul><li>Released on CodePlex </li></ul><ul><ul><li>DataGrid </li></ul></ul><ul><ul><li>Calendar/DatePicker </li></ul></ul><ul><li>In CTP </li></ul><ul><ul><li>Ribbon </li></ul></ul>
    15. 18. Styles <ul><li>Styles in WPF </li></ul><ul><li>Extending Styles </li></ul><ul><li>Styles in XAML </li></ul><ul><li>Applying Styles </li></ul>
    16. 19. Purpose <ul><li>The main purpose behind the concept of styles in WPF is to group together property values that could otherwise be set individually; after a style is set up the intention is to then share this group of values among multiple elements of a similar type. Without styles values would have to be duplicated on all the controls; styles therefore save time and are more maintainable and less error prone than setting many property values individually. </li></ul><ul><li>Setting a property directly on the element supersedes any value specified in its style. </li></ul><ul><li>The Setter Properties are grouped together into a single Style object. A collection of Style objects can exist in the Resources section of either a control or the XAML page. </li></ul>
    17. 20. <ul><li>A collection property values </li></ul><ul><li>Grouped together by using the <style> element or System.Windows.Style type </li></ul><ul><li>Styles are used to define a control template </li></ul><ul><li>Styles can be named by using the x:Key attribute </li></ul>Styles In WPF =
    18. 21. Extending Styles <ul><li>Styles can be extended by using the BasedOn property to point to an existing Style </li></ul><ul><ul><li>All the setters of the base style are inherited by the new style </li></ul></ul><ul><ul><li>Framework styles can be extended by using the BasedOn property in conjunction with the x:Key property </li></ul></ul>
    19. 22. Extending Styles
    20. 23. Applying Styles <ul><li>Styles can be applied by </li></ul><ul><ul><li>Name/Key (explicit) </li></ul></ul><ul><ul><li>Type (implicit) </li></ul></ul><ul><ul><li>Scope </li></ul></ul><ul><li>Styles can be applied by using a combination these methods </li></ul><ul><li>An element uses a style if it is the right type and in scope, or by using the Style attribute </li></ul>
    21. 24. Applying Styles Scope
    22. 26. Templates <ul><li>Lookless Controls </li></ul><ul><li>Templates in WPF </li></ul><ul><li>Control Templates </li></ul><ul><li>TemplateBinding </li></ul>
    23. 27. Lookless Controls <ul><li>Look defined separately from the implementation </li></ul><ul><ul><ul><li>Defined in a theme file </li></ul></ul></ul><ul><ul><ul><li>Defined by a designer </li></ul></ul></ul><ul><ul><ul><li>Controls usually have a default “style” </li></ul></ul></ul><ul><ul><ul><li>Change look without recompiling control source </li></ul></ul></ul><ul><li>Support behaviors </li></ul><ul><li>Have no built-in visual representation </li></ul><ul><li>Enabled by ControlTemplates </li></ul>
    24. 28. Control Templates <ul><li>Templates define the structure for a control </li></ul><ul><li>The visual tree that a template defines, expands for each instance of the control that uses the template </li></ul>
    25. 29. Templates In WPF =
    26. 30. Templates In WPF <ul><li>Define elements within the visual tree </li></ul><ul><li>Replacing templates only changes the look, not the behaviour </li></ul><ul><li>Every control that ships with WPF has a template </li></ul><ul><li>Do not inherit by using the BasedOn property </li></ul>
    27. 31. TemplateBinding <ul><li>Binds the value of a property on an element in a control template to the value of a property on the templated control </li></ul><ul><li>Prevents element values set on a child from being overwritten by the control template </li></ul><ul><li>Uses the TemplateBinding markup extension </li></ul>
    28. 33. Creating New Controls <ul><li>WPF provides three control-authoring models for creating your own controls: </li></ul><ul><ul><li>Deriving from the UserControl class </li></ul></ul><ul><ul><li>Deriving from the Control class </li></ul></ul><ul><ul><li>Deriving from the FrameworkElement class </li></ul></ul>
    29. 34. UserControls <ul><li>Creating a UserControl enables new controls to be created by adding composing exiting controls </li></ul><ul><ul><li>For example, building a search control by using a Textbox and Button </li></ul></ul><ul><li>UserControl is a ContentControl </li></ul><ul><li>To create a UserControl </li></ul><ul><ul><li>Define a class that inherits from UserControl </li></ul></ul><ul><ul><li>Define a XAML UserControl element and then compose the desired interface </li></ul></ul>
    30. 35. Derived Control <ul><li>Derive from a control and change functionality or properties without changing the ControlTemplate </li></ul><ul><li>UserControl derives from ContentControl, which in turn is derived from Control. Deriving from UserControl gives the control access to rich content, styles and triggers for free and provides a suitable framework to build the new control using pre existing elements. </li></ul>
    31. 36. Custom Control <ul><li>Derive from a control or FrameworkElement class </li></ul><ul><ul><li>Selecting the correct base class is important </li></ul></ul><ul><li>Provide functionality and expose properties in code </li></ul><ul><li>Provide ControlTemplate </li></ul>
    32. 37. References <ul><li>WPF on CodePlex </li></ul><ul><ul><li>http://wpf.codeplex.com/ </li></ul></ul>