Free space using FillAndExpand

Question

Im' working on XAML view and I want to create simple view with left side bar and the content with Grid and inside grid I have some buttons, that I want to achieve is to fill all form

Code:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:d="http://xamarin.com/schemas/2014/forms/design"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:local="clr-namespace:App.ViewModels"
         mc:Ignorable="d"
         x:Class="App.Views.UserSelectionPage">
<ContentPage.Content>
    <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
        <StackLayout Orientation="Vertical">
            <StackLayout Orientation="Vertical" BackgroundColor="#093145" HorizontalOptions="Start" VerticalOptions="FillAndExpand" >
                <Label Text="AppName" 
                   Grid.Row="0"
                   Grid.Column="1"
                   HorizontalOptions="Center"
                   VerticalOptions="Center"
                   FontSize="Header"
                   TextColor="White"
                   Margin="15,0,10,15" />
            </StackLayout>
            <StackLayout Orientation="Vertical" VerticalOptions="End" BackgroundColor="#093145">
                <Image Source="Assets/LargeTitle.scale-100.png"
                   Grid.Row="0"
                   Grid.Column="0"
                   HorizontalOptions="Center"
                   WidthRequest="90"
                   HeightRequest="90"
                   Margin="15,0,10,15"
                   VerticalOptions="Center"/>
            </StackLayout>
        </StackLayout>
        <Grid BackgroundColor="AliceBlue">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <!--<BoxView Color="#505CA9" Grid.Row="0" Grid.ColumnSpan="3" />-->
          
            <Button Text="Use username instead"
                    Command="{Binding ToggleNewUserCommand}"
                    Grid.Row="0"
                    Grid.Column="2"
                    VerticalOptions="Center"
                    HorizontalOptions="End"
                    BackgroundColor="Transparent"
                    FontSize="Title"
                    TextColor="White"
                    Margin="15,0,10,15"/>
            <Button x:Name="userOne" 
                    d:Text="GQ" 
                    Text="{Binding UserSelectionList[0].Abbreviation}" 
                    Command="{Binding ButtonSelectedCommand}"
                    CommandParameter="{x:Reference userOne}"
                    TextColor="White" 
                    HorizontalOptions="Center" 
                    VerticalOptions="Center" 
                    BorderWidth="1"
                    FontSize="92"
                    CornerRadius="160"
                    HeightRequest="320"
                    WidthRequest="320"
                    Margin="0,40,0,40"
                    Grid.Row="1"
                    Grid.Column="0"
                    BackgroundColor="{Binding UserSelectionList[0].BackgroundColor}"
                    d:BackgroundColor="#093145"/>
            <Button x:Name="userTwo" 
                    d:Text="LR" 
                    Text="{Binding UserSelectionList[1].Abbreviation}"
                    Command="{Binding ButtonSelectedCommand}"
                    CommandParameter="{x:Reference userTwo}"
                    TextColor="White" 
                    HorizontalOptions="Center" 
                    VerticalOptions="Center" 
                    BorderWidth="1"
                    FontSize="92"
                    CornerRadius="160"
                    HeightRequest="320"
                    WidthRequest="320"
                    Margin="0,40,0,40"
                    Grid.Row="1"
                    Grid.Column="1"
                    BackgroundColor="{Binding UserSelectionList[1].BackgroundColor}"
                    d:BackgroundColor="#107896" />
            <Button x:Name="userThree" 
                    d:Text="AR" 
                    Text="{Binding UserSelectionList[2].Abbreviation}"
                    Command="{Binding ButtonSelectedCommand}"
                    CommandParameter="{x:Reference userThree}"
                    TextColor="White" 
                    HorizontalOptions="Center" 
                    VerticalOptions="Center" 
                    BorderWidth="1"
                    FontSize="92"
                    CornerRadius="160"
                    HeightRequest="320"
                    WidthRequest="320"
                    Margin="0,40,0,40"
                    Grid.Row="1"
                    Grid.Column="2"
                    BackgroundColor="{Binding UserSelectionList[2].BackgroundColor}"
                    d:BackgroundColor="#829356" />
            <Button x:Name="userFour" 
                    d:Text="RR" 
                    Text="{Binding UserSelectionList[3].Abbreviation}"
                    Command="{Binding ButtonSelectedCommand}"
                    CommandParameter="{x:Reference userFour}"
                    TextColor="White" 
                    HorizontalOptions="Center" 
                    VerticalOptions="Center" 
                    BorderWidth="1"
                    FontSize="92"
                    CornerRadius="160"
                    HeightRequest="320"
                    WidthRequest="320"
                    Grid.Row="2"
                    Grid.Column="0"
                    BackgroundColor="{Binding UserSelectionList[3].BackgroundColor}"
                    d:BackgroundColor="#EBC944" />
            <Button x:Name="userFive" 
                    d:Text="GQ" 
                    Text="{Binding UserSelectionList[4].Abbreviation}" 
                    Command="{Binding ButtonSelectedCommand}"
                    CommandParameter="{x:Reference userFive}"
                    TextColor="White" 
                    HorizontalOptions="Center" 
                    VerticalOptions="Center" 
                    BorderWidth="1"
                    FontSize="92"
                    CornerRadius="160"
                    HeightRequest="320"
                    WidthRequest="320"
                    Grid.Row="2"
                    Grid.Column="1"
                    BackgroundColor="{Binding UserSelectionList[4].BackgroundColor}"
                    d:BackgroundColor="#F26D21" />
            <Button x:Name="userSix"
                    d:Text="GQ" 
                    Text="{Binding UserSelectionList[5].Abbreviation}"
                    CommandParameter="{x:Reference userSix}"
                    Command="{Binding ButtonSelectedCommand}"
                    TextColor="White" 
                    HorizontalOptions="Center" 
                    VerticalOptions="Center" 
                    BorderWidth="1"
                    FontSize="92"
                    CornerRadius="160"
                    HeightRequest="320"
                    WidthRequest="320"
                    Grid.Row="2"
                    Grid.Column="2"
                    BackgroundColor="{Binding UserSelectionList[5].BackgroundColor}"
                    d:BackgroundColor="#C02F1D" />
        </Grid>
    </StackLayout>
</ContentPage.Content>

Problem is for some reason it has free space inclusive if I use FillAndExpand on main StackLayout

I read about that but people just say that I missing FillAndExpand, I think problem is because I use Orientation="Horizontal" into first StackLayout, but that is the way I found to merge side bar with gridview. How can I achieve this? Regards

Answer 1

Add HorizontalOptions to the Grid itself:

<Grid HorizontalOptions="FillAndExpand" BackgroundColor="AliceBlue">