Xử lý tỷ lệ cho các kích thước thiết bị khác nhau ở dạng Xamarin

Question

Tôi mới sử dụng biểu mẫu Xamarin để hỏi, nếu tôi tạo một trang XAML đơn giản với lưới và trong một lưới khác và một số văn bản, nút và hình ảnh , Xamarin có xử lý việc mở rộng quy mô giữa các kích thước thiết bị khác nhau không?

Hình ảnh của tôi là svg nên quy mô, nhưng phần còn lại của trang thì không. Nó xuất hiện tốt trên các thiết bị lớn hơn như máy tính bảng 7 và 9 inch, nhưng nó thực sự nghèo trên điện thoại nhỏ hơn.

Có điều gì khác tôi phải làm để làm cho điều này xuất hiện giống nhau trên tất cả các thiết bị không? Đối với hồ sơ nó chỉ trên Android vào lúc này và tôi đang phải tự thay đổi kích cỡ những thứ trong code-đằng sau mà tôi không tin là cách tốt nhất để làm điều này, vì vậy bất kỳ lời khuyên chào đón.

Cảm ơn

<?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="CCGT.SimpleLoginPage" 
      xmlns:artina="clr-namespace:UXDivers.Artina.Shared;assembly=UXDivers.Artina.Shared" 
      xmlns:local="clr-namespace:CCGT;assembly=CCGT" Title="{ artina:Translate PageTitleSimpleLogin }" BackgroundColor="{DynamicResource BasePageColor}" 
      xmlns:controls="clr-namespace:TwinTechsForms.NControl;assembly=TwinTechsForms.NControl.SvgImageView"> 

    <ContentPage.Content> 
     <RelativeLayout HorizontalOptions="CenterAndExpand"> 
      <Grid x:Name="outerGrid" HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand" Padding="0,0,0,0" BackgroundColor="Teal"> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="300" /> 
        <RowDefinition Height="*" /> 
        <RowDefinition Height="200" /> 
       </Grid.RowDefinitions> 
       <!-- inner grid 1--> 
       <Grid x:Name="innerGrid" Grid.Row="0" BackgroundColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand" Padding="0,0,0,0"> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="1200" /> 
        </Grid.RowDefinitions> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="1000" /> 
       </Grid.ColumnDefinitions> 
        <controls:SvgImageView x:Name="logo" BackgroundColor="White" 
          SvgAssembly="{Binding SvgAssembly}" 
          SvgPath="CCGT.images.brandSketchArtboard.svg" 
          WidthRequest="320" 
          HeightRequest="320" HorizontalOptions="CenterAndExpand" 
          Grid.Row="0" /> 
       </Grid> 

      <!-- inner grid 2 - triangle and controls --> 
       <Grid x:Name="innerGrid2" Grid.Row="1" BackgroundColor="Teal" Padding="0,-10,0,0"> 
        <Grid x:Name="controlsGrid" Grid.Row="0" Grid.Column="0" > 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto" /> 
         </Grid.RowDefinitions> 

         <controls:SvgImageView 
          SvgAssembly="{Binding SvgAssembly}" 
          SvgPath="CCGT.images.base2.svg" 
          WidthRequest="1400" 
          HeightRequest="250" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" 
          Grid.Row="0" /> 
        </Grid> 
       </Grid> 
       <!--inner grid 3 - button --> 
       <Grid x:Name="buttonsGrid" Grid.Row="2" BackgroundColor="Teal" Padding="0,-8,0,20" HorizontalOptions="FillAndExpand"> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="Auto" /> 
         <RowDefinition Height="Auto" /> 
         <RowDefinition Height="Auto" /> 
         <RowDefinition Height="Auto" /> 
        </Grid.RowDefinitions> 
        <Entry Grid.Row="0" HeightRequest="40" Placeholder="{ artina:Translate StringEmail }" TextColor="WhiteSmoke" BackgroundColor="Teal" PlaceholderColor="White" AutomationId="LoginPage-EmailEntry" HorizontalOptions="{ artina:OnOrientationLayoutOptions 
           PortraitPhone=Fill, 
           LandscapePhone=Center, 
           PortraitTablet=Fill, 
           LandscapeTablet=CenterAndExpand }" WidthRequest="{ artina:OnOrientationDouble 
           LandscapePhone=200, 
           LandscapeTablet=750 }" /> 
        <Label Text="Verify by using your email address" HorizontalOptions="Center" VerticalOptions="Center" TextColor="WhiteSmoke" Grid.Row="1"/> 

        <artina:Button Grid.Row="2" BackgroundColor="White" TextColor="Teal" VerticalOptions="End" Text="{ artina:Translate StringLogin }" WidthRequest="{ artina:OnOrientationDouble 
           LandscapePhone=200, 
           LandscapeTablet=750 }" HorizontalOptions="{ artina:OnOrientationLayoutOptions 
           PortraitPhone=Fill, 
           LandscapePhone=Center, 
           PortraitTablet=Fill, 
           LandscapeTablet=Center }" AutomationId="LoginPage-SubmitButton" 
            HeightRequest="40"/> 
        <Label Grid.Row="3" Text="{ artina:Translate Trademark }" FontSize="13" HorizontalOptions="Center" VerticalOptions="End" TextColor="WhiteSmoke" AutomationId="LoginPage-Trademark"/> 
       </Grid> 
      </Grid> 
     </RelativeLayout> 
    </ContentPage.Content> 
</ContentPage> 

tôi

Answer 1

Kiểm tra những liên kết này https://developer.xamarin.com/api/type/Xamarin.Forms.OnIdiom%601/, https://developer.xamarin.com/api/type/Xamarin.Forms.Constraint/. Hy vọng nó giúp.

Answer 2

Bạn có thể sử dụng tỷ lệ phần trăm sao để cung cấp tỷ lệ trên các thiết bị.

Ví dụ, nếu bạn muốn chiếm 10% trên và dưới và 80% ở giữa, bạn có thể làm điều này

<RowDefinition Height="*" /> 
<RowDefinition Height="8*" /> 
<RowDefinition Height="*" /> 

Bạn có thể làm điều tương tự trái và đúng với định nghĩa cột.

Tôi cũng sẽ xóa trình bao bọc bố cục tương đối. It is not recommended.