Czcionki w platformie .NET MAUI

Domyślnie aplikacje interfejsu użytkownika aplikacji wieloplatformowej platformy .NET (.NET MAUI) używają czcionki Open Sans na każdej platformie. Tę wartość domyślną można jednak zmienić, a dodatkowe czcionki można zarejestrować do użycia w aplikacji.

Wszystkie kontrolki, które wyświetlają tekst, definiują właściwości, które można ustawić w celu zmiany wyglądu czcionki:

• FontFamily, typu string.
• FontAttributes, typu FontAttributes, który jest wyliczeniem z trzema elementami: None, Bold i Italic. Wartość domyślna tej właściwości to None.
• FontSize, typu double.
• FontAutoScalingEnabled, typu bool, który określa, czy interfejs użytkownika aplikacji odzwierciedla preferencje skalowania tekstu ustawione w systemie operacyjnym. Wartość domyślna tej właściwości to true.

Te właściwości są wspierane przez obiekty BindableProperty, co oznacza, że mogą być obiektami docelowymi powiązań danych i stylizowanymi.

Wszystkie kontrolki, które wyświetlają tekst automatycznie używają skalowania czcionek, co oznacza, że interfejs użytkownika aplikacji odzwierciedla preferencje skalowania tekstu ustawione w systemie operacyjnym.

Rejestrowanie czcionek

Czcionki typu TrueType (TTF) i OpenType (OTF) można dodawać do aplikacji i odwoływać się do nich przez nazwę plikową lub alias, przy czym rejestracja odbywa się w metodzie CreateMauiApp w klasie MauiProgram. Jest to realizowane przez wywołanie ConfigureFonts metody w MauiAppBuilder obiekcie . Następnie na obiekcie wywołaj IFontCollection metodę AddFont , aby dodać wymaganą czcionkę do aplikacji:

namespace MyMauiApp
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("Lobster-Regular.ttf", "Lobster");
                });

            return builder.Build();
        }
    }  
}

W powyższym przykładzie pierwszym argumentem AddFont metody jest nazwa pliku czcionki, a drugi argument reprezentuje opcjonalny alias, do którego można odwoływać się do czcionki podczas korzystania z niej.

Czcionkę można dodać do projektu aplikacji, przeciągając ją do folderu Resources\Fonts projektu, gdzie jego akcja kompilacji zostanie automatycznie ustawiona na mauiFont. Spowoduje to utworzenie odpowiedniego wpisu w pliku projektu. Alternatywnie wszystkie czcionki w aplikacji można zarejestrować przy użyciu symbolu wieloznakowego w pliku projektu:

<ItemGroup>
   <MauiFont Include="Resources\Fonts\*" />
</ItemGroup>

Czcionki można również dodawać do innych folderów projektu aplikacji. Jednak w tym scenariuszu akcja kompilacji musi być ręcznie ustawiona na MauiFont w oknie Właściwości.

W czasie kompilacji czcionki są kopiowane do pakietu aplikacji. Aby uzyskać informacje na temat wyłączania tworzenia pakietów czcionek, zobacz Wyłączanie tworzenia pakietów czcionek.

Korzystanie z czcionek

Zarejestrowane czcionki można używać, ustawiając FontFamily właściwość kontrolki wyświetlającą tekst na nazwę czcionki bez rozszerzenia pliku:

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

Alternatywnie można go użyć, odwołując się do jego aliasu:

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

Równoważny kod języka C# to:

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

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

W Androidzie można używać następujących systemowych czcionek, ustawiając je jako wartość właściwości FontFamily:

• monotyp
• szeryf
• sans-serif (lub sansserif)
• bezszeryfowy-czarny (lub bezszeryfowyczarny)
• Sans-serif-skondensowany (lub sansserif-skondensowany)
• sans-serif-skondensowany-lekki (lub sansserif-skondensowany-lekki)
• sans-serif-light (lub sansserif-light)
• sans-serif-medium (lub sansserif-medium)

Na przykład czcionka systemu monospace może być używana z następującym kodem XAML:

<Label Text="Hello .NET MAUI"
       FontFamily="monospace" />

Równoważny kod języka C# to:

