本サイトからスピンオフした姉妹サイトです。Studio2015年4月8日イベントやプロパティの変化に応じたコントロールの外観の変更をXAMLだけで実装できるトリガーの基本的な使用方法を解説する。→Xamarin.Formsのバージョン1.3以降で追加された機能の1つにトリガーがある。トリガーを使用すると、イベントやプロパティの変化に応じたコントロールの外観の変更をXAMLだけで実装できる。今回は、このトリガーの利用方法について解説する。Studioでも同様の手順で、本稿の内容が実現できることは確認している)。使用しているXamarin.Formsのバージョンは、プロジェクト作成時に利用されている「1.3.1.6296」である。トリガーの種類トリガーは、変化を検出する対象に応じて、次の4種類がある。複数トリガーの複合状態また、トリガーは、個々のコントロールに直接指定して定義するだけでなく、ページ単位などで複数のコントロールに一気に指定することもできる。以下、それぞれのトリガーの利用方法について解説する。Portable)]を選択し、名前を「TriggerSample」として[OK]ボタンを押す(図1)。Page]を選択し、名前を「MainPage.cs」として[OK]ボタンを押す(図2)。作成したXAMLページ(MainPage)をアプリの最初のページにするためには、App.csファイルを以下のように修正する。プロパティトリガープロパティトリガーを使用するには、MainPage.xamlファイルを以下のように修正する。--></Trigger></Entry.Triggers></Entry></StackLayout></ContentPage>プロパティトリガーを実装したXAMLコード(MainPage.xaml)StackLayoutの中に、Entryコントロールを1つ配置し(1)、Triggersプロパティを指定した(2)。トリガーは、IsFocusedプロパティがTrueとなったときに(3)、BackgroundColorプロパティが水色(Aqua)になるように指定している(4)。このコードを実行すると次のような画面になる。プロパティトリガーの実行画面(Android/iOS)Entryコントロールにフォーカスがあるときだけ、背景色が水色に変わる。ページ全体のトリガートリガーは、個々のコントロールに指定するだけでなく、ページのリソースに定義して、ページ全体に影響させることもできる。ページ全体のトリガーを指定するには、MainPage.xamlファイルを以下のように修正する。--></StackLayout></ContentPage>ページ全体のトリガーを実装したXAMLコード(MainPage.xaml)ページのリソースとして(1)、Entryコントロールに適用されるスタイルを定義する(2)。トリガーは、先ほどと同じで、IsFocusedプロパティがTrueとなったときに(3)、BackgroundColorプロパティが、今度は黄色(Yellow)になるように指定した(4)。ここまでの定義が終わると、このページ内で使用する全てのEntryコントロールに、このトリガーが適用されることになる(56)。このコードを実行すると次のような画面になる。データトリガーデータトリガーを使用するには、MainPage.xamlファイルを以下のように修正する。--></DataTrigger></Button.Triggers></Button></StackLayout></ContentPage>データトリガーを実装したXAML(MainPage.xaml)StackLayoutの中に、Entryコントロールと(1)、Buttonコントロールを配置した(2)。ButtonコントロールのTriggersプロパティには、データトリガーが指定されており、EntryコントロールのTextプロパティのサイズが0のとき(3)、自身のIsEnabledプロパティがFalseとなるようになっている(4)。Entryコントロールにおいて、Textプロパティを、空白("")で初期化しているのが一見無駄に見えるが、これが無いと、起動時にデータトリガーが機能せず、Buttonコントロールが無効とならないため省略することはできない。このコードを実行すると次のような画面になる。イベントトリガーイベントトリガーを使用するには、MainPage.xamlファイルを以下のように修正する。/></EventTrigger></Entry.Triggers></Entry></StackLayout></ContentPage>イベントトリガーを実装したXAML(MainPage.xaml)StackLayoutには、Entryコントロールを一つだけ配置し、年齢の入力を促すため、PlaceholderプロパティにAgeと指定した(2)。Triggersプロパティに対して、テキストの変換(TextChangedイベント)で動作するイベントトリガーを設定した(3)。トリガーの動作は、EntryValidationクラスに定義することとし(4)、このクラスのアセンブリ上の位置を指定しした(1)。続いて、そのEntryValidationクラスを定義するため、App.csファイルを以下のように修正する。Color.Blue;}}}}EntryValidationクラスを定義したコード(App.cs)EntryValidationクラスは、TriggerActionクラスを継承して定義する(1)。Invokeメソッドをオーバーライドすることで(2)、その動作を定義できるが、ここでは、入力内容が数値として有効な場合にテキストの色を青色とし、無効のときは、赤色となるようにした(3)。このコードを実行すると次のような画面になる。マルチトリガーマルチトリガーを使用するには、MainPage.xamlファイルを以下のように修正する。--></MultiTrigger></Button.Triggers></Button></StackLayout></ContentPage>イベントトリガーを実装したXAMLコード(MainPage.xaml)StackLayoutには、2つのEntryコントロールと(12)、Buttonコントロール(3)を配置した。ButtonコントロールのTriggersプロパティには、マルチトリガーが指定されており、2つのEntryコントロールのテキストサイズが両方とも0のときだけ(45)、自身のIsEnabledプロパティがFalseになるようになっている(6)。このコードを実行すると次のような画面になる。まとめ今回は、各種のトリガーの実装方法について解説した。トリガーは、以前に紹介したビヘイビアーと同じような目的で利用可能であるが、簡単な動作であれば、より簡単にXAMLだけで書けるという点では軍配が上がりそうだ。トリガーやビヘイビアーをうまく使いこなして、よりユーザーに優しいUI構築を目指してほしい。※以下では、本稿の前後を合わせて5回分(第43回~第47回)のみ表示しています。INDEX]を参照してください。MvvmCrossでコマンドバインディングをするには?MvvmCrossでは、画面でのイベント発生をViewModelに通知するためにコマンドバインディングを使用する。iOS/Androidにおける、その基本的な実装方法を説明する。Xamarin.FormsでListViewのコンテキストアクションを使用するには?リストの1つをスライド(iOS)もしくは長押し(Android)されたらメニューを表示する「コンテキストアクション」の基本的な使い方を説明する。Xamarin.Formsでトリガーを使用するには?イベントやプロパティの変化に応じたコントロールの外観の変更をXAMLだけで実装できるトリガーの基本的な使用方法を解説する。Xamarin.FormsでWebビューを使用するには?外部のWebページやローカルに配置されたHTMLコンテンツを簡単に表示できるWebViewコントロールをXamarin.Formsで使う方法を説明する。MvvmCrossで画面遷移するには?MvvmCrossでiOS/Androidアプリの画面遷移をするための基本的な実装方法を説明する。機械学習エンジニアを目指す人~初中級者のための技術情報サイトです。「機械学習&AI」「クラウド&ビッグデータ」「IoTデバイス」のネット記事情報を共有中。開発者のためのSlackチーム、作りました:「機械学習&AI」「クラウド&ビッグデータ」「IoTデバイス」のネット記事情報を共有中。2020最適なビューへの切り替えを推奨します:スマートフォン用表示に。