8/22/2019 WPF Controls @ a Glance
1/36
8/8/2013 2:04 AM1
8/22/2019 WPF Controls @ a Glance
2/36
WPFControls
8/8/2013 2:04 AM 2
Agenda
8/22/2019 WPF Controls @ a Glance
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
8/22/2019 WPF Controls @ a Glance
4/36
Visual Studio
Expression Suite
XamlPad (SDK Tool)
Perforator (SDK Tool)
Snoop
Reflector
8/8/2013 2:04 AM 4
8/22/2019 WPF Controls @ a Glance
5/36
8/8/2013 2:04 AM 5
How are controls organized, used and created in WPF?
8/22/2019 WPF Controls @ a Glance
6/36
8/8/2013 2:04 AM 6
8/22/2019 WPF Controls @ a Glance
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/22/2019 WPF Controls @ a Glance
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
8/22/2019 WPF Controls @ a Glance
9/36
FrameworkElement(FE) supports:
Richer propertymetadata
Additional layoutcharacteristics
Eg.HorizontalAlignment, Margin
Styles
Storyboards
Triggers
Databinding
8/8/2013 2:04 AM 9
8/22/2019 WPF Controls @ a Glance
10/36
ControlProvides
templatingsupport
Base class for
all user-interactiveelements
8/8/2013 2:04 AM 10
8/22/2019 WPF Controls @ a Glance
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
8/22/2019 WPF Controls @ a Glance
12/36
8/8/2013 2:04 AM 12
My Button My Button My
button
My Button
8/22/2019 WPF Controls @ a Glance
13/36
8/8/2013 2:04 AM 13
Layout and Panels
8/22/2019 WPF Controls @ a Glance
14/36
WPF LayoutEngine
Panels
VirtualizingPanel
8/8/2013 2:04 AM 14
8/22/2019 WPF Controls @ a Glance
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
8/22/2019 WPF Controls @ a Glance
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
8/22/2019 WPF Controls @ a Glance
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
8/22/2019 WPF Controls @ a Glance
18/36
Panel
Canvas
StackPanel
WrapPanelDockPanel
Grid
8/8/2013 2:04 AM 18
8/22/2019 WPF Controls @ a Glance
19/36
No automatic sizing orpositioning of children
Requires explicit sizing viaWidth and Height properties
Requires explicit positioningvia attached Canvas properties
8/22/2019 WPF Controls @ a Glance
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.
8/22/2019 WPF Controls @ a Glance
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
8/22/2019 WPF Controls @ a Glance
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)
8/22/2019 WPF Controls @ a Glance
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
8/22/2019 WPF Controls @ a Glance
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
8/22/2019 WPF Controls @ a Glance
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
8/22/2019 WPF Controls @ a Glance
26/36
Custom Panel =Extend the Panel
class
Override theMeasureOverride
andArrangeOverride
protected methods.
Demo8/8/2013 2:04 AM 26
8/22/2019 WPF Controls @ a Glance
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
8/22/2019 WPF Controls @ a Glance
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
8/22/2019 WPF Controls @ a Glance
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
8/22/2019 WPF Controls @ a Glance
30/36
8/8/2013 2:04 AM 30
8/22/2019 WPF Controls @ a Glance
31/36
The Marginand Padding
properties can
be used toreserve somespace aroundof within the
control.
8/8/2013 2:04 AM 31
8/22/2019 WPF Controls @ a Glance
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
8/22/2019 WPF Controls @ a Glance
33/36
8/8/2013 2:04 AM 33
Clik me
Text Content
Shape object
8/22/2019 WPF Controls @ a Glance
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
8/22/2019 WPF Controls @ a Glance
35/36
Expressionblend
8/8/2013 2:04 AM 35
8/22/2019 WPF Controls @ a Glance
36/36
Rakesh.VM
IBU
Top Related