Я пытаюсь изучить основы Xamarin.Forms при подготовке моего первого проекта за несколько месяцев.Чтобы сделать это, я попытался сделать калькулятор, и в настоящее время я пытаюсь получить верный макет.Я хочу, чтобы «Дисплей» занимал, скажем, 1/4 экрана, а кнопки занимали оставшиеся 3/4 экрана, а при изменении ориентации я хотел бы, чтобы он менял пропорции.
В настоящее время я выполнил это в портретном режиме
Однако, когда я поворачиваю экран, это выглядит так:
Я хочу иметь возможность переместить бит дисплея с левой стороны в верхнюю часть экрана и, возможно, изменить его размер, чтобы он мог вместить все 4 строки текста.
Это мой XAML для CalcPage.
<?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;
}
}