ListViewタップ時に発火するItemTappedイベントがありますが、イベントを使用してしまうとコードビハインドに手を入れなくてはなりません。

それが何となく嫌だな~と思ったので、ListViewのタップ時にCommandを実行させられるBehaviorを使ってみました。

プロジェクトの作成

Prism Template Packの使用

りんちゃんりんちゃん

プロジェクトの作成にはPrism TemplateUnityを使うのにゃ~。Prism Template Packについては以下の記事にまとめてるのにゃ~。

まずはListVIewにItemsSourceをBindingしてみる

りんちゃんりんちゃん

MVVMに則ってバインディングするのにゃ~。かんたんかんたん♪

Code Example

実際の動きを確認

AndroidiPhone

ListVIewタップ時にItemTappedイベントを拾ってみる

りんちゃんりんちゃん

まずはデフォルトで用意されているItemTappedイベントを使って実装してみるのにゃ~。

Code Example

実際の動きを確認

AndroidiPhone

ListViewタップ時にコマンドを実行させてみる

かりまたかりまた

MVVMを意識するのであればイベントはなるべくコードビハインドに書きたくないですよね。しかし、ListViewコントロールではコマンドを引数にとるプロパティはRefreshCommandしかありません。

なんだとさんなんだとさん

なん…だと…

かりまたかりまた

しょうがない…作ろう!

ソリューションの全体像

かりまたかりまた

完成形の全体像を先に提示します。ListViewの項目タップ時にコマンドを実行させるにあたって、以下のような構成になりました。ファイルとして増えたのはBehaviorModelです。

タップ時にCommandが実行されるBehaviorを作ってみる

かりまたかりまた

以下の記事を参考にさせて頂きました!

ListViewタップ時にコマンドを実行させるBehaviorを使う
かりまたかりまた

nuitsさんの記事で書かれてあるBehaviorを使ってみましょう。

作成したBehaviorをXamlに組み込む

かりまたかりまた

ListView.Behaviorsタグの中に、先ほど作成したItemSelectedToCommandBehaviorクラスと割り当てるコマンドを指定します。

ListViewタップ時に実行したいコマンドをVMに記述する

かりまたかりまた

ここまでくればもう終わりが見えています。あとはいつものようにコマンドをViewModelに書きます。

実行結果の確認

アムロアムロ

こいつ…動くぞ…

AndroidiPhone

Download

かりまたかりまた

今回の記事で書いたコードを以下に纏めてアップロードしたのでどうぞ。

 まとめ

  • ListViewにはタップ時に設定できるCommandがない
  • Behaviorを作成することによってListViewタップ時にCommandを実行させられる
  • Behaviorは一度作ってしまえばどのソリューションでも使えるので便利