How to Handle Different Size of Screen in App

HI,
I am new in Mobile Development.

Please let me know what is the best way to design App for multiple size of screen,

should i need to create different Main.axml ?

Answers

  • DarshanJSDarshanJS USMember ✭✭✭✭

    you can right global code in APP.Xaml page and you can call in every page using the key name and bind it to style below is my code.

        <Style x:Key="MyTitleLabel" TargetType="Label" BaseResourceKey="TitleStyle">
                        <Setter Property="Font" >
                            <Setter.Value>
    
                                <OnIdiom x:TypeArguments="Font">
                                    <OnIdiom.Phone>
                                        <OnPlatform x:TypeArguments="Font" iOS="14" Android="16"  />
                                    </OnIdiom.Phone>
                                    <OnIdiom.Tablet>
                                        <OnPlatform x:TypeArguments="Font" iOS="23" Android="23"  />
                                    </OnIdiom.Tablet>
                                </OnIdiom>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="TextColor" Value="#770754" />
                        <Setter Property="FontAttributes" Value="None" />
    
              </Style>
    

    Now you can call this style in other pages using key name by binding it to label style like below code

    <Label Text="Welcome" Style="{StaticResource MyTitleLabel}" HorizontalOptions="CenterAndExpand" Grid.Row="0" >

    Note above style is only applicable to label for font size , if you want other properties also then you have create sstyle base on your requirements

Sign In or Register to comment.