Tipi di carattere in Xamarin.Forms

Download Sample Scaricare l'esempio

Per impostazione predefinita, Xamarin.Forms usa un tipo di carattere di sistema definito da ogni piattaforma. Tuttavia, i controlli che visualizzano testo definiscono le proprietà che è possibile usare per modificare questo tipo di carattere:

  • FontAttributes, di tipo FontAttributes, che è un'enumerazione con tre membri: None, Bolde Italic. Il valore predefinito di questa proprietà è None.
  • FontSize, di tipo double.
  • FontFamily, di tipo string.

Queste proprietà sono supportate da BindableProperty oggetti, il che significa che possono essere destinazioni di data binding e stili.

Impostare gli attributi del tipo di carattere

I controlli che visualizzano testo possono impostare la FontAttributes proprietà per specificare gli attributi del tipo di carattere:

<Label Text="Italics"
       FontAttributes="Italic" />
<Label Text="Bold and italics"
       FontAttributes="Bold, Italic" />

Il codice C# equivalente è il seguente:

Label label1 = new Label
{
    Text = "Italics",
    FontAttributes = FontAttributes.Italic
};

Label label2 = new Label
{
    Text = "Bold and italics",
    FontAttributes = FontAttributes.Bold | FontAttributes.Italic
};    

Impostare le dimensioni del carattere

I controlli che visualizzano testo possono impostare la FontSize proprietà per specificare le dimensioni del carattere. La FontSize proprietà può essere impostata direttamente su un double valore o da un NamedSize valore di enumerazione:

<Label Text="Font size 24"
       FontSize="24" />
<Label Text="Large font size"
       FontSize="Large" />

Il codice C# equivalente è il seguente:

Label label1 = new Label
{
    Text = "Font size 24",
    FontSize = 24
};

Label label2 = new Label
{
    Text = "Large font size",
    FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))
};

In alternativa, il Device.GetNamedSize metodo ha un override che specifica il secondo argomento come Element:

Label myLabel = new Label
{
    Text = "Large font size",
};
myLabel.FontSize = Device.GetNamedSize(NamedSize.Large, myLabel);

Nota

Il FontSize valore, se specificato come double, viene misurato in unità indipendenti dal dispositivo. Per altre informazioni, vedere Unità di misura.

Per altre informazioni sulle dimensioni dei caratteri denominate, vedere Informazioni sulle dimensioni dei caratteri denominate.

Impostare la famiglia di caratteri

I controlli che visualizzano testo possono impostare la FontFamily proprietà su un nome di famiglia di caratteri, ad esempio "Times Roman". Tuttavia, questo funzionerà solo se la famiglia di caratteri è supportata nella piattaforma specifica.

Esistono diverse tecniche che possono essere usate per tentare di derivare i tipi di carattere disponibili in una piattaforma. Tuttavia, la presenza di un file di carattere TTF (True Type Format) non implica necessariamente una famiglia di caratteri e le funzioni TTFS sono spesso incluse che non sono destinate all'uso nelle applicazioni. Inoltre, i tipi di carattere installati in una piattaforma possono cambiare con la versione della piattaforma. Pertanto, l'approccio più affidabile per specificare una famiglia di caratteri consiste nell'usare un tipo di carattere personalizzato.

I tipi di carattere personalizzati possono essere aggiunti al Xamarin.Forms progetto condiviso e utilizzati dai progetti di piattaforma senza alcun lavoro aggiuntivo. A tale scopo, seguire questa procedura:

  1. Aggiungere il tipo di carattere al Xamarin.Forms progetto condiviso come risorsa incorporata (Azione di compilazione: EmbeddedResource).
  2. Registrare il file del tipo di carattere con l'assembly, in un file come AssemblyInfo.cs, usando l'attributo ExportFont . È anche possibile specificare un alias facoltativo.

L'esempio seguente mostra il tipo di carattere Lobster-Regular registrato con l'assembly, insieme a un alias:

using Xamarin.Forms;

[assembly: ExportFont("Lobster-Regular.ttf", Alias = "Lobster")]

Nota

Il tipo di carattere può trovarsi in qualsiasi cartella del progetto condiviso, senza dover specificare il nome della cartella durante la registrazione del tipo di carattere con l'assembly.

In Windows il nome del file di carattere e il nome del tipo di carattere possono essere diversi. Per individuare il nome del tipo di carattere in Windows, fare clic con il pulsante destro del mouse sul file .ttf e scegliere Anteprima. Il nome del tipo di carattere può quindi essere determinato dalla finestra di anteprima.

Il tipo di carattere può quindi essere utilizzato in ogni piattaforma facendo riferimento al nome, senza l'estensione di file:

<!-- Use font name -->
<Label Text="Hello Xamarin.Forms"
       FontFamily="Lobster-Regular" />

In alternativa, può essere usato in ogni piattaforma facendo riferimento al relativo alias:

<!-- Use font alias -->
<Label Text="Hello Xamarin.Forms"
       FontFamily="Lobster" />

Il codice C# equivalente è il seguente:

// Use font name
Label label1 = new Label
{
    Text = "Hello Xamarin.Forms!",
    FontFamily = "Lobster-Regular"
};

// Use font alias
Label label2 = new Label
{
    Text = "Hello Xamarin.Forms!",
    FontFamily = "Lobster"
};

Gli screenshot seguenti mostrano il tipo di carattere personalizzato:

Custom font on iOS and Android

Importante

