[.NET MAUI][Label] 1つのラベルに複数の装飾を適用する

.NET MAUI

.NET MAUI TIPS

2022.06.26

本記事の概要
複数の装飾の適用
1. XAML の例
2. C# の例
.NET MAUI Tips

本記事の概要

この記事では Label に複数の装飾を適用する方法について説明をします。

公式サイト情報はコチラを参照してください。

複数の装飾を適用する

複数の装飾の適用

Label に表示しているテキストに対し、複数の装飾を適用するには FormattedString プロパティを使用します。

XAML の例

XAML で複数の装飾するには、<Label.Formatted> の中に <FormattedString> を入れ、装飾する文字列ごとに <Span> を使用します。

以下にコード例を示します。

この例では「Hello .NET MAUI」という文字列を「Hello」「.NET」「MAUI」の３つに分解し、それぞれに装飾を適用しています。

「Hello」は前景色を青に、「.NET」は前景色をマゼンタに, フォントサイズを20にし、なおかつ太字にしています。「MAUI」は前景色をシアンに, フォントサイズを24にし、なおかつ斜体にしています。

XAML の例

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppSample.MainPage">
			 
    <ScrollView>
        <VerticalStackLayout Spacing="25" Padding="30,0" VerticalOptions="CenterAndExpand">

            <Label Text="Hello .NET MAUI">
                <Label.FormattedText>
                    <FormattedString>
                        <Span Text="Hello " TextColor="Blue" />
                        <Span Text=".NET " TextColor="Magenta" FontSize="20" FontAttributes="Bold" />
                        <Span Text="MAUI" TextColor="Cyan" FontSize="24" FontAttributes="Italic" />
                    </FormattedString>
                </Label.FormattedText>
            </Label>
        </VerticalStackLayout>
    </ScrollView>
 
</ContentPage>

C# の例

以下は先ほどのXAML の例をコードビハインドで行う例です。

XAML の例

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppSample.MainPage">
			 
    <ScrollView>
        <VerticalStackLayout Spacing="25" Padding="30,0" VerticalOptions="CenterAndExpand">

            <Label x:Name="myLabel1" Text="Hello .NET MAUI" />

        </VerticalStackLayout>
    </ScrollView>
 
</ContentPage>

C# の例

public MainPage()
{
    InitializeComponent();

    FormattedString formattedString = new FormattedString();
    formattedString.Spans.Add(new Span { 
        Text = "Hello ", 
        TextColor = Colors.Blue});

    formattedString.Spans.Add(new Span
    {
        Text = ".NET ",
        TextColor = Colors.Magenta,
        FontSize = 20,
        FontAttributes = FontAttributes.Bold,
    });

    formattedString.Spans.Add(new Span
    {
        Text = "MAUI",
        TextColor = Colors.Cyan,
        FontSize = 24,
        FontAttributes = FontAttributes.Italic,
    });

    myLabel1.FormattedText = formattedString;
}

複数の装飾を適用する