how to scale up/down elements of xamarin.forms on screen resolution/dpi change?

Question

I'm trying to make a page with lists of information, textboxes, checkboxes etc. While it looks good on one resolution, when i increase the resolution or the dpi, everything including font size and text boxes just becomes huge and overlapping each other. Any recommendations to make my app more responsive?

E.g. Lists of information:

            <Grid
                Margin="10,0,0,0"
                ColumnSpacing="0"
                HorizontalOptions="End"
                VerticalOptions="FillAndExpand"
                ColumnDefinitions="*,auto,*,*,*,*,*,*,*,*"
                RowDefinitions="25,25,25,25,25,25,25,50,50,50">
                <StackLayout Grid.Column="0" HorizontalOptions="Start">
                    <Label Text="SYMPTOM"/>
                    <Label Text="CONTACT NAME"/>
                    <Label Text="CONTACT NO"/>
                    <Label Text="MACHINES NO" />
                    <Label Text="SERIAL NO"/>
                    <Label Text="CUSTOMER NO"/>
                    <Label Text="ADD ADDRESS"/>
                    <Label Text="NOTE"/>
                    <Label Text="RECEIVED BY" Margin="0,25,0,15"/>
                    <Label Text="CONTACT NO" Margin="0,20,0,15"/>
                </StackLayout>
                <StackLayout Grid.Column="2" Grid.ColumnSpan="2" HorizontalOptions="StartAndExpand" Margin="20,0,0,0">
                    <Label Text="HOSE LEAKING"/>
                    <Label Text="JORDAN"/>
                    <Label Text="0163218547"/>
                    <Label Text="MACHINES AB"/>
                    <Label Text="SN001244323-01"/>
                    <Label Text="P0200045"/>
                    <Label Text="ADD ADDRESS"/>
                    <Label Text="THIS IS JUST FOR TESTING"/>
                </StackLayout>
          </Grid>

Textbox:

<StackLayout
                Grid.Row="1"
                Grid.Column="4"
                Grid.ColumnSpan="3"
                Orientation="Horizontal"
                HorizontalOptions="StartAndExpand"
                VerticalOptions="Center">
                    <StackLayout Margin="0,8,0,0">
                        <CheckBox IsChecked="False" Color="Green"/>
                    </StackLayout>
                    <StackLayout
                    VerticalOptions="Center"
                    HorizontalOptions="Start"
                    WidthRequest="100"
                    Margin="0,15,0,0">
                        <Label Text="MOBILE SERVICE" VerticalOptions="Center" FontSize="12"/>
                    </StackLayout>
                    <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="Center">
                        <Frame
                        x:Name="MobileFrame"
                        BackgroundColor="#111111"
                        BorderColor="#434343"
                        HasShadow="False"
                        HeightRequest="7">

                            <OnPlatform x:TypeArguments="View">
                                <OnPlatform.Android>
                                    <customstyle:EntryBorderless
                                    x:Name="Mobile_Service"
                                    Margin="-6,-50,15,-50"
                                    HorizontalTextAlignment="Start"
                                    WidthRequest="80"
                                    HeightRequest="120"
                                    Text="2"
                                    IsReadOnly="True"
                                    TextColor="#FFFFFF" />
                                </OnPlatform.Android>
                            </OnPlatform>
                        </Frame>
                    </StackLayout>
                </StackLayout>

score 0 · Answer 1 · answered Jul 15 '21 at 07:23

You could set the elements' size according to the screensize via Converter.

You could use the Xamarin.Essentials to get the screen size.

// Get Metrics
var mainDisplayInfo = DeviceDisplay.MainDisplayInfo;

// Width (in pixels)
var width = mainDisplayInfo.Width;

// Height (in pixels)
var height = mainDisplayInfo.Height;

And then use the Converter to set the specific value.

public class MyConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (double)value / 3.0;
         
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

For the binding Value of Converters, please check the link below: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/data-binding/converters

For more code, you could check the sample i done before. Resizing frame and controls according to device size .Suggestions?

how to scale up/down elements of xamarin.forms on screen resolution/dpi change?

1 Answers1