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

Answer 2

查看这些链接https://developer.xamarin.com/api/type/Xamarin.Forms.OnIdiom%601/，https://developer.xamarin.com/api/type/Xamarin.Forms.Constraint/。希望它有所帮助。

在Xamarin Forms中处理不同设备大小的缩放

2 个答案: