我想在 Xamarin 表单中创建简单的 XAML

Question

这是我想在 Xamarin Forms 中创建 XAML 的屏幕截图。

所以我想确切知道的是如何将“62”放置在 Parent 中，并将“PSI”放置在“62”旁边。 它似乎需要使用RelativeLayout，但我无法创建完美的相同的东西。

感谢您的帮助！

Answer 1

实现此目的的一种方法是Grid 与Columns 和Rows

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

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


        <Label Grid.Row="0" Grid.Column="0" TextColor="Gray" Text="Healthy" />

        <StackLayout  HorizontalOptions="Center" Orientation="Horizontal" Grid.Row="1" Grid.Column="1">
        <Label Text="62" TextColor="Black" FontAttributes="Bold" FontSize="Medium" />
        <Label Margin="0,10,0,0"  Text="PSI" TextColor="Gray" />
        </StackLayout>

        <Label Grid.Row="2" Grid.Column="2" Text="Your image" />

    </Grid>

Answer 2

就像 Alessandro 说的，GeralexGR 回答是使用网格的好方法。 获取下一个示例并根据您的需要进行修改

<Grid Margin="20" BackgroundColor="#EEEEEE">
        <Frame CornerRadius="10" BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="StartAndExpand" Margin="0, 20, 0, 0">
            <Grid ColumnSpacing="0" RowSpacing="10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3"
                       Text="Healthy" TextColor="Gray"
                       FontSize="Small" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Start" />
                <Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3"
                       Text="62" TextColor="Black"
                       FontSize="Large" FontAttributes="Bold"
                       HorizontalOptions="CenterAndExpand" HorizontalTextAlignment="Center"
                       VerticalTextAlignment="Center"/>
                <Label Grid.Row="1" Grid.Column="2"
                       Text="PSI" TextColor="LightGray"
                       FontSize="Medium" HorizontalOptions="Start" HorizontalTextAlignment="Start"
                       VerticalTextAlignment="Center"/>
                <Image Grid.Row="2" Grid.Column="2"
                       Source="hearth.png" />
            </Grid>
        </Frame>
</Grid>

在 UI 上看起来像这样 sample

Answer 3

您可以为此使用 RelativeLayout，但这比您需要的要复杂。其他答案建议使用网格，这是最好的答案，但需要一些不同的方法，以便：

1. “62”完全居中。
2. “PSI”紧随其后，根据屏幕大小没有不同的空间量。

用于定义 Grid Rows and Columns 的 Xamarin.Forms 文档列出了三种方法（复制自 Xamarin 文档）：

• 自动 - 自动调整大小以适应行或列中的内容。在 C# 中指定为 GridUnitType.Auto，在 XAML 中指定为 Auto。
• Proportional() – 列和行的大小与剩余空间的比例。在 C# 中指定为值和 GridUnitType.Star，在 XAML 中指定为 #，其中 # 是您想要的值。用 * 指定一行/列将导致它填满可用空间。
• Absolute – 使用特定的固定高度和宽度值调整列和行的大小。在 C# 中指定为值和 GridUnitType.Absolute，在 XAML 中指定为 #，其中 # 是您想要的值。

您想要的布局可以通过 3x3 网格来实现，其中中心是自动调整大小的 - 即它的大小取决于内容。然后 PSI 标签可以在同一行，最右边的列，因此它们之间的间距不取决于屏幕大小。

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Label Grid.Row="0" Grid.Column="0" TextColor="Gray" Text="Healthy" />

        <Label Grid.Row="1" Grid.Column="1" Text="62" TextColor="Black" FontAttributes="Bold" FontSize="Large" VerticalOptions="End"/>
        <Label Grid.Row="1" Grid.Column="2" Text="PSI" TextColor="Gray" FontSize="Small" VerticalOptions="End" HorizontalOptions="Start"/>

        <Image Grid.Row="2" Grid.Column="2" Source="icon.png" VerticalOptions="End" HorizontalOptions="End" Aspect="AspectFit"/>

    </Grid>

Answer 4

<Frame CornerRadius="15" HeightRequest="120" WidthRequest="120" HorizontalOptions="Center" VerticalOptions="Center" BackgroundColor="White">
        <Grid Margin="-10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" VerticalTextAlignment="Center" TextColor="Gray" FontSize="17" Text="Healthy"/>
            <Label Grid.Row="1" Grid.Column="1" Text="6200" TextColor="Black" FontAttributes="Bold" FontSize="30" VerticalOptions="End" />
            <Label Grid.Row="1" Grid.Column="2" Text="PSI" TextColor="Gray"  FontSize="Medium" VerticalOptions="End" HorizontalOptions="Start" />
            <Image Grid.Row="2" Grid.Column="2" Source="iconHeart.png" VerticalOptions="End" HorizontalOptions="End" Aspect="AspectFit" HeightRequest="30" WidthRequest="30" />
        </Grid>
    </Frame>

• 为圆角取框。
• 在其中使用 3 列 3 行的网格。
• 第一行应该在所有三列中展开，其中包含标签 文字“健康”
• 数字标签位于第 2 行和第 2 列的中心。它可以 在不中断用户界面的情况下最多占用 4 位数字。
• PSI 被添加到第 2 行和第 3 列，以放在数字标签旁边。
• 图片将位于第 3 行第 3 列的右下列。