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

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

1 个答案: