Geek Answers Handbook

Scaling processing for different device sizes in Xamarin formats

I am new to Xamarin formats, so I would like to ask if I am creating a simple XAML page with a grid, and inside this other grid and some text, buttons and images, does Xamarin handle scaling between different device sizes?

My svg image should scale like this, but not on the rest of the page. It seems perfect on large devices like 7 and 9 inch tablets, but it is really bad on small phones.

Is there anything else I have to do to make it the same on all devices? For the record, this is only on Android at the moment, and I have to manually resize the code in the code, for which I do not think this is the best way to do this, so any advice is welcome.

thanks

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

+6
source share
2 answers

You can use percentages of stars to provide scaling between devices.

For example, if you want to do 10% top and bottom and 80% in the middle, you can do this

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

You can do the same on the left and right with the column definitions.

I will also remove the relative shell. Not recommended .

+4

More articles:


All Articles