Xamarin Forms is young & has a learning curve
It's tempting to comprimise
We can avoid this by learning more about the layout system
StackLayout
ScrollView
Layout Options
Width/Height Request
Grid
AbsoluteLayout
RelativeLayout
Stack Layout
- Stacks things
- Horizontally or Vertically
- Spacing between elements
ScrollView
- Wraps other layouts
- Makes them scrollable
- Pairs nicely with StackLayout
- ScrollOrientation - Vertical or Horizontal
- Needs to know the size of its children
Layout Options
- HorizontalOptions & VerticalOptions
- How a view is positioned relative to its parent
- Alignment: Start, Center, End, Fill
- Expansion: Expand Option
- Certain layouts may constrain the options their children can have
Start, Center, End
- Shrinks view to the space it needs to be
- Start = Left/Top
- End = Right/Bottom
- Don't set a ScrollView to this
- What is the height it 'needs to be'?
- Will shrink to nothing
Fill
- Attempts to fill parent container
- Default for View base class
- ScrollView/StackLayout keep default
Expand
- Allows extra space in parent view to be allocated to children that have expands option
- Only if the parent view is larger than its children
- But not necessarily 'filled' by those children
Width/Height Request
- Width & Height are readonly properties
- WidthRequest and HeightRequest are requests to set
- If Fill is set in LayoutOptions these will be ignored
- Useful for LayoutOptions Start, Center, End
Grid
- Some similarities to HTML tables
- Columns, Rows with widths/heights
- Auto, Absolute, Star
- RowSpan, ColumnSpan
AbsoluteLayout
- Manually set x,y,width,height
- AutoSize flag calculates width/height for you
- Can be nested underneath other layouts
Proportionally
- Makes AbsoluteLayout not so Absolute...
- Handles calculations you might have done manually
- Set as flags
- PositionProportional & xProportional, yProportional
- SizeProportional & WidthProportional, HeightProportional
- All
SizeProportional
- Set flag on child
- Set size to number between 0 and 1
- ie width 0.25, height 0.10
- Size will be % of layouts size
- ie 25% width, 10% height
PositionProportional
- Set on child
- Position of 0,0 is top left corner
- 1,1 is bottom right
- 0.5, 0.5 is middle
RelativeLayout
- Constraints based layouts
- Relative to Parent, Relative to View
- Easier in code
Other Options
- TableView/ListView
- Custom Rendering
- HTML in WebView (see Xamarin Forms Labs)
Layouts in Xamarin Forms
By Rod Howarth
Layouts in Xamarin Forms
- 20,505
