WPF Containers Layout Panels

7/25/2019 WPF Containers Layout Panels

1/31

WPF Containers layout

panels

Shubhangi Shinde


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%&ample# 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.


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&amplesof (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&ampleof )eadered(temsControl.


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


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.


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/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:$


8/31

-'utton 2argin/:$


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/:$


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.


11/31

basic Panels supported byWPF


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.


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.


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.


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


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.


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


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 %&ample
http://var/www/apps/conversion/tmp/scratch_4/DockPanelExample.docxhttp://var/www/apps/conversion/tmp/scratch_4/DockPanelExample.docx


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.


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.


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.


22/31


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


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


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.


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


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.


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.


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.


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.


31/31

WPF Containers Layout Panels

Documents

Transcript of WPF Containers Layout Panels