CODEWITHSUNDEEP
androidxamlxamarinxamarin.forms
DarkW1nter
DarkW1nter

Reputation: 2851

Handling scaling for different device sizes in Xamarin Forms

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

Upvotes: 7

Views: 2049

Answers (2)

Steve Chadbourne
Steve Chadbourne

Reputation: 6953

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.

Upvotes: 6

user7688277
user7688277

Reputation:

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.

Upvotes: 2

Related Questions