Handhabung der Skalierung für verschiedene Gerätegrößen in Xamarin Forms

Question

Ich bin neu in Xamarin-Formularen und möchte daher fragen, ob ich eine einfache XAML-Seite mit einem Gitter und innerhalb dieses anderen Gitters und etwas Text, eine Schaltfläche und ein Bild erstellen , behandelt Xamarin die Skalierung zwischen verschiedenen Gerätegrößen?

Mein Bild ist Svg sollte also skalieren, aber der Rest der Seite nicht. Es scheint auf größeren Geräten wie 7- und 9-Zoll-Tablets gut zu sein, aber auf kleineren Handys ist es sehr schlecht.

Muss ich noch etwas anderes tun, damit dies auf allen Geräten gleich aussieht? Für den Rekord ist es nur auf Android im Moment, und ich muss die Größe manuell in Code ändern-hinter dem ich glaube nicht, ist der beste Weg, dies zu tun, so dass jeder Rat willkommen ist.

Dank

<?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> 

I

Answer 1

Schauen Sie sich diese Links https://developer.xamarin.com/api/type/Xamarin.Forms.OnIdiom%601/, https://developer.xamarin.com/api/type/Xamarin.Forms.Constraint/. Ich hoffe es hilft.

Answer 2

Sie können Sternprozentwerte verwenden, um die Skalierung für Geräte zu ermöglichen.

Zum Beispiel, wenn Sie in der Mitte nehmen 10% oben und unten und 80% wollten können Sie dies

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

Sie können das gleiche tun, links und rechts mit Spaltendefinitionen.

Ich würde auch den relativen Layout-Wrapper entfernen. It is not recommended.