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

Overview Controls Styles Templates Creating New Controls

Controls

Styles

Templates

Creating New Controls

Controls WPF Object Model Visual UIElement FrameworkElement Control Control Base Classes WPF Toolbox New 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.

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

Provides:

Support for rendering

Hit testing

Clipping

Transformations

Similar to the Win32 handle

concept (HWND)

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

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

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)

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

Provides:

Rich property metadata

Additional layout characteristics

Styles

Storyboards

Triggers

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

Provides

Support for control templates

Dependency properties for use in control templates

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

Button

GridViewColumnHeader

RepeatButton

ToggleButton

CheckBox

RadioButton

HeaderedItemsControl

MenuItem

ToolBar

TreeViewItem

GroupBox

MenuBase

ContextMenu

Menu

Selector

ComboBox

ListBox

ListView

MultiSelector

TabControl

StatusBar

TreeView

Label

ListBoxItem

ComboBoxItem

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

Popup

Thumb

GridSplitter

ResizeGrip

TickBar

Track

TextBoxBase

TextBox

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

Released on CodePlex

DataGrid

Calendar/DatePicker

In CTP

Ribbon

Styles Styles in WPF Extending Styles Styles in XAML Applying 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.

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 =

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

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

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

Extending Styles

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

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

Applying Styles Scope

Templates Lookless Controls Templates in WPF Control Templates TemplateBinding

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

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 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 =

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

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

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

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

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.

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

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 on CodePlex

http://wpf.codeplex.com/