Layout Basics
A fundamental class in layout is Panel. Panel is an abstract which is the base class for the layout classes. Most common layouts are :
Panel has UIElements called Children which are arranged in a specific order.
Single Row Grid
Grid is a row and columns arrangement of UIElements
Source sample
Layouts_NK.zip
Following is a Grid with one cell. The cell has three elements which occupy the single grid cell content area. Note that that TextBlocks occupy a space needed for their text while Image occupy the maximum area that the grid provides.
Run the application and click the "Single Cell Grid" button to produce
Note that the text "Center" appears above the image. What do you think will happen in this arrangement
Grid full power
Grid should be your default layout.
Grid has rows and columns.
Rows can be of different height, column can be of different width.
Properties :
- RowDefinitions - collection of RowDefinition
- ColumnDefinitions - collection of ColumnDefinition
- RowSpan - defines how many rows this cell occupies
- ColumnSpan - defines how many columns this cell occupies
RowDefinition and ColumnDefinition has 3 options :
- "Auto" - fit the size of the element in the cell
- Fixed amount of pixels
- star or a number followed by a star - remaining space is divided proportionally.
The position of a cell is determined by Grid properties Row \ Col e.g. Row 0 and Col 0 determines the cell in first row and first column.
Source sample
Layouts_NK.zip
Following is a Grid with 4 rows and 2 columns
Row 0 and row 3 height is Auto so the cell height is given size to fot the text height.
Row 1 height is * and row 2 height is 2* so the space left is used by these rows where as height of row 2 is 2 times the height of row 1.
Column 0 width is Auto so the grid makes the text of the TextBoxes in this column is given enough space, the rest of the space is given to column 1
Layouts_NK.zip
Following is a Grid with 4 rows and 2 columns
Row 0 and row 3 height is Auto so the cell height is given size to fot the text height.
Row 1 height is * and row 2 height is 2* so the space left is used by these rows where as height of row 2 is 2 times the height of row 1.
Column 0 width is Auto so the grid makes the text of the TextBoxes in this column is given enough space, the rest of the space is given to column 1
Run the application and click the "Simple Grid" button to produce :
Stack Panel
Stack panel arranges its UIElemets in stack.
By default arrangement is from top to bottom. Child elements do not overlap.
By default HorizontalAlignment and VerticalAlignment are Stretch, thus this panel occupy all the space given by it's parent
Source sample
Layouts_NK.zip
Following is a stack panel with TextBlock aligned right,Bitmap,TextBlock aligned center and Button. Button and TextBlock are child of a Border element.
TextBox , Button and Bitmap occupy the minimum vertical space it needs.
StackPanel.xaml
Run the application and click the "Stack Panel" button to produce :
Change the phone orientation. what happened ?
Layout Mechanizm
Layout is a two pass process which start in the root element going down the visual tree over all elements :
- pass 1 - each element query his children about the DesiredSize they need given the space he has. Size is a structure with Width and Height as properties
- pass 2 - each element arrange his children on it's surface
TextBlock determine it's size according to the text.
Bitmap determine it's size from it's native pixel dimension.
Implementing a layout is done by inheriting Panel and overriding two methods :
MeasureOverride - pass 1
ArrangeOverride - pass 2
Source sample
Layouts_NK.zip
This sample implement a layout with one grid cell functionality,
The layout class - CMySingleCellGridLayout is used in SingleCellGridLayout.xaml
MySingleCellGridLayout.cs
CMySingleCellGridLayout inherit panel and overrides MeasureOverride and ArrangeOverride.
MeasureOverride - this layout has the functionality of one grid cell so the method compute the max height and width and all elements fit inside. Note that each child invoke Measure with the availeableSize as argument and this update the child element DesiredSize.
ArrangeOverride - this layout has the functionality of one grid cell so all child elements are given the top left of the parent i.e. 0,0 and each Arrange himself with respect to this point given the finalSize
Run the application and click the "My Single Cell Grid Layout" button to produce :
As you can see the functionality is of single grid cell.
Canvas
UIElements are positioned in horizontal\vertical coordinate relative to the top left corner.
In it's MeasureOverride Canvas always calls Measure on it's children with size consist of infinite width and height so Children of Canvas are displayed in their smallest possible size. E.g. Eliipse and Rectangle will have zero size and Image will have it's native bitmap pixel size.
From it's MeasureOverride Canvas returns a size of zero so it has no footprint on the layout.
Important Properties
- Left - Distance between the left side of the object and the left side of it's parent Canvas (negative is allowed)
- Top - Distance between the top side of the object and the top side of it's parent Canvas (negative is allowed)
- ZIndex - Z order rendering on the Canvas objects. By default the order is determined by the order of the object definition. The higher the Z order the closer the item to the foreground. Default ZIndex is 0
Note that Left,Top and ZIndex are Attched Properties see blog
Canvas_NK.zip
The sample has an Ellipse and five Rectangles positioned within a Canvas.
The Button changes the ZIndex of the circle between 0,1 while all Rectangle ZIndex is 0.
SimpleCanvas.xaml
Notice how the Canvas Attached Properties Top and Left are set on the Rectangle child elements
SimpleCanvas.xaml.cs
Run the application and click the "Simple Canvas" button to produce :
Click the "Toggle Circle ZIndex" to produce :
Source sample
Canvas_NK.zip
The sample has three Rectangles positioned within a Canvas.
You can move the shapes by tapping on them and draging them in any position.
Touch events are handled using ManipulationStarted and ManipulationDelta see blog.
CanvasMovingBalls.xaml
rectStyle is defined in App.xaml
CanvasMovingBalls.xaml .cs
Canvas_ManipulationStarted :
- Set the container that defined coordinate for the manipulation.
Canvas_ManipulationDelta
- The element that was tapped is e.OriginalSource
- Translation is fetched via e.DeltaManipulation.Translation
- The element position inside the Canvas is set via Canvas.SetLeft, Canvas.SetTop
Run the application and click the "Canvas Moving Balls" button to produce :
Drag shapes to produce e.g.
Nested Panel
It is possible to nest panels.
Visibility Opacity and IsHitTestVisible
A UIElement has property name Visibility. It has two values :
- Visible - display the element
- Collapsed - size of element is zero so it does effect layout .
A UIElement has property name Opacity. Opacity of 0 means that you can not see the element but it's size remains valid and it affect the layout. Note that even if Opacity is 0 it is still sensitive to touch input, to avoid this use Ishittestvisible.
Opacity and Visibility of an element apply also to it's children.
Nathan
No comments:
Post a Comment