WPF Controls @ a Glance

8/22/2019 WPF Controls @ a Glance

1/36

8/8/2013 2:04 AM1


2/36

WPFControls

8/8/2013 2:04 AM 2

Agenda


3/36

8/8/2013 2:04 AM 3

Windows

Presentation

Foundation

Graphics andAnimations

2D and 3DSupport

Hardware

Acceleration

VectorGraphicSupport

Data BindingResolution

Independent

XPS Printing

Support

Styles andControl

Templates

Declarative

MarkupLanguageXAML


4/36

Visual Studio

Expression Suite

XamlPad (SDK Tool)

Perforator (SDK Tool)

Snoop

Reflector

8/8/2013 2:04 AM 4


5/36

8/8/2013 2:04 AM 5

How are controls organized, used and created in WPF?


6/36

8/8/2013 2:04 AM 6


7/36

Visual is a core WPF object whose primary role is toprovide rendering support.

Visual is similar to the windows handle (HWND) in win32application development.

Visual provides support for rendering, hit testing,clipping, transformations, and bounding box calculation.

Visual does not provide any other services required bymost controls, such as eventing, layout, data binding, etc.

All controls in WPF derive directly or indirectly fromVisual

8/8/2013 2:04 AM 7


8/36

UIElementadds

support for:

Handling userinput events

Handling andraising routed

events

Routedcommands

Some aspects ofthe animationsystem

BeginAnimation,etc.

Logic used in

sizing andpositioning ofelements

Measure, Arrange,DesiredSize, etc.

8/8/2013 2:04 AM 8


9/36

FrameworkElement(FE) supports:

Richer propertymetadata

Additional layoutcharacteristics

Eg.HorizontalAlignment, Margin

Styles

Storyboards

Triggers

Databinding

8/8/2013 2:04 AM 9


10/36

ControlProvides

templatingsupport

Base class for

all user-interactiveelements

8/8/2013 2:04 AM 10


11/36

ContentControl

Base class for a controlthat can containanother element (ortree of elements)

Example: Button

ItemsControl

Base class for a controlthat contains acollection of items

Example: ListBox

8/8/2013 2:04 AM 11

Control


12/36

8/8/2013 2:04 AM 12

My Button My Button My

button

My Button


13/36

8/8/2013 2:04 AM 13

Layout and Panels


14/36

WPF LayoutEngine

Panels

VirtualizingPanel

8/8/2013 2:04 AM 14


15/36

Layoutis the process of measuring and arranging themembers of a Panel element's Children collection then drawing

them onscreen

WPF containsseveral panel

elements

Canvas, StackPanel, DockPanel, Grid,WrapPanel, VirtualizingPanel (abstract).

A PanelElement:

Maintains acollection of

child elements

Is responsiblefor sizing its

children

Is responsiblefor positioning

its children

8/8/2013 2:04 AM 15


16/36

The WPF layoutengine uses a 2

pass layout cycle

It first recursively measuresthe elements in the visualtree.

Once measure is completeit recursively arranges theelements in the visual tree.

8/8/2013 2:04 AM 16


17/36

Panels are responsible for the layoutof a collection of UIElement children.

When the Measure method is called on thepanel it is responsible for measuring all of its

children.

When the Arrange method is called on thePanel it is responsible for arranging all of itschildren.

8/8/2013 2:04 AM 17


18/36

Panel

Canvas

StackPanel

WrapPanelDockPanel

Grid

8/8/2013 2:04 AM 18


19/36

No automatic sizing orpositioning of children

Requires explicit sizing viaWidth and Height properties

Requires explicit positioningvia attached Canvas properties


20/36

8/8/2013 2:04 AM 20

Arranges children in either avertical or horizontal stack

Default Orientation is Vertical

Children are unsized in stackingdirection and stretched in otherdirection if no size is specified.


21/36

8/8/2013 2:04 AM 21

Arranges each child by docking a given edge toan edge of the panel

Children use the attached Dock property tospecify which edge is docked

If no size is specified, a child is stretched alongthe docked edge and unsized in the otherdirection

By default, the last child is stretched bothhorizontally and vertically to fill the remaining

space


22/36

8/8/2013 2:04 AM 22

Positions child elements insequential position from left toright.

breaks content to the next lineat the edge of the containingbox

Subsequent ordering happenssequentially from top to bottom

or left to right (based onOrientation)


23/36

8/8/2013 2:04 AM 23

The most versatile andpowerful of the built-in Panelelements.

A Panel that has beensubdivided into one or morecolumns and one or morerows.

Children are arranged within arow and/or column usingattached Grid properties


24/36

Grids have a collection ofcolumn and row definitions.

The column and rowdefinitions have Width and

Height properties,respectively, of type

GridLength.

GridLength values

can represent autosize, an explicit size

or a star (*) size

8/8/2013 2:04 AM 24


25/36

When star sizing is used the value is expressedas a weighted proportion of available space.

...

Demo

Grid Star Sizing

8/8/2013 2:04 AM 25


26/36

Custom Panel =Extend the Panel

class

Override theMeasureOverride

andArrangeOverride

protected methods.

Demo8/8/2013 2:04 AM 26


27/36

VirtualizingPanel is an abstractclass that provides the foundationfor building panels that virtualize

their child elements.The panels allow for UI virtualization, not

data virtualization.

WPF provides one VirtualizingPanelimplementation; VirtualizingStackPanel.

VistualizingStackPanel is the defaultitems host for ListBox.

8/8/2013 2:04 AM 27


28/36

Layout of controls iscritical to an applications

usability.

Arranging controls basedon fixed pixel coordinates

may work for an limitedenviroment, but as soonas you want to use it on

different screenresolutions or with

different font sizes it willfail.

8/8/2013 2:04 AM 28


29/36

Use the Alignment properties in combination with Margin toposition elements in a panel

Avoid fixed positions

Set the Width and Height of elements to Auto wheneverpossible.

Avoid fixed sizes

Use it only for vector graphics.

Don't abuse the canvas panel tolayout elements.

Use a StackPanel to layoutbuttons of a dialog

Create a Auto sized column for the labels and a Star sizedcolumn for the TextBoxes.

Use a GridPanel to layout astatic data entry form

Use an ItemControl with a gridpanel in a DataTemplate to

layout dynamic key value lists.

8/8/2013 2:04 AM 29


30/36

8/8/2013 2:04 AM 30


31/36

The Marginand Padding

properties can

be used toreserve somespace aroundof within the

control.

8/8/2013 2:04 AM 31


32/36

Height and Width

Use the MinHeight,MaxHeight,MinWidth and

MaxWidthproperties to definea acceptable range.

Overflow Handling

This behavior can becontrolled by settingthe ClipToBounds

property to true orfalse

8/8/2013 2:04 AM 32


33/36

8/8/2013 2:04 AM 33

Clik me

Text Content

Shape object


34/36

Commands have several purposes.The first purpose is to separate the

semantics and the object thatinvokes a command from the logicthat executes the command.

Simple example

8/8/2013 2:04 AM 34


35/36

Expressionblend

8/8/2013 2:04 AM 35


36/36

Rakesh.VM

IBU

Documents

WPF Controls @ a Glance