Layouts in Xamarin Forms

Rod Howarth - Envoy 

@RodH257

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

Demo1 & Demo2

ScrollView

  • Wraps other layouts
  • Makes them scrollable
  • Pairs nicely with StackLayout
  • ScrollOrientation - Vertical or Horizontal
  • Needs to know the size of its children

Demo

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

Demo

Fill

  • Attempts to fill parent container
  • Default for View base class
  • ScrollView/StackLayout keep default

Demo

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

Demo

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 

Demo

Grid

  • Some similarities to HTML tables
  • Columns, Rows with widths/heights
  • Auto, Absolute, Star
  • RowSpan, ColumnSpan

Demo

AbsoluteLayout

  • Manually set x,y,width,height
  • AutoSize flag calculates width/height for you
  • Can be nested underneath other layouts

Demo

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

Demo

PositionProportional

  • Set on child
  • Position of 0,0 is top left corner
  • 1,1 is bottom right
  • 0.5, 0.5 is middle

Demo

RelativeLayout

  • Constraints based layouts
  • Relative to Parent, Relative to View
  • Easier in code

Demo

Other Options

Thank you!

@RodH257 

 

https://github.com/RodH257/xamarin-forms-layouts-examples

 

http://blog.xamarin.com/xamarin.forms-book-preview-edition-available-now/

Made with Slides.com