Dynamic font sizes

Question

How to make adaptive UI for the different screen sizes of devices on XF?

Now I use Grid.

I set up RowHeight and ColumnWidth by using '*'.

For example,

<Grid.RowDefinitions>
      <RowDefinition Height="2.3*"/>
      <RowDefinition Height="*"/>
      <RowDefinition Height="5*"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="1.2*"/>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="3.1*"/>
      <ColumnDefinition Width="1.2*"/>
    </Grid.ColumnDefinitions>

But I can't make font size to be adaptive.

XF has font size options(Small, Large, Medium and Micro).

For example

<Label
     HorizontalTextAlignment="Center"
      Grid.Column="3"
      Grid.Row="2"
      TextColor="White"
      FontSize="Small"/>

But this way is not so flexible as I need.

How can I make font size to be adaptive?

Are there any other ways to make adaptive UI for the different screen size of device?

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

How to make adaptive UI for the different screen sizes of devices on XF

To set fontSize for the control based on the screen size, try get the device info and detect the size to specify a value to the fontSize. You could create a custom control to perform the work.

Check the code:

   public class CustomLabel : Label  
   {  
       public CustomLabel()  
       {  
           //using Xamarin.Essentials api to get the info of the current device  
           var mainDisplayInfo = DeviceDisplay.MainDisplayInfo;  
           var width = mainDisplayInfo.Width;  
           var height = mainDisplayInfo.Height;  
     
           //specify a value to the fontSize based on the device's size  
           if (1000 < width && width < 1200)  
           {  
               this.FontSize = 20;  
           }  
       }  
   }  

Best Regards,

Jarvan Zhang

---

If the response is helpful, please click "Accept Answer" and upvote it.

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.