8/8/2013 2:04 AM

WPF Controls

Agenda

8/8/2013 2:04 AM

Declarative Markup Language XAML Styles and Control Templates

Graphics and Animations 2D and 3D Support

Windows Presentation Foundation

Hardware Acceleration

XPS Printing Support

Vector Graphic Support Resolution Independent

Data Binding

8/8/2013 2:04 AM

Visual Studio
Expression Suite XamlPad (SDK Tool)

Perforator (SDK Tool)

Snoop Reflector
8/8/2013 2:04 AM 4

How are controls organized, used and created in WPF?

8/8/2013 2:04 AM

8/8/2013 2:04 AM

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

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

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

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

All controls in WPF derive directly or indirectly from Visual

8/8/2013 2:04 AM 7

Handling user input events Logic used in sizing and positioning of elements
Measure, Arrange, DesiredSize, etc.

UIElement adds support for:

Handling and raising routed events

Some aspects of the animation system

BeginAnimation, etc.
8/8/2013 2:04 AM

Routed commands

Richer property metadata

Additional layout characteristics

Databinding

Eg. HorizontalAlignm ent, Margin

FrameworkElement (FE) supports:

Triggers

Styles

Storyboards

8/8/2013 2:04 AM

Provides templating support

Control

Base class for all userinteractive elements

8/8/2013 2:04 AM

10

ContentControl

Base class for a control that can contain another element (or tree of elements) Example: Button

Control
Base class for a control that contains a collection of items Example: ListBox

ItemsControl

8/8/2013 2:04 AM

11

My Button

My Button

My button

My Button

8/8/2013 2:04 AM

12

Layout and Panels

8/8/2013 2:04 AM

13

WPF Layout Engine Panels

VirtualizingPanel

8/8/2013 2:04 AM

14

Layout is the process of measuring and arranging the members of a Panel element's Children collection then drawing them onscreen WPF contains several panel elements A Panel Element:
Canvas, StackPanel, DockPanel, Grid, WrapPanel, VirtualizingPanel (abstract).

Maintains a collection of child elements

Is responsible for sizing its children

Is responsible for positioning its children

8/8/2013 2:04 AM

15

The WPF layout engine uses a 2 pass layout cycle

It first recursively measures the elements in the visual tree. Once measure is complete it recursively arranges the elements in the visual tree.

8/8/2013 2:04 AM

16

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

When the Measure method is called on the panel it is responsible for measuring all of its children. When the Arrange method is called on the Panel it is responsible for arranging all of its children.
8/8/2013 2:04 AM 17

Canvas

Grid

StackPanel

Panel

DockPanel

WrapPanel

8/8/2013 2:04 AM

18

<Canvas
Width="200" Height="200" Background="Yellow"> <Rectangle Canvas.Left="20" Canvas.Top="20" Fill="Blue Width="50" Height="50" /> </Canvas>

No automatic sizing or positioning of children Requires explicit sizing via Width and Height properties Requires explicit positioning via attached Canvas properties

8/8/2013 2:04 AM

<StackPanel Background="Yellow"> <Ellipse Height="30" Fill="Red" /><Ellipse Width="50" Height="30" Fill="Blue" /><Button Content="Click Me" /></StackPanel>

Arranges children in either a vertical or horizontal stack Default Orientation is Vertical Children are unsized in stacking direction and stretched in other direction if no size is specified.

8/8/2013 2:04 AM

20

<DockPanel Background="Yellow" Height="100" Width="150"> <Rectangle DockPanel.Dock="Top" Height="25" RadiusX="10" RadiusY="10" Fill="Red" /> <Rectangle DockPanel.Dock="Right" Width="25" RadiusX="10" RadiusY="10" Fill="Green" /> <Rectangle DockPanel.Dock="Bottom" Height="25" RadiusX="10" RadiusY="10" Fill="Blue" /> <Rectangle DockPanel.Dock="Left" Width="25" RadiusX="10" RadiusY="10" Fill="Black" /> <Button Content="Button" /> </DockPanel>

