CODEWITHSUNDEEP
xamarin.formsxamarin.androidxamarin.ios
Adam Mrozek
Adam Mrozek

Reputation: 1490

How to scale font and container's height in Xamarin.Forms

I have problem with properly scaling height of containers and font size in Xamarin.Forms.

1) The first problem is that I need to set static height in one of my containers but it looks different on different devices. I don't know exactly but suppose that problem can be caused by screen density. Should I scale height of my container somehow or Xamarin.Forms should handle this for me?

2) The second problem is that I need to set proper cross-platform font. Is there a way to Xamarin.Forms handle it for me or need I use Device.RuntimePlatform property to set this? Also as said here: https://learn.microsoft.com/pl-pl/xamarin/xamarin-forms/user-interface/text/fonts - named font sizes are not acceptable solution. For iPod I need to use micro, but on android the text is barely visible.

On emulator there are many weird things happen, topbar is way out of scale and entire look is zoomed. Is this my fault or maybe Xamarin is not such universal platform I thought?

Here is the code of my page:

<StackLayout>
    <SearchBar 
        VerticalOptions="Start"
        TextChanged="SearchBar_OnTextChanged"
        PlaceholderColor="#C0C0C0"></SearchBar>

    <ListView 
        BackgroundColor="#f2f2f2"
        VerticalOptions="Center"
        ItemTapped="SelectProcedure"
        CachingStrategy="RecycleElement">

        <ListView.ItemTemplate>
            <DataTemplate>
                <TextCell 
                    Text="{Binding Name}" 
                    TextColor="Black"/>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

    <StackLayout 
        BackgroundColor="White"
        HeightRequest="80"
        HorizontalOptions="FillAndExpand"
        VerticalOptions="EndAndExpand">

        <Grid
            Padding="10,5,10,5"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand">

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Label
                Grid.Column="0"
                Grid.Row="0"
                VerticalTextAlignment="Center"
                VerticalOptions="Center"
                HorizontalTextAlignment="Center"
                HorizontalOptions="Center"
                TextColor="Black"/>

            <telerikInput:RadButton 
                Grid.Column="1"
                Grid.Row="0"
                Padding="5,0,5,0"
                ImageSource="plus.png"/>

        </Grid>
    </StackLayout>
</StackLayout>

And here are the screenshots for two devices I have and emulator:

Android 8.1

enter image description here

iPod touch 6

enter image description here

Android 8.1 (emulator)

enter image description here

Upvotes: 0

Views: 2011

Answers (1)

Lucas Zhang
Lucas Zhang

Reputation: 18861

Solution: You can set the HeightRequest grid as the percentage of screen height (for example 10%) .

<StackLayout 
        BackgroundColor="White"
        HeightRequest="{Binding stackHeight}"
        HorizontalOptions="FillAndExpand"
        VerticalOptions="EndAndExpand">

in Share Project App.xaml.cs

public static double ScreenWidth;
public static double ScreenHeight;

in Android MainActivity.cs

protected override void OnCreate(Bundle savedInstanceState)
{
   TabLayoutResource = Resource.Layout.Tabbar;
   ToolbarResource = Resource.Layout.Toolbar;

   base.OnCreate(savedInstanceState);

   Xamarin.Essentials.Platform.Init(this, savedInstanceState);
            
   global::Xamarin.Forms.Forms.SetFlags("Shell_Experimental", "Visual_Experimental", "CollectionView_Experimental");
   global::Xamarin.Forms.Forms.Init(this, savedInstanceState);

   App.ScreenWidth = Resources.DisplayMetrics.WidthPixels/Resources.DisplayMetrics.Density; 
   App.ScreenHeight =Resources.DisplayMetrics.HeightPixels/Resources.DisplayMetrics.Density; 

   LoadApplication(new App());
}

in iOS

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    //...
    App.ScreenWidth = (int)UIScreen.MainScreen.Bounds.Width;
    App.ScreenHeight = (int)UIScreen.MainScreen.Bounds.Height;
    //...
}

in Code Behind or ViewModel

public double stackHeight { get; private set; }

//...

if(Device.RuntimePlatform=="iOS")
{
  stackHeight= App.ScreenHeight/5.0;
}
else
{
  stackHeight= App.ScreenHeight/20.0;
}

And for Custom Font in Xamarin.Forms , you can check https://xamarinhelp.com/custom-fonts-xamarin-forms/

Upvotes: 1

Related Questions