how to fix resolution in application?

Question

I wanted to know how the application can be displayed one size on all devices?

Because when I test my app on small devices, all the elements are either too big or do not fit on the screen.

What should be done to solve this problem?

I used StackLayout to arrange the elements.

This is one of my codes:

<StackLayout Orientation="Vertical"  Margin="10" Padding="10" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">


        <Label Text="WellCome to App" TextColor="Aquamarine" FontSize="40" FontAttributes="Bold,Italic"
           HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>


        <Label Text="Please select the topic you want:" FontSize="21" FontAttributes="Bold,Italic"
               HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" TextColor="DarkRed"/>


        <Grid  ColumnSpacing="0" RowSpacing="0" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
            <Grid.RowDefinitions>
                <RowDefinition Height="120"/>
                <RowDefinition Height="120"/>
                <RowDefinition Height="120"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="120"/>
            </Grid.ColumnDefinitions>


            <Button Text="Space" TextColor="White" FontSize="Large"
                     BackgroundColor="Black"
                     HeightRequest="140"
                     WidthRequest="140"
                     CornerRadius="60"
                     HorizontalOptions="Center"
                     BorderWidth="1"
                     BorderColor="Silver"
                     Clicked="spaceButton_OnClicked">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="Scale"
                                Value="1" />
                            </VisualState.Setters>
                        </VisualState>

                        <VisualState x:Name="Pressed">
                            <VisualState.Setters>
                                <Setter Property="Scale"
                                Value="0.8" />
                            </VisualState.Setters>
                        </VisualState>

                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </Button>


            <Button Text="Sports" FontSize="Large" Grid.Column="2"  
               TextColor="White" BackgroundColor="Black"
                 HeightRequest="140"
                 WidthRequest="140"
                 CornerRadius="60"
                 HorizontalOptions="Center"
                 BorderWidth="1"
                 BorderColor="Silver"
                 Clicked="sportButton_OnClicked">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStatess">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="Scale"
                                Value="1" />
                            </VisualState.Setters>
                        </VisualState>

                        <VisualState x:Name="Pressed">
                            <VisualState.Setters>
                                <Setter Property="Scale"
                                Value="0.8" />
                            </VisualState.Setters>
                        </VisualState>

                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </Button>


            <Button Text="Game" FontSize="Large" Grid.Row="1"  Grid.Column="1"  
                TextColor="White" BackgroundColor="Black"
                 HeightRequest="140"
                 WidthRequest="140"
                 CornerRadius="60"
                 HorizontalOptions="Center"
                 BorderWidth="1"
                 BorderColor="Silver"
                 Clicked="gameButton_OnClicked">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStatesss">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="Scale"
                                Value="1" />
                            </VisualState.Setters>
                        </VisualState>

                        <VisualState x:Name="Pressed">
                            <VisualState.Setters>
                                <Setter Property="Scale"
                                Value="0.8" />
                            </VisualState.Setters>
                        </VisualState>

                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </Button>


            <Button Text="Technology" FontSize="12" Grid.Row="2" Grid.Column="0" 
               TextColor="White" BackgroundColor="Black"
                 HeightRequest="140"
                 WidthRequest="140"
                 CornerRadius="60"
                 HorizontalOptions="Center"
                 BorderWidth="1"
                 BorderColor="Silver"
                 Clicked="techButton_OnClicked">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStats">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="Scale"
                                Value="1" />
                            </VisualState.Setters>
                        </VisualState>

                        <VisualState x:Name="Pressed">
                            <VisualState.Setters>
                                <Setter Property="Scale"
                                Value="0.8" />
                            </VisualState.Setters>
                        </VisualState>

                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </Button>


            <Button  Text="History" FontSize="20" Grid.Row="2" Grid.Column="2" 
                TextColor="White" BackgroundColor="Black"
                 HeightRequest="140"
                 WidthRequest="140"
                 CornerRadius="60"
                 HorizontalOptions="Center"
                 BorderWidth="1"
                 BorderColor="Silver"
                 Clicked="oldButton_OnClicked">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonSttes">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="Scale"
                                Value="1" />
                            </VisualState.Setters>
                        </VisualState>

                        <VisualState x:Name="Pressed">
                            <VisualState.Setters>
                                <Setter Property="Scale"
                                Value="0.8" />
                            </VisualState.Setters>
                        </VisualState>

                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </Button>
        </Grid
    </StackLayout>

My code is displayed in this form:

Could you be more specific? Include some code, include some screenshot clarifying the problem — Cfun, Dec 02 '20 at 10:47

Junior Jiang · Accepted Answer · 2020-12-03T08:14:51.027

From shared code, the proportions of the elements are the same.Then you could set Star(*) for Height and Width, and set HorizontalOptions and VerticalOptions of Button be FillAndExpand to make the elements to fit all the sizes of device screen.

However, only setting this can not make the Height of Grid Item shows the same with Width:(Pixel 2 Pie 9.0 420dpi)

To solve this you could calcuate the Width and Height on runtime. From this discussion, you will know if the units of Width and Height set a specified value, it will show different effects in different device.

Luckly, we can get Screen Density easily by using Xamarin.Essentials. If you need a 120 units value and based on Pixel 2 Pie 9.0 420dpi (1080*1920) android device, you can set Height or Width as follows:

// this device screen density is 2.625, therefore divide by 2.625, if you test in other device, you could divide by its screen density.
Row.Height/Width =  120 * (mainDisplayInfo.Density / 2.625)

Then it will show correctly:

The full XML Code as follows:

