android - 在 Xamarin Forms 中处理不同设备尺寸的缩放

Question

我是 Xamarin 表单的新手，所以想问一下，如果我创建一个带有网格的简单 XAML 页面，并且在另一个网格和一些文本、一个按钮和一个图像中，Xamarin 是否处理不同设备之间的缩放尺寸？

我的图像是 svg，所以应该缩放，但页面的其余部分没有。它在 7 英寸和 9 英寸平板电脑等较大的设备上看起来不错，但在较小的手机上确实很差。

我还需要做些什么才能使它在所有设备上看起来都一样吗？ 作为记录，它目前仅在 android 上，我不得不在代码隐藏中手动调整大小，我认为这不是最好的方法，所以欢迎任何建议。

谢谢

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

我

Answer 1

您可以使用星号百分比来提供跨设备缩放。

例如，如果你想占据顶部和底部的 10% 以及中间的 80%，你可以这样做

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

您可以对列定义左右做同样的事情。

我还会删除相关的布局包装器。 It is not recommended .