Arranges each child by docking a given edge to an edge of the panel Children use the attached Dock property to specify which edge is docked If no size is specified, a child is stretched along the docked edge and unsized in the other direction By default, the last child is stretched both horizontally and vertically to fill the remaining space

8/8/2013 2:04 AM

21

<WrapPanel Width="100" Height="200" Background="Yellow"> <Rectangle Fill="Blue" Width="50" Height="50" /> <Rectangle Fill="Green" Width="50" Height="50" /> <Rectangle Fill="Red" Width="50" Height="50" /> <Rectangle Fill="Black" Width="50" Height="50" /> </WrapPanel>

Positions child elements in sequential position from left to right. breaks content to the next line at the edge of the containing box Subsequent ordering happens sequentially from top to bottom or left to right (based on Orientation)

8/8/2013 2:04 AM

22

<Grid Height="150" Width="150"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Ellipse Grid.Column="0" Grid.Row="0" Fill="Green" /> </Grid>

The most versatile and powerful of the built-in Panel elements. A Panel that has been subdivided into one or more columns and one or more rows. Children are arranged within a row and/or column using attached Grid properties

8/8/2013 2:04 AM

23

Grids have a collection of column and row definitions.

The column and row definitions have Width and Height properties, respectively, of type GridLength.

GridLength values can represent auto size, an explicit size or a star (*) size
8/8/2013 2:04 AM 24

Grid Star Sizing

When star sizing is used the value is expressed as a weighted proportion of available space.
<Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="50"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="2*"/> </Grid.ColumnDefinitions> ... </Grid>
8/8/2013 2:04 AM

Demo 25

Custom Panel =

Extend the Panel class

Override the MeasureOverride and ArrangeOverride protected methods.

8/8/2013 2:04 AM

Demo 26

VirtualizingPanel is an abstract class that provides the foundation for building panels that virtualize their child elements.
The panels allow for UI virtualization, not data virtualization. WPF provides one VirtualizingPanel implementation; VirtualizingStackPanel. VistualizingStackPanel is the default items host for ListBox.

8/8/2013 2:04 AM

27

Layout of controls is critical to an applications usability.

Arranging controls based on fixed pixel coordinates may work for an limited enviroment, but as soon as you want to use it on different screen resolutions or with different font sizes it will fail.

8/8/2013 2:04 AM

28

Avoid fixed positions

Use the Alignment properties in combination with Margin to position elements in a panel Set the Width and Height of elements to Auto whenever possible. Use it only for vector graphics.

Avoid fixed sizes

Don't abuse the canvas panel to layout elements.

Use a StackPanel to layout buttons of a dialog

Use a GridPanel to layout a static data entry form Use an ItemControl with a grid panel in a DataTemplate to layout dynamic key value lists.

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

8/8/2013 2:04 AM

29

8/8/2013 2:04 AM

30

The Margin and Padding properties can be used to reserve some space around of within the control.

8/8/2013 2:04 AM

31

Height and Width

Overflow Handling

Use the MinHeight, MaxHeight, MinWidth and MaxWidth properties to define a acceptable range.

This behavior can be controlled by setting the ClipToBounds property to true or false

8/8/2013 2:04 AM

32

Text Content
<Button Margin="0,0,370,280">

<Button.Content> Clik me</Button.Content>

</Button>

Shape object
<Button Margin="139,0,231,280"> <Button.Content>

<Rectangle Fill="Red" Width="100" Height="25"/>

</Button.Content> </Button>

8/8/2013 2:04 AM

33

Commands have several purposes. The first purpose is to separate the semantics and the object that invokes a command from the logic that executes the command.
Simple example
8/8/2013 2:04 AM 34

Expression blend

8/8/2013 2:04 AM

35

8/8/2013 2:04 AM

Rakesh.VM IBU rakesh.vm@nestgroup.net

36