How to fill and center HorizontalStackLayout

I have a problem, I have a few buttons and want to center them in a HorizontalStackLayout. I like this HorizontalStackLayout to expand from the left to right side of the window to have the visual appearance I want. In this case, by choosing HorizontalOptions I can make it from side to side or centered. I can not make it both. Does anyone have some idea how to fix that?

Case with HorizontalOptions="CenterAndExpand"

Case with HorizontalOptions="Fill"

code:

<HorizontalStackLayout Spacing="20" HorizontalOptions="Fill" x:DataType="local:MainPageViewModel" Grid.Row="2" BackgroundColor="Blue">
    <HorizontalStackLayout.Resources>
        <Style TargetType="{x:Type Button}">
            <Setter Property="BackgroundColor" Value="Transparent"/>
            <Setter Property="BorderColor" Value="Transparent"/>
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="WidthRequest" Value="60"/>
            <Setter Property="FontAttributes" Value="Bold"/>
            <Setter Property="Command" Value="{Binding ChangeDateOfWeekCommand}"/>
        </Style>
    </HorizontalStackLayout.Resources>
    <VerticalStackLayout>
        <Label>date</Label>
        <Button Pressed="ChangeButtonBackgroundOnPress" CommandParameter="{Binding Text, Source={x:Reference MondayButton}}" x:Name="MondayButton" TextColor="White" Text="Pon" ></Button>
    </VerticalStackLayout>
    <Button Pressed="ChangeButtonBackgroundOnPress" CommandParameter="{Binding Text, Source={x:Reference TuesdayButton}}" x:Name="TuesdayButton" TextColor="White" Text="Wt"></Button>
    <Button Pressed="ChangeButtonBackgroundOnPress" CommandParameter="{Binding Text, Source={x:Reference WednesdayButton}}" x:Name="WednesdayButton" TextColor="White" Text="Śr"></Button>
    <Button Pressed="ChangeButtonBackgroundOnPress" CommandParameter="{Binding Text, Source={x:Reference ThursdayButton}}" x:Name="ThursdayButton" TextColor="White" Text="Czw"></Button>
    <Button Pressed="ChangeButtonBackgroundOnPress" CommandParameter="{Binding Text, Source={x:Reference FridayButton}}" x:Name="FridayButton" TextColor="White" Text="Pt"></Button>
    <Button Pressed="ChangeButtonBackgroundOnPress" CommandParameter="{Binding Text, Source={x:Reference SobButton}}" x:Name="SobButton" TextColor="Red" Text="Sob"></Button>
    <Button Pressed="ChangeButtonBackgroundOnPress" CommandParameter="{Binding Text, Source={x:Reference SaturdayButton}}" x:Name="SaturdayButton" TextColor="Red" Text="Nd"></Button>
</HorizontalStackLayout>

I want buttons to be centered and HorizontalStackLayout to be filling a Grid.Row

Solution

You may try using FlexLayout to distribute the space evenly around each button.

You may try the following way to use a FlexLayout,

<FlexLayout Direction="Row"  JustifyContent="SpaceEvenly" HorizontalOptions="Fill"  x:DataType="local:MainPageViewModel"   Grid.Row="2" BackgroundColor="Blue">
    <FlexLayout.Resources>
        <Style TargetType="{x:Type Button}">
            <Setter Property="BackgroundColor" Value="Transparent"/>
            ......
        </Style>
    </FlexLayout.Resources>
    <VerticalStackLayout>
        <Label>date</Label>
        <Button Pressed="ChangeButtonBackgroundOnPress" CommandParameter="{Binding Text, Source={x:Reference MondayButton}}" x:Name="MondayButton" TextColor="White" Text="Pon" ></Button>
    </VerticalStackLayout>
    <Button Pressed="ChangeButtonBackgroundOnPress" CommandParameter="{Binding Text, Source={x:Reference TuesdayButton}}" x:Name="TuesdayButton" TextColor="White" Text="Wt"></Button>
    ......
</FlexLayout>

Here is the screenshot,