Per le build di rilascio in Windows, verificare che l'assembly contenente il tipo di carattere personalizzato venga passato come argomento nella chiamata al Forms.Init metodo. Per ulteriori informazioni, vedere Risoluzione dei problemi.

Impostare le proprietà del tipo di carattere per ogni piattaforma

Le OnPlatform classi e On possono essere usate in XAML per impostare le proprietà del tipo di carattere per ogni piattaforma. L'esempio seguente imposta diverse famiglie di caratteri e dimensioni in ogni piattaforma:

<Label Text="Different font properties on different platforms"
       FontSize="{OnPlatform iOS=20, Android=Medium, UWP=24}">
    <Label.FontFamily>
        <OnPlatform x:TypeArguments="x:String">
            <On Platform="iOS" Value="MarkerFelt-Thin" />
            <On Platform="Android" Value="Lobster-Regular" />
            <On Platform="UWP" Value="ArimaMadurai-Black" />
        </OnPlatform>
    </Label.FontFamily>
</Label>

La Device.RuntimePlatform proprietà può essere utilizzata nel codice per impostare le proprietà del tipo di carattere per ogni piattaforma

Label label = new Label
{
    Text = "Different font properties on different platforms"
};

label.FontSize = Device.RuntimePlatform == Device.iOS ? 20 :
    Device.RuntimePlatform == Device.Android ? Device.GetNamedSize(NamedSize.Medium, label) : 24;
label.FontFamily = Device.RuntimePlatform == Device.iOS ? "MarkerFelt-Thin" :
   Device.RuntimePlatform == Device.Android ? "Lobster-Regular" : "ArimaMadurai-Black";

Per altre informazioni sulla fornitura di valori specifici della piattaforma, vedere Fornire valori specifici della piattaforma. Per informazioni sull'estensione OnPlatform di markup, vedere Estensione di markup OnPlatform.

Informazioni sulle dimensioni dei caratteri denominate

Xamarin.Forms definisce i campi nell'enumerazione NamedSize che rappresentano dimensioni specifiche del carattere. La tabella seguente mostra i NamedSize membri e le relative dimensioni predefinite in iOS, Android e la piattaforma UWP (Universal Windows Platform) (UWP):

Membro iOS Android UWP
Default 17 14 14
Micro 12 10 15.667
Small 14 14 18.667
Medium 17 17 22.667
Large 22 22 32
Body 17 16 14
Header 17 14 46
Title 28 24 24
Subtitle 22 16 20
Caption 12 12 12

I valori delle dimensioni vengono misurati in unità indipendenti dal dispositivo. Per altre informazioni, vedere Unità di misura.

Nota

In iOS e Android, le dimensioni dei caratteri denominate verranno ridimensionate automaticamente in base alle opzioni di accessibilità del sistema operativo. Questo comportamento può essere disabilitato in iOS con una piattaforma specifica della piattaforma. Per altre informazioni, vedere Ridimensionamento dell'accessibilità per le dimensioni dei tipi di carattere denominate in iOS.

Visualizzare le icone dei tipi di carattere

Le icone dei tipi di carattere possono essere visualizzate dalle Xamarin.Forms applicazioni specificando i dati dell'icona del carattere in un FontImageSource oggetto . Questa classe, che deriva dalla ImageSource classe , ha le proprietà seguenti:

  • Glyph: valore carattere Unicode dell'icona del carattere, specificato come .string
  • Size : valore double che indica le dimensioni, in unità indipendenti dal dispositivo, dell'icona del tipo di carattere di cui è stato eseguito il rendering. Il valore predefinito è 30. Inoltre, questa proprietà può essere impostata su una dimensione del carattere denominata.
  • FontFamily : oggetto string che rappresenta la famiglia di caratteri a cui appartiene l'icona del carattere.
  • Color : valore facoltativo Color da utilizzare durante la visualizzazione dell'icona del carattere.

I dati del tipo di carattere possono essere visualizzati da qualsiasi visualizzazione in grado di visualizzare un oggetto ImageSource. Questo approccio consente la visualizzazione di icone dei tipi di carattere, ad esempio emoji, da più visualizzazioni, anziché limitare la visualizzazione dell'icona del carattere a una singola visualizzazione di presentazione del testo, ad esempio .Label

Importante

Le icone dei tipi di carattere possono essere specificate solo dalla relativa rappresentazione di caratteri Unicode.

L'esempio XAML seguente include un'icona a forma di carattere singola visualizzata da una Image visualizzazione:

<Image BackgroundColor="#D1D1D1">
    <Image.Source>
        <FontImageSource Glyph="&#xf30c;"
                         FontFamily="{OnPlatform iOS=Ionicons, Android=ionicons.ttf#}"
                         Size="44" />
    </Image.Source>
</Image>

Questo codice visualizza un'icona XBox, dalla famiglia di tipi dicaratterei, in una Image visualizzazione. Si noti che mentre il carattere Unicode per questa icona è \uf30c, deve essere preceduto da un carattere di escape in XAML e quindi diventa &#xf30c;. Il codice C# equivalente è il seguente:

Image image = new Image { BackgroundColor = Color.FromHex("#D1D1D1") };
image.Source = new FontImageSource
{
    Glyph = "\uf30c",
    FontFamily = Device.RuntimePlatform == Device.iOS ? "Ionicons" : "ionicons.ttf#",
    Size = 44
};

Gli screenshot seguenti, nell'esempio Layout associabili , mostrano diverse icone dei tipi di carattere visualizzate da un layout associabile:

Screenshot of font icons being displayed, on iOS and Android