George M Ceaser Jr
George M Ceaser Jr

Reputation: 1781

Xamarin Forms FontSize by Platform

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.

iOS emulator

Windows Mobile Emulator

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?

Upvotes: 1

Views: 1927

Answers (1)

Elias Nawfal
Elias Nawfal

Reputation: 231

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

Upvotes: 2

Related Questions