Xamarin 布局 XAML

Question

我目前正在使用 Xamarin 为 IOS 和 Android 构建一个应用程序，它应该是一个转换器应用程序，可以将十进制转换为二进制、十六进制和八进制等价物。该应用程序应该以特定方式格式化，我非常XAML 的新手。我希望标签在屏幕上居中，并且所有内容都很好地间隔开，但是我现在这样做的方式让它看起来很乱。下面是我的 XAML。我可以利用 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"
             xmlns:local="clr-namespace:Assignment2"
             x:Class="Assignment2.MainPage">

    <StackLayout Orientation="Vertical" Padding="20">
        <StackLayout Orientation="Horizontal">
            <StackLayout Orientation="Horizontal">
                <Label Text="Number Converter" HorizontalOptions="Center"/>
            </StackLayout>
            <Label Text="Decimal" VerticalOptions="End" />

            <Entry x:Name="Decimal" WidthRequest="75" HorizontalOptions="Center" />
        </StackLayout>

        <BoxView x:Name ="Space" HeightRequest="30"/>

        <Button Clicked="Button_Clicked" x:Name="converter" Text="Convert" />

        <StackLayout Orientation="Horizontal">

            <Label Text="Octal" VerticalOptions="Center" />

            <Label x:Name="Octal" VerticalOptions="Center" WidthRequest="100" />
            <Label Text="Hexadecimal" VerticalOptions="Center"/>

            <Label x:Name="Hexa" VerticalOptions="Center" WidthRequest="50" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Binary Bytes 1-4" VerticalOptions="Center" HorizontalOptions="CenterAndExpand"/>
        </StackLayout>
        <StackLayout>
            <BoxView x:Name="Extra" HeightRequest="30"/>
            <Label x:Name="First" VerticalOptions="Center"/>
            <Label x:Name="Second" VerticalOptions="Center"/>
            <Label x:Name="Third" VerticalOptions="Center"/>
            <Label x:Name="Forth" VerticalOptions="Center"/>
        </StackLayout>
    </StackLayout>

</ContentPage>

Phone Screen

Answer 1

这个问题太笼统了。 我建议您阅读有关可用布局的文档。然后您可以查看每种布局类型的文档以了解如何使用它们。

概览：https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/controls/layouts

滚动视图：https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.scrollview?view=xamarin-forms 堆栈布局：https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.stacklayout?view=xamarin-forms 格：https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.grid?view=xamarin-forms 绝对布局：https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.absolutelayout?view=xamarin-forms RelativeLayout（性能昂贵，谨慎使用）：https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.relativelayout?view=xamarin-forms 弹性布局：https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.flexlayout?view=xamarin-forms