如何使布局占用不同方向的屏幕空間百分比？

Question

我正在嘗試學習Xamarin.Forms的基礎知識，以便在幾個月后為我的第一個項目做准備。 要做到這一點，我試圖制作一個計算器，我正在努力使布局正確。 我希望它有“顯示”占據屏幕的1/4，按鈕占據屏幕的剩余3/4，當方向改變時，我希望它改變比率。

目前我在縱向視圖中完成了這一點

但是，當我旋轉屏幕時，它看起來像這樣：

我希望能夠將顯示位從左側移動到屏幕頂部，並且可能會改變它的大小，以便它可以容納所有4行文本。

這是我對CalcPage的XAML。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Calculator.Pages.CalcPage"
             Title="Calculator">

    <ContentPage.ToolbarItems>
        <ToolbarItem Name="Settings" Text="Settings" Priority="0" Activated="Settings_Activated"/>
    </ContentPage.ToolbarItems>


    <ContentPage.Content>
        <StackLayout x:Name="MainStack" Spacing="0" >
            <StackLayout x:Name="DisplayStack" VerticalOptions="FillAndExpand" Spacing="0">
                <Grid x:Name="DisplayGrid">
                    <Grid.RowDefinitions>
                        <RowDefinition Height ="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Label x:Name="NumLabel1" Text ="" FontSize="Medium" HorizontalOptions="EndAndExpand" HorizontalTextAlignment="Center" Grid.Row="0"/>
                    <Label x:Name="OpLabel" Text="" FontSize="Small" HorizontalOptions="EndAndExpand" HorizontalTextAlignment="End" Grid.Row="1"/>
                    <Label x:Name="NumLabel2" Text ="" FontSize="Medium" HorizontalOptions="EndAndExpand" HorizontalTextAlignment="Center" Grid.Row="2"/>
                    <Label x:Name="ResLabel" Text ="" FontSize="Large" HorizontalOptions="EndAndExpand" HorizontalTextAlignment="Center" Grid.Row="3"/>
                </Grid>
            </StackLayout>

            <StackLayout x:Name="ButtonStack" VerticalOptions="FillAndExpand" Spacing="0">
                <Grid x:Name="ButtonsGrid">

                    <Grid.RowDefinitions>
                        <RowDefinition Height="18*"/>
                        <RowDefinition Height="18*"/>
                        <RowDefinition Height="18*"/>
                        <RowDefinition Height="18*"/>
                        <RowDefinition Height="18*"/>
                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="20*"/>
                        <ColumnDefinition Width="20*"/>
                        <ColumnDefinition Width="20*"/>
                        <ColumnDefinition Width="20*"/>
                    </Grid.ColumnDefinitions>

                    <Button ClassId="Btn0" Text="0" Clicked="NumBtnClk_Event" Grid.Row="3" Grid.Column="1"
                            StyleClass="Default"/>
                    <Button ClassId="Btn1" Text="1" Clicked="NumBtnClk_Event" Grid.Row="2" Grid.Column="0"/>
                    <Button ClassId="Btn2" Text="2" Clicked="NumBtnClk_Event" Grid.Row="2" Grid.Column="1"/>
                    <Button ClassId="Btn3" Text="3" Clicked="NumBtnClk_Event" Grid.Row="2" Grid.Column="2"/>
                    <Button ClassId="Btn4" Text="4" Clicked="NumBtnClk_Event" Grid.Row="1" Grid.Column="0"/>
                    <Button ClassId="Btn5" Text="5" Clicked="NumBtnClk_Event" Grid.Row="1" Grid.Column="1"/>
                    <Button ClassId="Btn6" Text="6" Clicked="NumBtnClk_Event" Grid.Row="1" Grid.Column="2"/>
                    <Button ClassId="Btn7" Text="7" Clicked="NumBtnClk_Event" Grid.Row="0" Grid.Column="0"/>
                    <Button ClassId="Btn8" Text="8" Clicked="NumBtnClk_Event" Grid.Row="0" Grid.Column="1"/>
                    <Button ClassId="Btn9" Text="9" Clicked="NumBtnClk_Event" Grid.Row="0" Grid.Column="2"/>

                    <Button ClassId="Btn+" Text="+" Clicked="OprBtnClk_Event" Grid.Row="0" Grid.Column="3"/>
                    <Button ClassId="Btn-" Text="-" Clicked="OprBtnClk_Event" Grid.Row="1" Grid.Column="3"/>
                    <Button ClassId="BtnX" Text="X" Clicked="OprBtnClk_Event" Grid.Row="2" Grid.Column="3"/>
                    <Button ClassId="Btn/" Text="/" Clicked="OprBtnClk_Event" Grid.Row="3" Grid.Column="3"/>

                    <Button ClassId="Btn." Text="." Clicked="BtnClkPoint_Event" Grid.Row="3" Grid.Column="0"/>
                    <Button ClassId="BtnC" Text="AC" Clicked="BtnClkClear_Event" Grid.Row="3" Grid.Column="2"/>
                    <Button ClassId="Btn=" Text="=" Clicked="BtnClkEquals_Event" Grid.Row="4" Grid.Column="3"/>

                </Grid>
            </StackLayout>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

在C＃中，我有這個用於檢測方向變化的功能。

private double width = 0;
private double height = 0;

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height);
    if(this.width != width || this.height != height)
    {
        this.width = width;
        this.height = height;
    }

    if(width > height)
    {
        MainStack.Orientation = StackOrientation.Horizontal;
        DisplayStack.VerticalOptions = LayoutOptions.Start;
        ButtonStack.VerticalOptions = LayoutOptions.End;
    }
    else
    {
        MainStack.Orientation = StackOrientation.Vertical;
    }       
}

Answer 1

在橫向模式下，在Display和Buttons堆棧中刪除VerticalOptions = FillAndExpand ，並添加HorizontalOptions = FillAndExpand