我想在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列位於右下角的列中。