使用 FillAndExpand 的可用空间

Question

我正在处理XAML视图，我想用左侧栏创建简单的视图，用网格和内部网格创建内容我有一些按钮，我想要实现的是填写所有表单

代码：

<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>

问题是由于某种原因，如果我在主StackLayout上使用 FillAndExpand，它有可用空间

我读到过，但人们只是说我缺少 FillAndExpand，我认为问题是因为我在第一个 StackLayout 中使用了 Orientation="Horizontal"，但这是我发现将侧栏与 gridview 合并的方式。 我怎样才能做到这一点？ 问候

Answer 1

将 HorizontalOptions 添加到 Grid 本身：

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