本サイトからスピンオフした姉妹サイトです。Android2015年4月1日リストの1つをスライド(iOS)もしくは長押し(Android)されたらメニューを表示する「コンテキストアクション」の基本的な使い方を説明する。→Xamarin.Formsのバージョン1.3以降で追加された機能の1つにListViewのコンテキストアクションがある。コンテキストアクションを使用すると、リストの一つをスライド(Androidでは長押し)することでメニューを表示させることができる。今回は、このListViewビュー(=コントロール)のコンテキストアクションの利用方法について解説する。Studioでも同様の手順で、本稿の内容が実現できることは確認している)。使用しているXamarin.Formsのバージョンは、プロジェクト作成時に利用されている「1.3.1.6296」である。シナリオ最初に、簡単なテキストのみを表示するリストビューの画面を作成する。そのリストビューにコンテキストアクションを追加する方法について解説する。応用として、コンテキストアクションから、リストの項目を操作する例についても紹介する。Portable)]を選択し、名前を「ContextActionsSample」として[OK]ボタンを押す。最初に、コンテキストアクションを追加するためにリストビューを作成する。テキストのみが表示されたリストビューを表示するには、App.csファイルを以下のように修正する。<-3}}}「item-0」~「item-50」というテキストが並べたリストビューを表示する画面のコード(App.cs)ListViewコントロール(1)を生成し、ItemsSourceプロパティに0から始まって50個の文字列配列を渡している(2)。ListViewは、定義したメイン画面(=MyPage)で唯一のコントロールであり、画面全体を占めることになる(3)。このコードを実行すると次のような画面になる。データテンプレートリストビューのコンテキストアクションは、各セルの描画を担任するViewCellオブジェクトのプロパティとして追加されるため、データテンプレートの実装が必須となる。先のコードでは、データテンプレートを指定していないため、デフォルトの動作としてカスタムセルのTextCellオブジェクトが動作していた。ここでは、このTextCellオブジェクトに相当するテンプレートをあらためて実装することにする。データテンプレートを指定するには、App.csファイルを以下のように修正する。}};}}}データテンプレートを実装したコード(App.cs)まずは、ViewCellクラスを継承した、テンプレートクラス(ここではMyCellとした)を定義する(2)。MyCellでは、Labelコントロールを1つ生成し(3)、その表示内容をカレントデータにバインドした(4)。Labelコントロールは、TextCellをまねて、パディング(Padding)を少し取って表示した(5)。最終的に、定義したMyCellクラスのインスタンスは、ListViewのItemTemplateプロパティにセットされている(1)。現時点では、このコードを実行しても、表示は以前と変わらない。コンテキストアクション続いて、このMyCellクラスに、コンテキストアクションを追加していく。コンテキストアクションを追加するには、App.csファイルを以下のように修正する。}};}}}コンテキストアクションを追加したコード(App.cs)コンテキストアクションの実体は、メニューアイテムである。ここでは、例として2つのアクションを追加するため、MenuItemクラスのインスタンスを2つ生成している(16)。MenuItemオブジェクトのIsDestructiveプロパティをtrueにセットすることで(3)、メニューアイテムの表示が赤色になる(※ただし、iOSのみ)。コンテキストメニューを選択した際の動作については、2つの実装方法がある。その1つ目は、MenuItemオブジェクトのCommandプロパティにCommandクラスのインスタンスを指定する方法である(2)。2つ目は、MenuItemオブジェクトのClickedイベントに追加する方法である(8)。場面に応じて使い分けてほしい。最後に、生成したMenuItemオブジェクトは、ViewCellクラス(を継承したMyCellクラスのインスタンス)のContextActionsプロパティに追加することで有効となる(59)。アクション発生時に、パラメーターとして表示されているテキストを受け取るため、MenuItemクラスのCommandParameterPropertyフィールドに、カレントデータをバインドしている(4)。このコードを実行すると次のような画面になる。Phoneでは、図4のように表示される。Phoneの場合も、Androidと同じく長押しによりコンテキストアクションが実行される。最後に、応用として、コンテキストアクションに応じて、リストのアイテムを操作する方法を解説する。ここまでに作成したサンプルにおける[Add]メニューでリストのアイテムを追加、[Delete]メニューで削除となるように実装するには、App.csファイルを以下のように修正する。<-8ContextActions.Add(actionAdd);......省略......}}}アクションメニューからリストのアイテムを操作するコード(App.cs)ItemsSourceプロパティに指定していたリストのデータは、操作が可能になるようクラス変数に変更し、ObservableCollectionクラスのインスタンスに変更した(12)。MyPageクラスでは、コンテキストアクションに応じて、リストを操作するActionメソッドを新たに定義した(3)。Actionメソッドは、MenuItemオブジェクトを引数に取るが、このMenuItemオブジェクトのTextプロパティの値がアクションへの表示文字列(本稿の例では[Add]や[Delete])と等しいかを確認し(56)、アクション別にCommandParameterプロパティの値がリストの表示文字列(4)と一致しているものを対象・基準として、そのリストビューのデータを操作している。MyCellクラスの方では、先の例で使用した、Commandプロパティへの指定やClickedイベントへの処理をいったん削除し、新たに、Antcionメソッドを呼び出すコードに修正した(78)。このコードを実行すると次のような画面になる。まとめ今回は、リストビューにコンテキストメニューを追加する方法について解説した。実行画面を見て分かる通り、Xamarin.Formsのコンテキストアクションは、表示も呼び出し方法もプラットフォームごとに大きく異なるので、使用に関してはよく検討する必要がありそうだ。Group(以下JXUG)というのをご存じだろうか。JXUGでは、Xamarinに関する、最新情報の提供や、情報交換などが行われている。Conferenceと称して、定期的にカンファレンスも行われている。JXUGと合同で、2015年4月11日(土)の午後に品川(日本マイクロソフトの品川オフィス・セミナールーム)で開催される。今回は、筆者もXamarin.Formsに関する話をさせていただく予定である。Xamarinの生の情報を得るためにも良い機会になると思うので、時間の許す方は、ぜひ参加してみてほしい。※以下では、本稿の前後を合わせて5回分(第42回~第46回)のみ表示しています。INDEX]を参照してください。Xamarin.Formsでビヘイビアーを使用するには?サブクラス化することなく、UIコントロールに機能を追加できる「ビヘイビアー」の基本的な使い方を説明する。MvvmCrossでコマンドバインディングをするには?MvvmCrossでは、画面でのイベント発生をViewModelに通知するためにコマンドバインディングを使用する。iOS/Androidにおける、その基本的な実装方法を説明する。Xamarin.FormsでListViewのコンテキストアクションを使用するには?リストの1つをスライド(iOS)もしくは長押し(Android)されたらメニューを表示する「コンテキストアクション」の基本的な使い方を説明する。Xamarin.Formsでトリガーを使用するには?イベントやプロパティの変化に応じたコントロールの外観の変更をXAMLだけで実装できるトリガーの基本的な使用方法を解説する。Xamarin.FormsでWebビューを使用するには?外部のWebページやローカルに配置されたHTMLコンテンツを簡単に表示できるWebViewコントロールをXamarin.Formsで使う方法を説明する。機械学習エンジニアを目指す人~初中級者のための技術情報サイトです。「機械学習&AI」「クラウド&ビッグデータ」「IoTデバイス」のネット記事情報を共有中。開発者のためのSlackチーム、作りました:「機械学習&AI」「クラウド&ビッグデータ」「IoTデバイス」のネット記事情報を共有中。2020最適なビューへの切り替えを推奨します:スマートフォン用表示に。