// Use font name
Label label1 = new Label
{
    Text = "Hello .NET MAUI!",
    FontFamily = "monospace"
};

Ustawianie atrybutów czcionki

Kontrolki, które wyświetlają tekst, mogą ustawić FontAttributes właściwość w celu określenia atrybutów czcionki:

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

Równoważny kod języka C# to:

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

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

Ustawianie rozmiaru czcionki

Kontrolki, które wyświetlają tekst, mogą ustawić FontSize właściwość w celu określenia rozmiaru czcionki. Właściwość FontSize można ustawić na wartość double

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

Równoważny kod języka C# to:

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

Wyłączanie automatycznego skalowania czcionek

Wszystkie kontrolki, które wyświetlają tekst, mają domyślnie włączone skalowanie czcionek, co oznacza, że interfejs użytkownika aplikacji odzwierciedla preferencje skalowania tekstu ustawione w systemie operacyjnym. To zachowanie można jednak wyłączyć, ustawiając FontAutoScalingEnabled właściwość kontrolki na wartość false:

<Label Text="Scaling disabled"
       FontSize="18"
       FontAutoScalingEnabled="False" />

Takie podejście jest przydatne, gdy chcesz zagwarantować, że tekst jest wyświetlany w określonym rozmiarze.

Ustawianie właściwości czcionki w zależności od platformy

Klasy OnPlatform i On mogą służyć w języku XAML do ustawiania właściwości czcionki na platformę. W poniższym przykładzie ustawiono różne rodziny czcionek i rozmiary:

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

Właściwość DeviceInfo.Platform może służyć w kodzie do ustawiania właściwości czcionki na platformę:

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

label.FontSize = DeviceInfo.Platform == DevicePlatform.iOS ? 20 :
    DeviceInfo.Platform == DevicePlatform.Android ? 22 : 24;  
label.FontFamily = DeviceInfo.Platform == DevicePlatform.iOS ? "MarkerFelt-Thin" :
    DeviceInfo.Platform == DevicePlatform.Android ? "Lobster-Regular" : "ArimaMadurai-Black";

Aby uzyskać więcej informacji na temat udostępniania wartości specyficznych dla platformy, zobacz Informacje o urządzeniu. Aby uzyskać informacje na temat rozszerzenia znaczników OnPlatform, zobacz Dostosowywanie wyglądu interfejsu użytkownika na podstawie platformy.

Wyświetlanie ikon czcionek

Ikony czcionek mogą być wyświetlane przez aplikacje .NET MAUI, określając dane ikony czcionki w FontImageSource obiekcie. Ta klasa, która pochodzi z ImageSource klasy, ma następujące właściwości:

• Glyph — wartość znaku Unicode ikony czcionki, określona jako string.
• Size — wartość wskazująca double rozmiar w jednostkach niezależnych od urządzenia ikony czcionki renderowanej. Wartość domyślna to 30. Ponadto tę właściwość można ustawić na nazwany rozmiar czcionki. Aby uzyskać więcej informacji na temat jednostek niezależnych od urządzenia, zobacz Jednostki niezależne od urządzenia.
• FontFamily — reprezentująca rodzinę string czcionek, do której należy ikona czcionki.
• Color — opcjonalna Color wartość, która ma być używana podczas wyświetlania ikony czcionki.

Te dane służą do tworzenia pliku PNG, który może być wyświetlany przez dowolny widok, który może wyświetlać element ImageSource. Takie podejście umożliwia wyświetlanie ikon czcionek, takich jak emoji, przez wiele widoków, w przeciwieństwie do ograniczania wyświetlania ikon czcionki do pojedynczego widoku przedstawiającego tekst, takiego jak Label.

Poniższy przykład XAML przedstawia ikonę czcionki, którą wyświetla widok Image.

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

Ten kod wyświetla ikonę XBox z rodziny czcionek Ionicons w Image widoku. Należy pamiętać, że mimo iż znak Unicode dla tej ikony to \uf30c, musi zostać zakodowany w języku XAML, a więc zmienia się na . Równoważny kod języka C# to:

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

Poniższy zrzut ekranu przedstawia kilka wyświetlanych ikon czcionek: