Xamarin.FormsLabel のチュートリアル
このチュートリアルを試行する前に、以下を正常に完了しておく必要があります。
- 初めての Xamarin.Forms アプリのビルドに関するクイックスタート。
- StackLayout のチュートリアル。
このチュートリアルでは、次の作業を行う方法について説明します。
- XAML で Xamarin.Forms
Labelを作成する。 Labelの外観を変更する。- 複数の形式を持つテキストを、単一の
Labelで示す。
Label でテキストを表示する方法を示す簡単なアプリケーションを作成するには、Visual Studio 2019 または Visual Studio for Mac を使用します。 次のスクリーンショットは、最終的なアプリケーションです。
また、Xamarin.Forms 向け XAML ホット リロードを使用して、アプリケーションをリビルドせずに UI の変更を確認することもできます。
ラベルを作成する
このチュートリアルを完了するには、 .NET によるモバイル開発ワークロードがインストールされた、Visual Studio 2019 (最新リリース) が必要です。 さらに、iOS でチュートリアル アプリケーションを構築するには、ペアリング済みの Mac が必要になります。 Xamarin プラットフォームのインストールについては、「Xamarin のインストール」を参照してください。 Mac ビルド ホストへの Visual Studio 2019 の接続については、「Xamarin.iOS 開発のために Mac とペアリングする」を参照してください。
Visual Studio を起動し、LabelTutorial という名前の新しい空の Xamarin.Forms アプリを作成します。
重要
このチュートリアルの C# スニペットと XAML スニペットでは、LabelTutorial という名前のソリューションが必要です。 別の名前を使用すると、コードをこのチュートリアルからソリューションにコピーするときに、ビルド エラーが発生します。
作成される .NET Standard ライブラリの詳細については、Xamarin.Forms クイック スタート Deep Dive の「Xamarin.Forms アプリケーションの構造」を参照してください。
ソリューション エクスプローラーの LabelTutorial プロジェクトで、 [MainPage.xaml] をダブルクリックして開きます。 次に、 [MainPage.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="LabelTutorial.MainPage"> <StackLayout Margin="20,35,20,20"> <Label Text="Welcome to Xamarin.Forms!" HorizontalOptions="Center" /> </StackLayout> </ContentPage>このコードは、
StackLayoutの中のLabelから構成されるページのユーザー インターフェイスを宣言によって定義します。Label.Textプロパティは表示されるテキストを指定し、HorizontalOptionsプロパティはLabelが水平方向の中央に配置されるように指定します。Visual Studio ツール バーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択したリモート iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。
外観を変更する
MainPage.xaml で、
Label宣言を変更してその外観を変更します。<Label Text="Welcome to Xamarin.Forms!" TextColor="Blue" FontAttributes="Italic" FontSize="22" TextDecorations="Underline" HorizontalOptions="Center" />このコードでは、
Labelの外観を変更するプロパティを設定します。TextColorプロパティでは、Labelテキストの色を設定します。FontAttributesプロパティではラベルのフォントをイタリックに設定し、FontSizeプロパティではフォント サイズを設定します。 さらに、下線の文字修飾が、そのTextDecorationsプロパティを設定することで、Labelに適用され、HorizontalOptionsプロパティをCenterに設定することで、水平方向の中央に配置されます。アプリケーションがまだ実行されている場合は、変更内容をファイルに保存すると、アプリケーションのユーザー インターフェイスがシミュレーターまたはエミュレーターで自動的に更新されます。 もしくは、Visual Studio ツール バーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択したリモート iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。
Labelの外観が変更されたことを確認します。
Labelの外観の設定の詳細については、「Xamarin.Forms Label」ガイドを参照してください。
書式設定されたテキストを表示する
MainPage.xaml で、
Label宣言を変更して、複数の形式を使用するテキストを 1 つのLabelで示します。<Label TextColor="Gray" FontSize="Medium"> <Label.FormattedText> <FormattedString> <Span Text="This sentence contains " /> <Span Text="words that are emphasized, " FontAttributes="Italic" /> <Span Text="and underlined." TextDecorations="Underline" /> </FormattedString> </Label.FormattedText> </Label>このコードは、複数の形式を使用するテキストを 1 つの
Labelで表示します。 最初のSpan内のテキストは、Labelで設定された形式を使用して表示されますが、2 番目と 3 番目のSpanインスタンス内のテキストは、Labelで設定された形式と各Spanで設定された追加の形式を使用して表示されます。Note
FormattedTextプロパティは、1 つ以上の インスタンスで構成されるSpanFormattedStringの型です。アプリケーションがまだ実行されている場合は、変更内容をファイルに保存すると、アプリケーションのユーザー インターフェイスがシミュレーターまたはエミュレーターで自動的に更新されます。 もしくは、Visual Studio ツール バーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択したリモート iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。
Labelの外観が変更されたことを確認します。
Visual Studio で、アプリケーションを停止します。
Spanの外観の設定の詳細については、「Xamarin.Forms Label」ガイドの「Formatted text」 (書式設定されたテキスト) を参照してください。
おめでとうございます。
これでこのチュートリアルは完了です。ここでは以下の方法を学習しました。
- XAML で Xamarin.Forms
Labelを作成する。 Labelの外観を変更する。- 複数の形式を持つテキストを、単一の
Labelで示す。
次の手順
Xamarin.Forms を使用してモバイル アプリケーションを作成する基本についてさらに学習する場合は、Button のチュートリアルに進んでください。
関連リンク
このセクションに問題がある場合 このセクションを改善できるよう、フィードバックをお送りください。