of 31
7/25/2019 WPF Containers Layout Panels
1/31
WPF Containers layout
panels
Shubhangi Shinde
7/25/2019 WPF Containers Layout Panels
2/31
Types of Containers
WPF Window is derived from ContentControl
AContent is an arbitrary element that might be placedinside a container. et!s ta"e a loo" at them one by one#
ContentControl# A ContentControl holds a single child
Content. As Window is derived fromContentControl$every window can have only a single Child. For%&le# Window$ 'utton$ etc.
HeaderedContentControl# (t is basically the same
as ContentControl$ but additionally there is a headerpart which shows the )eader for the Content. Forinstance$ a *roup'o&$%&pander are)eaderedContentControl.
7/25/2019 WPF Containers Layout Panels
3/31
ItemsControl# The content of (temsControl ismultiple. Therefore$ you can place manyarbitrary elements inside an (temsControl. For
instance # ist'o&$ ist+iew are e&lesof (temsControl.
HeaderedItemsControl# )ere$each Collection has a speci,c header content
of it. A)eadered(temsControl is a comple&element which holds each content with aspeci,c header.Tree+iew is an e&leof )eadered(temsControl.
7/25/2019 WPF Containers Layout Panels
4/31
%ach contentControl contains a Content property
which stores the inner content. -'utton Content/This is a 'utton/ 01 same as
-'utton1This is a 'utton-0'utton1
7/25/2019 WPF Containers Layout Panels
5/31
Alignment
Alignment$ 2argin and padding arethe 3 most important properties thatyou should always consider forevery 4(%lement.
Alignment determines how the childelements will be placed within the
allocated space of the Parent%lement. (n other words$ itdetermines the position on the space
it was provided.
7/25/2019 WPF Containers Layout Panels
6/31
two types ofAlignment#
HorizontalAlignment# (t has 5possible values 6 eft$ 7ight$ Centerand Stretch. Stretch is the defaultvalue of any )ori8ontalAlignment.
VerticalAlignment# (t has 5 possible+alues 6 Top$ Center$ 'ottom and
Stretch. Stretch is the default valueof any +erticalAlignment.
7/25/2019 WPF Containers Layout Panels
7/31
Margin
(t determines the distance between one controlto the boundary of the cell where it is placed. (tcan be uniform when speci,ed as a integervalue$ or you can use TypeConverter to specifythe value of all its sides. For instance#
2argin /9:/ means eft9:$ Top9:$ 7ight9: and 'ottom9:.
;ou can also specify as 2argin/9:$
7/25/2019 WPF Containers Layout Panels
8/31
-'utton 2argin/:$
7/25/2019 WPF Containers Layout Panels
9/31
Padding
Padding is present in few of the controls that helpin enlarging the si8e of the control by its value.
So it is almost similar$ but 2argin places spaceoutside the boundary of the control whereaspadding places it inside the boundary of thecontrol.
-'utton Padding/:$
7/25/2019 WPF Containers Layout Panels
10/31
ayout Containers
Another important part of any WPFapplication is to de,ne the ayout ofthe screen.
WPF introduces a number of Panelseach are derivedfrom abstract class Panel.
;ou can also derive Panel to de,neyour custom Panel if you wish.
7/25/2019 WPF Containers Layout Panels
11/31
basic Panels supported byWPF
7/25/2019 WPF Containers Layout Panels
12/31
PA=%
Panel is the abstract class from which each andevery panel is derived from.
Properties# >6(nde (t determines the inde& of the 4(%lement which
overlapped with another element. >(nde& is an Attachedproperty which determines the inde& in layeredelements. ?ne with higher >inde& will show above theother.
(nternalChildren# This is the basic4(%lementCollection element which is e&posed usingChildren property. When de,ning your custom Panel$you can use it to get the elements.
'ac"ground# This is also present for any panel element$which speci,es the 'ac"ground Color for the Panel.
7/25/2019 WPF Containers Layout Panels
13/31
Custom Panel
you need to override two methods#
MeasureOverride# This method is called wheneveran element is added on the Panel. (t ta"estheavailableSi8e as input and returns
the @esiredSi8e for the element passed. ;ou need tocalculate the Si8eso that it could be placed accordinglyin desired si8e.
ArrangeOverride# This method is called to determinethe arrangement of the %lement. (t will be called oncefor the whole panel$ when ayout is created and the,nal desired si8e for the panel is returned from it. (twill again be called when ayout is updated.
7/25/2019 WPF Containers Layout Panels
14/31
*7(@
*rid is the most basic layout panel whichforms a graph in the whole frame.
*rid forms a Table which you can address
using 7ow and Column. ;ou can specify
the 7ow@e,nation and Column@e,nation for7ows and columns of the *rid.
;ou can specify the height of a 7ow andWidth of a Column easilyusing 7ow@e,nationsand Column@e,nations.
7/25/2019 WPF Containers Layout Panels
15/31
Sizing of Rows and Columns
)eight and Width of each Cell in a *rid can bespeci,ed using 7ow@e,nations andColumn@e,nations$the si8ing can be speci,ed in more than one way. TheSi8ing can be#
Auto# This is the default Si8ing which is determined by theelement you place within the Control.
* (Star# When you use star$ it means the measurement willbe done using ratio. 9 means double of
7/25/2019 WPF Containers Layout Panels
16/31
STACBPA=%
Stac"Panel is a container where all the childelements are placed in stac"s$ that means one afteranother$ so that no one overlaps on one another
Stac"panel places controls based on Positive(n,nity$
which means the si8e that it can ta"e in positivedirection.
The main property of Stac"Panel is its ?rientation.There are two ?rientations supported.
Vertical# This is the default orientationfor Stac"Panel where the child items are placed verticallyone after another from top to bottom.
Horizontal# )ere the items are placed from left to 7ightone after another.
7/25/2019 WPF Containers Layout Panels
17/31
-Window&mlns/http#00schemas.microsoft.com0winf&09::0&aml0presentation/&mlns#&/http#00schemas.microsoft.com0winf&09::0&aml/
Class/WPFDTourD'eginnersDayout.Stac"Panel@%2?/=ame/Window/ Title/Stac"Panel@%2?/WindowStartupocation/CenterScreen/ Width/5:/)eight/5E:/1
-Stac"Panel 2argin/:$:$:$:/ 'ac"ground/White/
?rientation/+ertical/1 -'utton Content/(m Top of Stac"/01 -'utton
Content/(m 'ottom ?f Stac"/01 -0Stac"Panel1-0Window1
7/25/2019 WPF Containers Layout Panels
18/31
@?CBPA=%
@oc"Panel is the most widely used control todetermine the layout of an application. (tuses @oc"Panel.
@oc"attached property to determine the position of
the element. The @oc" element when Top or 'ottom$ will ma"e the
element appear Top or 'ottom of each other$ andwhen its eft and right$ it is left and right of each other.
(n case of @oc"Panel$ if the height and width of theelement placed within it is not speci,ed$ it ta"es thesi8e of the area it is provided with.
@oc"Panel %&le
http://var/www/apps/conversion/tmp/scratch_4/DockPanelExample.docxhttp://var/www/apps/conversion/tmp/scratch_4/DockPanelExample.docx7/25/2019 WPF Containers Layout Panels
19/31
CA=+AS
Canvas is a special ayout panelwhich positions elements withabsolute position means using & and
y co6ordinates.
When used within a Canvas$elements are not restricted to
anything. (t can be overlapped whenthe position intersects with othercontrols.
7/25/2019 WPF Containers Layout Panels
20/31
Canvas doesn!t employ anyrestriction to its elements. So thewidth and height of individual
elements is very necessary to bespeci,ed.
;ou can use Canvas.eft$
Canvas.7ight$Canvas.Top and Canvas.'ottom tospecify the co6ordinates.
7/25/2019 WPF Containers Layout Panels
21/31
4=(F?72*7(@
4niform*rid is a special control whichadusts its elements uniformly.
(f you want your 7ows and Columnsto be uniform in your grid$ you canuse 4niform*rid instead of =ormal*rid declaration.
(n case of 4niform*rid$ the childelements will always be of the samesi8e.
7/25/2019 WPF Containers Layout Panels
22/31
7/25/2019 WPF Containers Layout Panels
23/31
4niform*rid Columns/9/7ows/3/1 -'order'ac"ground/7ed/ 01 -'order
'ac"ground/*reen/ 01 -'order'ac"ground/'lue/ 01 -'order'ac"ground/;ellow/ 01 -'order
'ac"ground/@ar"*oldenrod/ 01-'order 'ac"ground/@ar"Bha"i/ 01-04niform*rid1
7/25/2019 WPF Containers Layout Panels
24/31
*roup'o&
*roup'o& allows to group content with a customheader in it.
As*roup'o& is a ContentControl$ it can have onlya single element in the body. So you need touse Panels to add children within it.
-*roup'o& )eader/This goes to )eader/2argin/G:/1
-Stac"Panel1 -'utton Content/First%lement/01 -'utton Content/Second %lement/01 -0Stac"Panel1
-0*roup'o&1
7/25/2019 WPF Containers Layout Panels
25/31
+iew'o&
+iew'o& is a special WPF control whichstretches or scales the contents of theelements.
The Stretch property of +iew'o& can have fourproperties# Fill# Fills the content and also ma"es the Aspect
7atio intact.
=one# Stretch behaviour will not be set.
4niformToFill# Fills the element uniformly$ andchanges the Aspect 7atio.
4niform# 4niformly enlarges the content.
The stretch @irection can be speci,ed as 'oth$@own?nly and 4p?nly.
7/25/2019 WPF Containers Layout Panels
26/31
-+iewbo& Stretch/=one/Stretch@irection/'oth/ 1
-*rid1 -Te&t'o& Te&t/This is acontent/ FontWeight/'old/FontSi8e/3:/ 01
-0*rid1
-0+iewbo&1
7/25/2019 WPF Containers Layout Panels
27/31
(n"Canvas
Another most powerful control whichis introduced with WPF is (n"Canvas.
This control allows you to draw overthe Canvas and ultimately get theimage bytes saved.
7/25/2019 WPF Containers Layout Panels
28/31
Transformation
Transformation allows to mapelement from one co6ordinate spaceto another co6ordinate space.
The transformation is mapped usingTransformation 2atri& in 9@ space.'y manipulating the matri& values$
you can Transform elementsto 7otate$ Scale$ S"ew and Translate.
7/25/2019 WPF Containers Layout Panels
29/31
Transformation is of 5 basictypes
Rotate"ranform# 7otates an element by aspeci,ed Angle. ;ou can specify the Angle of 7otationand the element will be rotated in 9@ space.
Scale"ransform# ScaleTransform allows you to scale
the element means increase0decrease the si8e of theelement in the 9@ space.
S#ew"ransform# (t s"ews the element by speci,edangle. S"ew stretches elements ina =on4niformmanner and thus the element will be
transformed so as in 3@ space."ranslate"ransform# This transformation will ma"e
the element move by a speci,ed H and ; co6ordinates.
7/25/2019 WPF Containers Layout Panels
30/31
There is also a provision to applymore than one Transformationusing Transform*roup or 2atri&Transf
orm.Transform*roup allows you tospecify more thanone Transformation to be applied on
the single element and thus givesyou a hybrid Transformation for yourcontrol.
7/25/2019 WPF Containers Layout Panels
31/31