<StackLayout Orientation="Vertical"
                Margin="10"
                Padding="10"
                VerticalOptions="FillAndExpand"
                HorizontalOptions="FillAndExpand">

    <Label Text="WellCome to App"
            TextColor="Aquamarine"
            FontSize="40"
            FontAttributes="Bold,Italic"
            HorizontalOptions="CenterAndExpand"
            VerticalOptions="CenterAndExpand" />


    <Label Text="Please select the topic you want:"
            FontSize="21"
            FontAttributes="Bold,Italic"
            HorizontalOptions="CenterAndExpand"
            VerticalOptions="CenterAndExpand"
            TextColor="DarkRed" />


    <Grid  ColumnSpacing="0"
            RowSpacing="0"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="CenterAndExpand">
        <Grid.RowDefinitions>
            <RowDefinition x:Name="RowOne" Height="*" />
            <RowDefinition x:Name="RowTwo" Height="*" />
            <RowDefinition x:Name="RowThree" Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="ColumnOne" Width="*" />
            <ColumnDefinition x:Name="ColumnTwo" Width="*" />
            <ColumnDefinition x:Name="ColumnThree" Width="*" />
        </Grid.ColumnDefinitions>


        <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <Button Text="Space"
                    TextColor="White"
                    FontSize="Large"
                    BackgroundColor="Black"
                    HorizontalOptions="FillAndExpand"
                    CornerRadius="60"
                    VerticalOptions="FillAndExpand"
                    BorderWidth="1"
                    BorderColor="Silver">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="Scale"
                                        Value="1" />
                            </VisualState.Setters>
                        </VisualState>

                        <VisualState x:Name="Pressed">
                            <VisualState.Setters>
                                <Setter Property="Scale"
                                        Value="0.8" />
                            </VisualState.Setters>
                        </VisualState>

                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </Button>
        </StackLayout>

        <Button Text="Sports"
                FontSize="Large"
                Grid.Column="2"
                TextColor="White"
                BackgroundColor="Black"
                VerticalOptions="FillAndExpand"
                CornerRadius="60"
                HorizontalOptions="FillAndExpand"
                BorderWidth="1"
                BorderColor="Silver">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStatess">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="Scale"
                                    Value="1" />
                        </VisualState.Setters>
                    </VisualState>

                    <VisualState x:Name="Pressed">
                        <VisualState.Setters>
                            <Setter Property="Scale"
                                    Value="0.8" />
                        </VisualState.Setters>
                    </VisualState>

                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Button>


        <Button Text="Game"
                FontSize="Large"
                Grid.Row="1"
                Grid.Column="1"
                TextColor="White"
                BackgroundColor="Black"
                VerticalOptions="FillAndExpand"
                CornerRadius="60"
                HorizontalOptions="FillAndExpand"
                BorderWidth="1"
                BorderColor="Silver">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStatesss">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="Scale"
                                    Value="1" />
                        </VisualState.Setters>
                    </VisualState>

                    <VisualState x:Name="Pressed">
                        <VisualState.Setters>
                            <Setter Property="Scale"
                                    Value="0.8" />
                        </VisualState.Setters>
                    </VisualState>

                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Button>


        <Button Text="Technology"
                FontSize="12"
                Grid.Row="2"
                Grid.Column="0"
                TextColor="White"
                BackgroundColor="Black"
                VerticalOptions="FillAndExpand"
                CornerRadius="60"
                HorizontalOptions="FillAndExpand"
                BorderWidth="1"
                BorderColor="Silver">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStats">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="Scale"
                                    Value="1" />
                        </VisualState.Setters>
                    </VisualState>

                    <VisualState x:Name="Pressed">
                        <VisualState.Setters>
                            <Setter Property="Scale"
                                    Value="0.8" />
                        </VisualState.Setters>
                    </VisualState>

                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Button>


        <Button  Text="History"
                    FontSize="20"
                    Grid.Row="2"
                    Grid.Column="2"
                    TextColor="White"
                    BackgroundColor="Black"
                    VerticalOptions="FillAndExpand"
                    CornerRadius="60"
                    HorizontalOptions="FillAndExpand"
                    BorderWidth="1"
                    BorderColor="Silver">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonSttes">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="Scale"
                                    Value="1" />
                        </VisualState.Setters>
                    </VisualState>

                    <VisualState x:Name="Pressed">
                        <VisualState.Setters>
                            <Setter Property="Scale"
                                    Value="0.8" />
                        </VisualState.Setters>
                    </VisualState>

                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Button>
    </Grid>
</StackLayout>

And the ContentPage.cs:

public partial class PageTestGrid : ContentPage
{
    public PageTestGrid()
    {
        InitializeComponent();

        var mainDisplayInfo = DeviceDisplay.MainDisplayInfo;
        var density = mainDisplayInfo.Density;

        //if you want to set 120 as the Height of Grid
        RowOne.Height = 120 * (mainDisplayInfo.Density / 2.625);
        RowTwo.Height = 120 * (mainDisplayInfo.Density / 2.625);
        RowThree.Height = 120 * (mainDisplayInfo.Density / 2.625);

        ColumnOne.Width = 120 * (mainDisplayInfo.Density / 2.625);
        ColumnTwo.Width = 120 * (mainDisplayInfo.Density / 2.625);
        ColumnThree.Width = 120 * (mainDisplayInfo.Density / 2.625);

    }
}

The effect on Phone H-dpi 4in Pie 9.0 H-dpi(480*800):

how to fix resolution in application?

1 Answers1