Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Scalling font size in xamarin forms

I am working with xamarin forms and facing problems with the layout. Now, with the fontsize.. I have two labels and one of them is Micro. I need that the other get the size of the Micro label / 2 as its size...I am reading about relative layout, but I don't know if it's the best way to do that...does someone have any idea to help me? This is my labels:

   <StackLayout Spacing="0">
        <Label x:Name="menu_lbl_promocoes" Text="0000" FontAttributes="Bold" TextColor="Black" HorizontalOptions="Center" Style="{Binding labelsfont}"/>
        <Label x:Name="menu_lbl_disponiveis" Text="Disponíveis" TextColor="Black" HorizontalOptions="Center" FontSize="Small" Style="{Binding labelsfont}"/>
   </StackLayout>

       </StackLayout> //yeah, there is another stacklayout 

       <Label Text="Promoções" FontSize="Micro" TextColor="White" HorizontalOptions="Center" Style="{Binding labelsfont}"/>

I need the second label get the half size of the third (which has a micro size)...

like image 430
Joyce de Lanna Avatar asked Aug 24 '17 14:08

Joyce de Lanna


People also ask

How do I change font size in xamarin form?

The Xamarin. Forms framework offers two options for specifying the font size of text to be displayed, e.g. within a Label : Either as fixed values (e.g. FontSize="14" ) or by using the common keywords specified in the Xamarin. Forms. NamedSize enumeration (e.g. FontSize="Small" .


2 Answers

Simply extend Label to have two bindable properties - FontSizeFactor and NamedFontSize - and have them calculate the font size for you:

public class MyLabel : Label
{
    public static readonly BindableProperty FontSizeFactorProperty =
        BindableProperty.Create(
        "FontSizeFactor", typeof(double), typeof(MyLabel),
        defaultValue: 1.0, propertyChanged: OnFontSizeFactorChanged);

    public double FontSizeFactor
    {
        get { return (double)GetValue(FontSizeFactorProperty); }
        set { SetValue(FontSizeFactorProperty, value); }
    }

    private static void OnFontSizeFactorChanged(BindableObject bindable, object oldValue, object newValue)
    {
        ((MyLabel)bindable).OnFontSizeChangedImpl();
    }

    public static readonly BindableProperty NamedFontSizeProperty =
        BindableProperty.Create(
        "NamedFontSize", typeof(NamedSize), typeof(MyLabel),
        defaultValue: NamedSize.Small, propertyChanged: OnNamedFontSizeChanged);

    public NamedSize NamedFontSize
    {
        get { return (NamedSize)GetValue(NamedFontSizeProperty); }
        set { SetValue(NamedFontSizeProperty, value); }
    }

    private static void OnNamedFontSizeChanged(BindableObject bindable, object oldValue, object newValue)
    {
        ((MyLabel)bindable).OnFontSizeChangedImpl();
    }

    protected virtual void OnFontSizeChangedImpl()
    {
        if (this.FontSizeFactor != 1)
            this.FontSize = (this.FontSizeFactor * Device.GetNamedSize(NamedFontSize, typeof(Label)));
    }
}

Sample Usage:

    <Label FontSize="Large" Text="Large Size" />
    <local:MyLabel NamedFontSize="Large" FontSizeFactor="0.9" Text="90% Large Size" />

    <Label FontSize="Medium" Text="Medium Size" />
    <local:MyLabel NamedFontSize="Medium" FontSizeFactor="0.75" Text="75% Medium Size" />

    <Label FontSize="Micro" Text="Micro Size" />
    <local:MyLabel NamedFontSize="Micro" FontSizeFactor="0.5" Text="50% Micro Size" />

ios screenshot

android screenshot

like image 67
Sharada Gururaj Avatar answered Oct 24 '22 09:10

Sharada Gururaj


So ima give an example on how to do it: We got 2 labels. First one with micro

 <Label  x:Name="statuslabel" FontSize="Micro" Text="Filter status:" VerticalOptions="Center" WidthRequest="100" />

Second one without size

Than in the codein the constructur, at the last line you write:

    typelabel.FontSize = statuslabel.FontSize / 2;

the result: result

like image 3
Jordy Dieltjens Avatar answered Oct 24 '22 09:10

Jordy Dieltjens