Xamarin Forms LayoutOption Differences

The differences between Xamarin Forms LayoutOptions, is what I will be covering in this post, and how they behave with different elements and settings. The LayoutOptions is set in Xamarin Forms, via the HorizontalOptions or VerticalOptions properties on any View. They can be set to any of the following options:

Start, Center, End, Fill, StartAndExpand, CenterAndExpand, EndAndExpand, FillAndExpand

Start, Center, End – position the element inside its parent view.

Fill – expands to all the available space inside the parent view.

AndExpand – tells the View to expand to the full width or height of its parent View, even if the children inside the View don’t take up all the available space.

Parent View

What happens when you apply these properties to an Element at the root of the Parent View.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Layout"
             x:Class="Layout.MainPage">
    <Label Text="Welcome to Xamarin Forms!" 
           TextColor="White"
           BackgroundColor="Blue"
           VerticalOptions="Center" 
           HorizontalOptions="Center" />
</ContentPage>

The same thing happens, even if you wrap the label in a Grid.

Note: If you want the Label Text to center, you can use HorizontalTextAlignment and VerticalTextAlignment.

StackLayout

Now lets put this inside a StackLayout, that is set to Fill the screen. I will vary the VerticalOptions and HorizontalOptions between normal placement, then the addition of AndExpand.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Layout"
             x:Class="Layout.MainPage">
    <StackLayout BackgroundColor="Green">
        <Label Text="Start"
               TextColor="White"
               BackgroundColor="Blue"
               VerticalOptions="StartAndExpand" 
               HorizontalOptions="StartAndExpand" />

        <Label Text="Center"
               TextColor="White"
               BackgroundColor="Blue"
               VerticalOptions="CenterAndExpand" 
               HorizontalOptions="CenterAndExpand" />

        <Label Text="End"
               TextColor="White"
               BackgroundColor="Blue"
               VerticalOptions="EndAndExpand" 
               HorizontalOptions="EndAndExpand" />
     </StackLayout>
</ContentPage>

Even if you wrap a ContentView around the label, it doesn’t actually fill up the space. It only expands to the width and height of its children, but the StackLayout will leave the required space. It’s only when the fill option is used, that it will expand to that space.

Finally, its worth noting the WidthRequest and HeightRequest properties. These will cause the element to be the Fill, plus the additional height you have specified here.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Layout"
             x:Class="Layout.MainPage">
    <StackLayout>
        <ContentView VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" HeightRequest="200" BackgroundColor="Olive">
            <Label Text="StartAndExpand"
                   TextColor="White"
                   BackgroundColor="Blue"
                   VerticalOptions="CenterAndExpand" 
                   HorizontalOptions="CenterAndExpand" />
        </ContentView>

        <ContentView VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="Orange">
            <Label Text="FillAndExpand"
                   TextColor="White"
                   BackgroundColor="Blue"
                   VerticalOptions="CenterAndExpand" 
                   HorizontalOptions="CenterAndExpand" />
        </ContentView>

        <ContentView VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="OrangeRed">
            <Label Text="FillAndExpand"
                   TextColor="White"
                   BackgroundColor="Blue"
                   VerticalOptions="CenterAndExpand" 
                   HorizontalOptions="CenterAndExpand" />
        </ContentView>
    </StackLayout>
</ContentPage>

 


XAMARIN.FORMS MONTHLY NEWSLETTER

JOIN 1,000+ SUBSCRIBERS

  1. Don't miss out on updates
  2. The latest info from this site, Xamarin and the community
  3. Unsubscribe at any time*

* We use MailChimp, with double opt-in, and instant unsubscribe

Microsoft MVP | Xamarin MVP | Xamarin Certified Developer | Exrin MVVM Framework | Xamarin Forms Developer | Melbourne, Australia

Related Posts

2 Comments

  1. Jerone

    Can you ellobrate a little more about HeightRequest. Is it that the element will be the HeightRequest value + the fill height (1/3 in you example). Or is it more like a min-height, where it takes the HeightRequest or the fill height (when fill height has a higher value)?

    1. Adam Pedley

      It takes the HeightRequest and sets the element to that height. Then as per the example, it divides the remaining space. Then it adds this height to each element. Hence the first one is HeightRequest + FillAndExpand Height, and the others are just FillAndExpand Height.

      Its actually an odd way of doing it in my opinion. I could have sworn it previously just used the Height and not the FillAndExpand. But testing it proved different.

Leave A Comment?