Label
サンプルを参照する.NET Multi-platform App UI (.NET MAUI) Label には、単一行および複数行のテキストが表示されます。 Label で表示されるテキストには、色、間隔、およびテキスト装飾を含めることができます。
Label には、次のプロパティが定義されています。
double型のCharacterSpacingは、表示されるテキストの文字間の間隔を設定します。FontAttributes型のFontAttributesは、テキスト スタイルを決定します。bool型のFontAutoScalingEnabledは、テキストがオペレーティング システムで設定されたスケーリング設定を反映するかどうかを定義します。 このプロパティの既定値はtrueです。string型のFontFamilyは、フォント ファミリを定義します。double型のFontSizeは、フォント サイズを定義します。FormattedString型のFormattedTextは、フォントや色などの複数のプレゼンテーション オプションを含むテキストのプレゼンテーションを指定します。- TextAlignment 型の
HorizontalTextAlignmentは、表示されるテキストの水平方向の配置を定義します。 LineBreakMode型のLineBreakModeは、1 行に収まらない場合のテキストの処理方法を決定します。double型のLineHeightは、テキストを表示する際に既定の行の高さに適用する乗数を指定します。int型のMaxLinesは、Label で許可される行の最大数を示します。Thickness型のPaddingは、ラベルのパディングを決定します。string型のTextは、ラベルの内容として表示されるテキストを定義します。- Color 型の
TextColorは、表示されるテキストの色を定義します。 TextDecorations型のTextDecorationsは、適用できるテキスト装飾 (下線や取り消し線) を指定します。TextTransform型のTextTransformは、表示されるテキストの大文字と小文字の区別を指定します。TextType型のTextTypeは、Label にプレーンテキストと HTML テキストのどちらを表示するかを決定します。- TextAlignment 型の
VerticalTextAlignmentは、表示されるテキストの垂直方向の配置を定義します。
これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。
Label でのフォントの指定の詳細については、「フォント」を参照してください。
ラベルを作成する
次の例は、Label を作成する方法を示しています。
<Label Text="Hello world" />
同等の C# コードを次に示します。
Label label = new Label { Text = "Hello world" };
色を設定する
TextColor プロパティを使用して、テキストの特定の色を使用するようにラベルを設定できます。
次の例では、Label のテキストの色を設定しています。
<Label TextColor="#77d065"
Text="This is a green label." />
色の詳細については、「色」を参照してください。
文字間隔を設定する
CharacterSpacing プロパティの値を double に設定することで、Label オブジェクトに文字間隔を適用できます。
<Label Text="Character spaced text"
CharacterSpacing="10" />
結果として、Label により表示されるテキスト内の文字は、デバイスに依存しない単位で CharacterSpacing の間隔が設定されます。
新しい行を追加する
XAML で Label のテキストを強制的に新しい行に配置するには、主に次の 2 つの手法があります。
- Unicode 改行文字 ( ) を使用します。
- プロパティ要素の構文を使用してテキストを指定します。
両方の手法の例を次のコードに示します。
<!-- Unicode line feed character -->
<Label Text="First line Second line" />
<!-- Property element syntax -->
<Label>
<Label.Text>
First line
Second line
</Label.Text>
</Label>
C# では、"\n" 文字を使用して、テキストを強制的に新しい行に配置できます。
Label label = new Label { Text = "First line\nSecond line" };
テキストの切り捨てと折り返しを制御する
テキストの折り返しと切り捨ては、LineBreakMode プロパティを LineBreakMode 列挙型の値に設定することで制御できます。
NoWrap: テキストは折り返されず、1 行に収まる量のテキストのみが表示されます。 これは、LineBreakModeプロパティの既定値です。WordWrap: 単語の境界でテキストを折り返します。CharacterWrap: 文字の境界で新しい行にテキストを折り返します。HeadTruncation: テキストの先頭が切り捨てられ、末尾が表示されます。MiddleTruncation: テキストの先頭と末尾を表示し、中央を省略記号で置き換えます。TailTruncation: テキストの先頭を表示し、末尾を切り捨てます。
特定の行数を表示する
Label で表示される行数は、MaxLines プロパティを int 値に設定すれば指定できます。
MaxLinesが既定値である -1 の場合は、Label は、LineBreakModeプロパティの値を考慮して、1 行のみ (おそらく切り捨てられたもの）表示するか、すべてのテキストを含むすべての行を表示します。MaxLinesが 0 の場合、Label は表示されません。MaxLinesが 1 の場合、結果はLineBreakModeプロパティをNoWrap、HeadTruncation、MiddleTruncation、またはTailTruncationに設定した場合と同じになります。 ただし、Label では、該当する場合、省略記号の配置に関してLineBreakModeプロパティの値を考慮します。MaxLinesが 1 より大きい場合、Label では、該当する場合、省略記号の配置に関してLineBreakModeプロパティの値を考慮しながら、指定された行数まで表示します。 ただし、MaxLinesプロパティを 1 より大きい値に設定しても、LineBreakModeプロパティがNoWrapに設定されている場合は効果がありません。
次の XAML の例では、Label で MaxLines プロパティを設定する方法を示しています。
<Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis nulla eu felis fringilla vulputate. Nullam porta eleifend lacinia. Donec at iaculis tellus."
LineBreakMode="WordWrap"
MaxLines="2" />
行の高さを設定する
Label.LineHeight プロパティを double 値に設定すると、Label の垂直方向の高さをカスタマイズできます。
Note
- iOS では、
Label.LineHeightプロパティは、1 行に収まるテキストと、複数行に折り返されるテキストの行の高さを変更します。 - Android では、
Label.LineHeightプロパティは、複数行に折り返されるテキストの行の高さのみを変更します。 - Windows では、
Label.LineHeightプロパティは、複数行に折り返されるテキストの行の高さを変更します。
次の例は、Label に LineHeight プロパティを設定する方法を示しています。
<Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis nulla eu felis fringilla vulputate. Nullam porta eleifend lacinia. Donec at iaculis tellus."
LineBreakMode="WordWrap"
LineHeight="1.8" />
次のスクリーンショットは、Label.LineHeight プロパティを 1.8 に設定した結果を示しています。
HTML の表示
重要
Label で HTML を表示するのは、基盤となるプラットフォームでサポートされている HTML タグに限られます。 たとえば、Android では HTML タグのサブセットのみがサポートされており、<span> や <p> などのブロック レベル要素の基本的なスタイル設定と書式設定に重点が置かれています。 より複雑な HTML レンダリングを行うには、WebView や FormattedText の使用を検討してください。
Label クラスには TextType プロパティがあり、Label オブジェクトにプレーン テキストと HTML テキストのどちらを表示するかを決定します。 このプロパティは、TextType 列挙型メンバーのいずれかに設定する必要があります。
そのため、Label オブジェクトは、TextType プロパティを Html、Text プロパティを HTML 文字列に設定することで HTML を表示できます。
Label label = new Label
{
Text = "This is <span style=\"color:red;\"><strong>HTML</strong></span> text.",
TextType = TextType.Html
};
上記の例では、\ 記号を使用して HTML 内の二重引用符文字をエスケープする必要があります。
XAML では、< や > の記号がエスケープされるため、HTML 文字列が読み取れなくなる可能性があります。
<Label Text="This is <span style="color:red"><strong>HTML</strong></span> text."
TextType="Html" />
あるいは、読みやすくするために、HTML を CDATA セクションにインライン化することもできます。
<Label TextType="Html">
<![CDATA[
<Label Text="This is <span style="color:red"><strong>HTML</strong></span> text."
]]>
</Label>
この例では、Text プロパティは、CDATA セクションにインライン化された HTML 文字列に設定されています。 これは、Text プロパティが Label クラスの ContentProperty であるため機能します。
テキストを装飾する
TextDecorations プロパティを 1 つまたは複数の TextDecorations 列挙型要素に設定すると、下線と取り消し線のテキスト装飾を Label オブジェクトに適用できます。
NoneUnderlineStrikethrough
次の例は、TextDecorations プロパティの設定を示しています。
<Label Text="This is underlined text." TextDecorations="Underline" />
<Label Text="This is text with strikethrough." TextDecorations="Strikethrough" />
<Label Text="This is underlined text with strikethrough." TextDecorations="Underline, Strikethrough" />
同等の C# コードを次に示します。
Label underlineLabel = new Label { Text = "This is underlined text.", TextDecorations = TextDecorations.Underline };
Label strikethroughLabel = new Label { Text = "This is text with strikethrough.", TextDecorations = TextDecorations.Strikethrough };
Label bothLabel = new Label { Text = "This is underlined text with strikethrough.", TextDecorations = TextDecorations.Underline | TextDecorations.Strikethrough };
次のスクリーンショットは、Label インスタンスに適用された TextDecorations 列挙型要素を示しています。
Note
テキスト装飾も、Span インスタンスに適用できます。 Span クラスの詳細については、「書式設定されたテキストを使用する」を参照してください。
テキストの変換
Label では、TextTransform プロパティを TextTransform 列挙型の値に設定すると、Text プロパティに格納されているテキストの大文字と小文字を変換できます。 この列挙型には、次の 4 つの値があります。
Noneは、テキストが変換されないことを示します。Defaultは、プラットフォームの既定の動作を使います。 これは、TextTransformプロパティの既定値です。Lowercaseは、テキストが小文字に変換されることを示します。Uppercaseは、テキストが大文字に変換されることを示します。
次の例は、テキストを大文字に変換する方法を示しています。
<Label Text="This text will be displayed in uppercase."
TextTransform="Uppercase" />
書式設定されたテキストを使用する
Label は、同じビューで複数のフォントと色を持つテキストを表示できる FormattedText プロパティを公開します。 FormattedString 型の FormattedText プロパティは,,1 つまたは複数の Span インスタンスで構成され、Spans プロパティを介して設定されます。
Note
Span で HTML を表示することはできません。
Span には、次のプロパティが定義されています。
- Color 型の
BackgroundColorは、スパンの背景の色を表します。 double型のCharacterSpacingは、表示されるテキストの文字間の間隔を設定します。FontAttributes型のFontAttributesは、テキスト スタイルを決定します。bool型のFontAutoScalingEnabledは、テキストがオペレーティング システムで設定されたスケーリング設定を反映するかどうかを定義します。 このプロパティの既定値はtrueです。string型のFontFamilyは、フォント ファミリを定義します。double型のFontSizeは、フォント サイズを定義します。double型のLineHeightは、テキストを表示する際に既定の行の高さに適用する乗数を指定します。- Style 型の
Styleは、スパンに適用するスタイルです。 string型のTextは、Span のコンテンツとして表示されるテキストを定義します。- Color 型の
TextColorは、表示されるテキストの色を定義します。 TextDecorations型のTextDecorationsは、適用できるテキスト装飾 (下線や取り消し線) を指定します。TextTransform型のTextTransformは、表示されるテキストの大文字と小文字の区別を指定します。
これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。
Note
Windows の場合、Span.LineHeight プロパティには効果がありません。
さらに、GestureRecognizers プロパティを使用して、ジェスチャ認識エンジンのコレクションを定義できます。ジェスチャ認識エンジンは、Span でのジェスチャに反応します。
次の XAML の例は、FormattedText プロパティが 3 つの Span インスタンスで構成されていることを示しています。
<Label LineBreakMode="WordWrap">
<Label.FormattedText>
<FormattedString>
<Span Text="Red Bold, " TextColor="Red" FontAttributes="Bold" />
<Span Text="default, " FontSize="14">
<Span.GestureRecognizers>
<TapGestureRecognizer Command="{Binding TapCommand}" />
</Span.GestureRecognizers>
</Span>
<Span Text="italic small." FontAttributes="Italic" FontSize="12" />
</FormattedString>
</Label.FormattedText>
</Label>
同等の C# コードを次に示します。
FormattedString formattedString = new FormattedString ();
formattedString.Spans.Add (new Span { Text = "Red bold, ", TextColor = Colors.Red, FontAttributes = FontAttributes.Bold });
Span span = new Span { Text = "default, " };
span.GestureRecognizers.Add(new TapGestureRecognizer { Command = new Command(async () => await DisplayAlert("Tapped", "This is a tapped Span.", "OK")) });
formattedString.Spans.Add(span);
formattedString.Spans.Add (new Span { Text = "italic small.", FontAttributes = FontAttributes.Italic, FontSize = 14 });
Label label = new Label { FormattedText = formattedString };
次のスクリーンショットは、結果の Label に 3 つの Span オブジェクトが含まれていることを示しています。
Span は、スパンの GestureRecognizers コレクションに追加される、すべてのジェスチャに反応することもできます。 たとえば、上記の例では、2 番目の Span に TapGestureRecognizer が追加されています。 そのため、この Span をタップすると、TapGestureRecognizer は反応し、Command プロパティによって定義された ICommand を実行します。 タップ ジェスチャ認識の詳細については、「Recognize a tap gesture」を参照してください。
ハイパーリンクの作成
Label インスタンスと Span インスタンスで表示されるテキストは、次の方法でハイパーリンクに変換できます。
- Label または Span の
TextColorプロパティとTextDecorationプロパティを設定します。 - Label または Span の
GestureRecognizersコレクションに TapGestureRecognizer を追加します。ここでは、Commandプロパティが ICommand にバインドされ、開こうとしている URL がCommandParameterプロパティに追加されます。 - TapGestureRecognizer によって実行される ICommand を定義します。
- ICommand によって実行されるコードを記述します。
次の例は、コンテンツが複数の Span オブジェクトで設定されている Label を示しています。
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="Alternatively, click " />
<Span Text="here"
TextColor="Blue"
TextDecorations="Underline">
<Span.GestureRecognizers>
<TapGestureRecognizer Command="{Binding TapCommand}"
CommandParameter="https://learn.microsoft.com/dotnet/maui/" />
</Span.GestureRecognizers>
</Span>
<Span Text=" to view .NET MAUI documentation." />
</FormattedString>
</Label.FormattedText>
</Label>
この例では、1 番目と 3 番目の Span インスタンスにはテキストが含まれているのに対して、2 番目の Span インスタンスはタップ可能なハイパーリンクを表しています。 テキストの色が青に設定され、下線テキスト装飾が施されています。 これにより、次のスクリーンショットに示すように、ハイパーリンクの外観が作成されます。
このハイパーリンクがタップされると、TapGestureRecognizer が応答して、Command プロパティで定義された ICommand を実行します。 さらに、CommandParameter プロパティで指定された URL がパラメーターとして ICommand に渡されます。
XAML ページの分離コードには、TapCommand 実装が含まれています。
using System.Windows.Input;
public partial class MainPage : ContentPage
{
// Launcher.OpenAsync is provided by Essentials.
public ICommand TapCommand => new Command<string>(async (url) => await Launcher.OpenAsync(url));
public MainPage()
{
InitializeComponent();
BindingContext = this;
}
}
TapCommand は Launcher.OpenAsync メソッドを実行して、TapGestureRecognizer.CommandParameter プロパティの値をパラメーターとして渡します。 Launcher.OpenAsync メソッドは URL を Web ブラウザーで開きます。 したがって、全体的な結果としては、ページ上でハイパーリンクがタップされると、Web ブラウザーが表示され、ハイパーリンクに関連付けられている URL に移動します。
再利用可能なハイパーリンク クラスを作成する
ハイパーリンクを作成するこれまでのアプローチでは、アプリにハイパーリンクが必要になるたびに、繰り返しコードを記述する必要があります。 一方、Label クラスと Span クラスの両方をサブクラス化して HyperlinkLabel クラスと HyperlinkSpan クラスを作成し、そこにジェスチャ認識エンジンとテキスト書式設定のコードを追加することができます。
次の例は HyperlinkSpan クラスを示しています。
public class HyperlinkSpan : Span
{
public static readonly BindableProperty UrlProperty =
BindableProperty.Create(nameof(Url), typeof(string), typeof(HyperlinkSpan), null);
public string Url
{
get { return (string)GetValue(UrlProperty); }
set { SetValue(UrlProperty, value); }
}
public HyperlinkSpan()
{
TextDecorations = TextDecorations.Underline;
TextColor = Colors.Blue;
GestureRecognizers.Add(new TapGestureRecognizer
{
// Launcher.OpenAsync is provided by Essentials.
Command = new Command(async () => await Launcher.OpenAsync(Url))
});
}
}
HyperlinkSpan クラスには Url プロパティのほか、関連する BindableProperty が定義されており、ハイパーリンクの外観と、ハイパーリンクがタップされたときに応答する TapGestureRecognizer をコンストラクターが設定します。 HyperlinkSpan がタップされると、TapGestureRecognizer は Launcher.OpenAsync メソッドを実行して応答し、Url プロパティで指定された URL を Web ブラウザーで開きます。
HyperlinkSpan クラスを使用するには、クラスのインスタンスを XAML に追加します。
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:HyperlinkDemo"
x:Class="HyperlinkDemo.MainPage">
<StackLayout>
...
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="Alternatively, click " />
<local:HyperlinkSpan Text="here"
Url="https://learn.microsoft.com/dotnet/" />
<Span Text=" to view .NET documentation." />
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
</ContentPage>
.NET MAUI