Net maui how to scale labels and buttons fontsize according to resolution on windows platform?

Question

Net maui how to scale labels and buttons fontsize according to resolution or width of page on windows platform? like percentage ? Also is it possible detect screen size 4 K %100 and %150 for text fonts on windows or MacCatalyst ? Thanks

        <OnPlatform x:Key="XXXSFontSize" x:TypeArguments="x:Double">

            <On Platform="Android" Value="9"/>

            <On Platform="iOS" Value="9"/>

            <On Platform="MacCatalyst" Value="10"/>

            <On Platform="WinUI" Value="10"/>

        </OnPlatform>

        <OnPlatform x:Key="XXSFontSize" x:TypeArguments="x:Double">

            <On Platform="Android" Value="11"/>

            <On Platform="iOS" Value="11"/>

            <On Platform="MacCatalyst" Value="12"/>

            <On Platform="WinUI" Value="12"/>

        </OnPlatform>

        <OnPlatform x:Key="XSFontSize" x:TypeArguments="x:Double">

            <On Platform="Android" Value="12"/>

            <On Platform="iOS" Value="12"/>

            <On Platform="MacCatalyst" Value="14"/>

            <On Platform="WinUI" Value="14"/>

        </OnPlatform>

        <OnPlatform x:Key="SmallFontSize" x:TypeArguments="x:Double">

            <On Platform="Android" Value="13"/>

            <On Platform="iOS" Value="13"/>

            <On Platform="MacCatalyst" Value="15"/>

            <On Platform="WinUI" Value="15"/>

        </OnPlatform>

        <OnPlatform x:Key="BaseFontSize" x:TypeArguments="x:Double">

            <On Platform="Android" Value="14"/>

            <On Platform="iOS" Value="14"/>

            <On Platform="MacCatalyst" Value="16"/>

            <On Platform="WinUI" Value="16"/>

        </OnPlatform>

        <OnPlatform x:Key="MediumFontSize" x:TypeArguments="x:Double">

            <On Platform="Android" Value="15"/>

            <On Platform="iOS" Value="15"/>

            <On Platform="MacCatalyst" Value="17"/>

            <On Platform="WinUI" Value="17"/>

        </OnPlatform>

        <OnPlatform x:Key="LargeFontSize" x:TypeArguments="x:Double">

            <On Platform="Android" Value="16"/>

            <On Platform="iOS" Value="16"/>

            <On Platform="MacCatalyst" Value="18"/>

            <On Platform="WinUI" Value="18"/>

        </OnPlatform>

        <OnPlatform x:Key="XLargeFontSize" x:TypeArguments="x:Double">

            <On Platform="Android" Value="20"/>

            <On Platform="iOS" Value="20"/>

            <On Platform="MacCatalyst" Value="20"/>

            <On Platform="WinUI" Value="20"/>

        </OnPlatform>

        <OnPlatform x:Key="XXLargeFontSize" x:TypeArguments="x:Double">

            <On Platform="Android" Value="24"/>

            <On Platform="iOS" Value="24"/>

            <On Platform="MacCatalyst" Value="26"/>

            <On Platform="WinUI" Value="26"/>

        </OnPlatform>

        <OnPlatform x:Key="XXXLargeFontSize" x:TypeArguments="x:Double">

            <On Platform="Android" Value="30"/>

            <On Platform="iOS" Value="30"/>

            <On Platform="MacCatalyst" Value="34"/>

            <On Platform="WinUI" Value="34"/>

        </OnPlatform>

        <OnPlatform x:Key="XXXXLargeFontSize" x:TypeArguments="x:Double">

            <On Platform="Android" Value="34"/>

            <On Platform="iOS" Value="34"/>

            <On Platform="MacCatalyst" Value="38"/>

            <On Platform="WinUI" Value="38"/>

        </OnPlatform>

        <Style TargetType="Label">

            <Setter Property="TextColor" Value="{DynamicResource MainTextColor}" />

            <Setter Property="FontFamily" Value="AppFontFamily" />

            <Setter Property="FontSize" Value="{StaticResource BaseFontSize}" />

            <Setter Property="VerticalTextAlignment" Value="Center" />

        </Style>

        <Style TargetType="Button">

            <Setter Property="TextColor" Value="{StaticResource White}" />

            <Setter Property="FontFamily" Value="AppFontFamily" />

            <Setter Property="BackgroundColor" Value="{StaticResource Gray400}" />

            <Setter Property="Padding" Value="15,10" />

            <Setter Property="HeightRequest" Value="42" />

            <Setter Property="FontSize" Value="{StaticResource BaseFontSize}" />

            <Setter Property="CornerRadius" Value="3" />

            <Setter Property="HorizontalOptions" Value="FillAndExpand" />

            <Setter Property="VerticalOptions" Value="Center" />

        </Style>

Answer 1

Hello,

how to scale labels and buttons fontsize according to resolution or width of page on windows platform? like percentage?

Maui does not have scale font size like percentage. You can open a feature request in the MAUI GitHub repo.

You can set FontSize in c# (code behind), based on screen size like following code.

protected override void OnAppearing()
    {
        base.OnAppearing();
 
#if WINDOWS || MACCATALYST
      
        var res = DeviceDisplay.Current.MainDisplayInfo.Width;
        if (res > 1920) {
            myLabel.FontSize = 60f;
        }
#endif
    }

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.