7

I'm new to Xamarin forms so would like to ask, if I create a simple XAML page with a grid, and within that another grid and some text, a button and an image, does Xamarin handle the scaling between different device sizes?

My image is svg so should scale, but the rest of the page does not. It appears fine on bigger devices such as 7 and 9 inch tablets, but it's really poor on smaller phones.

Is there something else I have to do to make this appear the same on all devices? For the record it's only on android at the moment and I'm having to manually resize things in code-behind which I don't believe is the best way to do this, so any advice 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

2
  • In Xamarin.Android we can use <RowDefinition Height="Auto" /> or <RowDefinition Height="3*" /> to achieve auto adaptive.
    – Robbit
    Jan 1, 2018 at 7:26
  • you only developed for Android or iOS too? Jan 2, 2018 at 5:52

2 Answers 2

6
+25

You can use star percentages to provide scaling across devices.

For example, if you wanted to take up 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 thing left and right with column definitions.

I would also remove the relative layout wrapper. It is not recommended.

2

Check out these links https://developer.xamarin.com/api/type/Xamarin.Forms.OnIdiom%601/, https://developer.xamarin.com/api/type/Xamarin.Forms.Constraint/. Hope it helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.