我想在Xamarin Forms中创建Simple XAML

Question

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

所以我想确切地知道什么是我可以把“62”在家长和“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

就像亚历山德罗表示，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> 

在用户界面上它看起来像这样 sample

Answer 3

您可以使用RelativeLayout的这一点，但是这复杂得多，你需要的。其他答案建议使用网格，这是这里最好的答案，但需要一个不同的方法，以便：

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

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

• 自动 - 自动调整大小以适合行或列中的内容。在C＃中指定为GridUnitType.Auto，或在XAML中指定为Auto。
• 比例（） - 将列和行的大小作为剩余空间的比例。在C＃中指定为值和GridUnitType.Star，在XAML中指定为＃，其中＃是您的期望值。用*指定一行/列将使其填充可用空间。
• 绝对值 - 具有特定的固定高度和宽度值的列和行的大小。在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行。
• 第一行应在所有三列，其中包含标签与 文本“健康”
• 数字标签在第二行去&二纵是在中心展开。它可以 占用4位数字而不会中断您的用户界面。
• PSI被添加到第二行&第三列除了数字标签之外。
• 图像将进入第3行，第3列位于右下角的列中。