CODEWITHSUNDEEP
xamluser-interfacexamarinxamarin.forms
Joe Johnston
Joe Johnston

Reputation: 2936

Scale a UI relative to screen

I am creating a UI in xamarin forms and I think I have missed a foundational premise in creating the phone UI.

What I would like to do is scale the UI to the screen while maintaining the proportions. Thinking this would allow me to display my UI on high res to moderate res phones. Currently I am abusing hard coded margins and of course getting less than acceptable results when I change to a phone of higher or lower resolutions. I have tried stack and grid layouts. The horizontal issue is muted with horizontalOptions but the vertical is terrible.

I have to support iOS 6s and up. The Android support envelope is 'developing'. Suffice to say the screen sizes and densities will vary.

I think my initial question might lead me down a harder road than needed so I wanted to ask how does the community deal with this before I apply custom code to every element to size them to some fraction of the screen dimensions. That just seems to fail the sniff test. #CodeSmells

Perfect world would be for a layout to fill the entire space and scale all elements including font size proportionately. Is that a thing?

I've not added any code here because I am really looking for a strategy or a pattern.

Upvotes: 0

Views: 194

Answers (1)

Nick Kovalsky
Nick Kovalsky

Reputation: 6462

Create a static class with all your sizes to use inside the app. Something like: 

public static class UiSettings
{
    public static double Scale = 1.0;
    public static void Init(double scale = 1.0)
    {
    Scale = scale;
    //can do more here, override props etc

    }

    public static double StandartTextSize => 12.0 * Scale;
    public static double StandartButtonMargin => new Thickness(2.0* Scale,2.0* Scale,2.0* Scale,2.0* Scale);

}

Now at startup you can call depending on your needs/detected resolution :

UiSettings.Init(1.2); //set scale etc

Upvotes: 1

Related Questions