Resolution Depdendent FontSize for Xamarin.Forms

Question

So I am developing a Xamarin.Forms application for Tablets, and now I need it to also run on phones - Great, Xamarin.Forms should handle all that (or so I thought).

I ran the application on my phone but it didnt scale down the Font (or any sizes for that matter, but I'll start with font)

I created an extension method like so:

[ContentProperty("FontSize")]
public class FontExtension : IMarkupExtension
{
    public string FontSize { get; set; }

    public object ProvideValue(IServiceProvider serviceProvider)
    {
        double fontSize;

        if (FontSize == null)
            throw new Exception("No Font Size provided");

        if (!double.TryParse(FontSize, out fontSize))
            throw new Exception("Font Size Provided is not a double");

        return App.Scaling * fontSize;
    }
}

and I use this in my application like FontSize={ns:Font 18} and this will downscale my application based on the App.Scaling property. This property is just set to 0.8 if it is a Phone.

I also found two links that provided a way in Xamarin.Android but I am doing a Xamarin.Forms application so didnt apply. (link1,link2)

Is it possible to scale the font down based on the devices Resolution rather than Idiom?

Agat · Answer 1 · 2018-02-20T17:23:27.587

There are two additional options you can use.

OnIdiom-dependent values.

I understand that you want to have full control over the Sizes, but from my experience it not quite handy from development process. Especially, defining all the text sizes in place every time. Much common approach is using Style in Resource Dictionary. The style definitions might take quite lots of space, but then it will be much faster to apply them to the controls.

So, you can do something like this:

<ResourceDictionary>
    <Application.Resources>

        <OnIdiom x:TypeArguments="x:Double" x:Key="MySize" Phone="15" Tablet="24"/>

        <Style TargetType="Label" x:Key="MyCustomStyle">
            <Setter Property="FontSize" Value="{StaticResource MySize}"></Setter>
        </Style>

    </ResourceDictionary>
</Application.Resources>

and

 <Label Style="{StaticResource MyCustomStyle}" Text="My Text"/>

Use DynamicResource as it's described here.

<Style x:Key="myDerivedCustomStyle" TargetType="Label" BaseResourceKey="myCustomStyle">
      ...
</Style>

and calculating all the values you need in C# code:

    var myCustomStyle = new Style (typeof(Label)) {
        // calculating and defining required FontSize here
    };
    Resources = new ResourceDictionary();
    Resources.Add ("myCustomStyle", myCustomStyle);

score 0 · Answer 2 · answered Mar 30 '17 at 15:56

0

Xamarin Forms provides some named sizes - small, medium, large etc. that may give you what you want. These will end up as different sizes depending on your platform.

https://developer.xamarin.com/guides/xamarin-forms/user-interface/text/fonts/#Font_Size

answered Mar 30 '17 at 15:56

JimBobBennett

2,149
14
11

I have looked at these named sizes, but they didnt give me enough control of the sizes. For example Larger = 18 on a tablet. It wasn't large enough. I needed it to be more flexible – JKennedy Mar 30 '17 at 15:59
The other way I've done it is using resources - so set a resource for the font size for a default device and use that, then inside your droid and iOS apps override the value in the style depending on the device width/height – JimBobBennett Mar 30 '17 at 20:45
@JimBobBennett Can you please provide method you applied for this issue? – Hetal Apr 26 '18 at 20:32

Resolution Depdendent FontSize for Xamarin.Forms

2 Answers2