WPF Line of Business Control Templates Styles

Don Burnett UXMagic.com http://Blog.DonBurnett.com

Overview Controls Styles Templates Creating New Controls

Controls WPF Object Model Visual UIElement FrameworkElement Control Control Base Classes WPF Toolbox New Controls

WPF Object Model Control FrameworkElement UIElement Visual Decorator Panel Shape FrameworkContentElement ContentElement Visual3D Freezable Animatable DispatcherObject Dependency Object

Background 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: Output display Transformations Clipping Hit testing Bounding box calculations 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. 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. 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.

Visual Provides: Support for rendering Hit testing Clipping Transformations Similar to the Win32 handle concept (HWND) Control FrameworkElement UIElement Visual

UIElement Provides: Support for user input events Support for routed events Support for routed commands Support for animation system BeginAnimation Logic for sizing and positioning Measure Arrange DesiredSize Control FrameworkElement UIElement Visual

UIElement 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: Can respond to user input (including control of where input is getting sent to via their handling of event routing, or routing of commands) Can raise routed events that travel a route through the logical element tree Supports some aspects of the animation system Contains logic that is used to size and position possible child elements of a UIElement (when interpreted by a layout system)

FrameworkElement Provides: Rich property metadata Additional layout characteristics Styles Storyboards Triggers Control FrameworkElement UIElement Visual

Control Provides Support for control templates Dependency properties for use in control templates Control FrameworkElement UIElement Visual

Control Base Classes ItemsControl ContentControl FrameworkElement Control

WPF Toolbox ButtonBase Button GridViewColumnHeader RepeatButton ToggleButton CheckBox RadioButton Panel Canvas DockPanel Grid TabPanel ToolBarOverflowPanel UniformGrid StackPanel VirtualizingPanel WrapPanel ItemsControl HeaderedItemsControl MenuItem ToolBar TreeViewItem GroupBox MenuBase ContextMenu Menu Selector ComboBox ListBox ListView MultiSelector TabControl StatusBar TreeView ContentControl Label ListBoxItem ComboBoxItem FrameworkElement TextBlock

Toolbox continued... Decorator Adorner Decorator ButtonChrome ListboxChrome Border Viewbox InkPresenter ClassicBorderDecorator Primitives Popup Thumb GridSplitter ResizeGrip TickBar Track TextBoxBase TextBox Shape Ellipse Rectangle Line Path RangeBase ScrollBar ProgressBar Slider Control PasswordBox Separator

New Controls Released on CodePlex DataGrid Calendar/DatePicker In CTP Ribbon

Styles Styles in WPF Extending Styles Styles in XAML Applying Styles

Purpose 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. Setting a property directly on the element supersedes any value specified in its style. 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.

A collection property values Grouped together by using the <style> element or System.Windows.Style type Styles are used to define a control template Styles can be named by using the x:Key attribute Styles In WPF =

Extending Styles Styles can be extended by using the BasedOn property to point to an existing Style All the setters of the base style are inherited by the new style Framework styles can be extended by using the BasedOn property in conjunction with the x:Key property

Applying Styles Styles can be applied by Name/Key (explicit) Type (implicit) Scope Styles can be applied by using a combination these methods An element uses a style if it is the right type and in scope, or by using the Style attribute

Templates Lookless Controls Templates in WPF Control Templates TemplateBinding

Lookless Controls Look defined separately from the implementation Defined in a theme file Defined by a designer Controls usually have a default “style” Change look without recompiling control source Support behaviors Have no built-in visual representation Enabled by ControlTemplates

Control Templates Templates define the structure for a control The visual tree that a template defines, expands for each instance of the control that uses the template

Templates In WPF Define elements within the visual tree Replacing templates only changes the look, not the behaviour Every control that ships with WPF has a template Do not inherit by using the BasedOn property

TemplateBinding Binds the value of a property on an element in a control template to the value of a property on the templated control Prevents element values set on a child from being overwritten by the control template Uses the TemplateBinding markup extension

Creating New Controls WPF provides three control-authoring models for creating your own controls: Deriving from the UserControl class Deriving from the Control class Deriving from the FrameworkElement class

UserControls Creating a UserControl enables new controls to be created by adding composing exiting controls For example, building a search control by using a Textbox and Button UserControl is a ContentControl To create a UserControl Define a class that inherits from UserControl Define a XAML UserControl element and then compose the desired interface

Derived Control Derive from a control and change functionality or properties without changing the ControlTemplate 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.

Custom Control Derive from a control or FrameworkElement class Selecting the correct base class is important Provide functionality and expose properties in code Provide ControlTemplate

References WPF on CodePlex http://wpf.codeplex.com/

WPF Line of Business Control Templates Styles

More Related Content

What's hot (20)

Viewers also liked (9)

Similar to WPF Line of Business Control Templates Styles (20)

More from Our Community Exchange LLC (9)

Recently uploaded (20)

WPF Line of Business Control Templates Styles

Editor's Notes