Xamarin Forms FontSize by Platform

Question

There is a known issue with UWP Xamarin Apps in that the size that fonts render in for Windows Mobile (not sure about Desktop Windows 10) are MUCH larger than they render on the other two platforms iOS and Android. The fix I have found a for this is to put a numeric font size with a decimal point in it (for example 24.1 for Large font size) in UWP apps. This works great. What I would like not is to define a static resource in my App.xaml that will work for all platforms. What I tried, that obviously does not work, is the following:

        <OnPlatform x:Key="CustLarge" x:TypeArguments="x:Double">
            <On Platform="iOS|Android">Large</On>
            <On Platform="UWP">24.1</On>
        </OnPlatform>

The theory is that in my XAML I would simply code all my large font sizes as "CustLarge" like this:

FontSize = "{StaticResource CustLarge}" />

Any ideas how I can accomplish this without doing on OnPlatform for every FontSize in my app? Any help would be appreciated.

UPDATE: Below are screen shots of what I am talking about. The iOS emulator was for the iPhone 6 4.7" wide. The Windows 10 emulator was a the 10.0.15254.9 5" phone.

You can see the Map All text is way bigger than it should be. (I am doing a relative comparison to the text in the segment control to the right of the stand alone buttons.) In both cases the fontsize is set to MICRO.

So back to my question - does anyone know how to do this?

First off, you should use , (comma) separator instead of |, when defining more than one platform for a resource (as per the On code and the ListStringTypeConverter) — Mikolaj Kieres
I have tested with Xamarin .NetStandard and it woks well. Do you use Xamarin PCL? — Nico Zhu - MSFT
Yes this is a PCL using Xamarin Forms and this is a documented issue with UWP app regarding the font size. — George M Ceaser Jr
Regarding the use of comma, I have use the | (bar separator) per Xamarin XAML document. If their documentation regarding onplatform in XAML has changed and you could please provide me a link to the updated documentation, I would appreciate it, — George M Ceaser Jr
@GeorgeMCeaserJr I have tested with Xamarin.Forms v2.4.0.91020. it works well please try to update to the same version (contain the nuget package that installed in uwp platform). — Nico Zhu - MSFT

Elias Nawfal Elias Nawfal · Accepted Answer · 2018-09-12T12:20:05

I was able to find a workaround by creating a custom ResourceDictionnary, and adding FontSizes in the constructor.

public class SResourceDictionnary : ResourceDictionary
{
    public SResourceDictionnary()
    {
        Add("Micro", new OnPlatform<double>
        {
            Default = Device.GetNamedSize(NamedSize.Micro, typeof(Label)),
            Platforms = { new On
                {
                    Value = 12d,
                    Platform = new List<string>{"UWP"}
                }
            }
        });
        Add("Small", new OnPlatform<double>
        {
            Default = Device.GetNamedSize(NamedSize.Small, typeof(Label)),
            Platforms = { new On
                {
                    Value = 14d,
                    Platform = new List<string>{"UWP"}
                }
            }
        });
        Add("Medium", new OnPlatform<double>
        {
            Default = Device.GetNamedSize(NamedSize.Medium, typeof(Label)),
            Platforms = { new On
                {
                    Value = 18d,
                    Platform = new List<string>{"UWP"}
                }
            }
        });
        Add("Large", new OnPlatform<double>
        {
            Default = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
            Platforms = { new On
                {
                    Value = 20d,
                    Platform = new List<string>{"UWP"}
                }
            }
        });
    }

Then I merged the dictionary in my App.xaml like this

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <helpers:SResourceDictionnary></helpers:SResourceDictionnary>
        </ResourceDictionary.MergedDictionaries>
        <Style TargetType="Label">
            <Setter Property="FontSize" Value="{StaticResource Small}" ></Setter>
        </Style>
    </ResourceDictionary>
</Application.Resources>

It allowed me to use FontSize as StaticResource. The only disadvantage is that you lose intellisense in Xaml

Xamarin Forms FontSize by Platform

1 Answers