Xamarin.Forms
Aangepaste lettertypen in stijlen

Opmerkingen

Toegang krijgen tot aangepaste lettertypen in Syles

Xamarin.Forms bieden een geweldig mechanisme voor het stylen van uw platformoverschrijdende applicatie met wereldwijde stijlen.

In de mobiele wereld moet uw applicatie mooi zijn en zich onderscheiden van de andere applicaties. Een van deze tekens zijn aangepaste lettertypen die in de toepassing worden gebruikt.

Met krachtige ondersteuning van XAML Styling in Xamarin. Formulieren hebben zojuist een basisstijl gemaakt voor alle labels met uw eigen lettertypen.

Om aangepaste lettertypen in uw iOS- en Android-project op te nemen, volgt u de gids in Aangepaste lettertypen gebruiken op iOS en Android met Xamarin.Forms geschreven door Gerald.

Declareer stijl in de sectie App.xaml-bestandsbronnen. Dit maakt alle stijlen wereldwijd zichtbaar.

Uit het Gerald-bericht hierboven moeten we de StyleId-eigenschap gebruiken, maar het is geen bindende eigenschap, dus om het in Style Setter te gebruiken, moeten we hiervoor de koppelbare eigenschap maken:

public static class FontHelper
{
    public static readonly BindableProperty StyleIdProperty =
        BindableProperty.CreateAttached(
            propertyName: nameof(Label.StyleId),
            returnType: typeof(String),
            declaringType: typeof(FontHelper),
            defaultValue: default(String),
            propertyChanged: OnItemTappedChanged);

    public static String GetStyleId(BindableObject bindable) => (String)bindable.GetValue(StyleIdProperty);

    public static void SetStyleId(BindableObject bindable, String value) => bindable.SetValue(StyleIdProperty, value);


    public static void OnItemTappedChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var control = bindable as Element;
        if (control != null)
        {
            control.StyleId = GetStyleId(control);
        }
    }
}

Voeg vervolgens stijl toe aan App.xaml-bron:

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:h="clr-namespace:My.Helpers"
             x:Class="My.App">

  <Application.Resources>

    <ResourceDictionary>
        <Style x:Key="LabelStyle" TargetType="Label">
            <Setter Property="FontFamily" Value="Metric Bold" />
            <Setter Property="h:FontHelper.StyleId" Value="Metric-Bold" />
        </Style>
    </ResourceDictionary>

  </Application.Resources>

</Application>

Volgens de post hierboven moeten we Custom Renderer voor Label maken die erft van LabelRenderer op Android-platform.

internal class LabelExRenderer : LabelRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
    {
        base.OnElementChanged(e);
        if (!String.IsNullOrEmpty(e.NewElement?.StyleId))
        {
            var font = Typeface.CreateFromAsset(Forms.Context.ApplicationContext.Assets, e.NewElement.StyleId + ".ttf");
            Control.Typeface = font;
        }
    }
}

Voor iOS-platform zijn geen aangepaste renderers vereist.

Nu kunt u stijl verkrijgen in de opmaak van uw pagina:

Voor specifiek label

<Label Text="Some text" Style={StaticResource LabelStyle} />

Of pas stijl toe op alle labels op de pagina door Style Based on LabesStyle te maken

<!-- language: xaml -->

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="My.MainPage">

  <ContentPage.Resources>

    <ResourceDictionary>
        <Style TargetType="Label" BasedOn={StaticResource LabelStyle}>
        </Style>
    </ResourceDictionary>

  </ContentPage.Resources>

  <Label Text="Some text" />      

</ContentPage>