Xamarin.Formsで複数のImageを使ってラジオボタンのような機能を作りたい

Question

###前提・実現したいこと
複数のImageを配置しタップしたら選択され、他のImageがタップされたら最初にタップされたImageは選択が解除され、新しくタップされたものが選択されるというImageでラジオボタンのような機能を作りたいです。
やり方が分かる方教えてください。
よろしくお願いします。

###試したこと
選択されたことが視覚的に確認できる方法としてタップされたら画像を変更するという方法を考え実行しましたが変更した画像を戻す方法が分かりませんでした。

別の効率よいやり方があればこの方法は無視していただいて構いません。
###補足情報(言語/FW/ツール等のバージョンなど)

開発環境
Visual Studio 2015
Windows 10
Xamarin.Forms.Portable

Answer 1

こんな感じでしょうか。

それぞれの Image がタップされた時に、全ての画像を自力で更新すればよいのですが、
せっかく Xamarin.Forms なので、データバインディングとプロパティ変更通知を利用するのが後々にとってよいでしょう。

おおざっぱにやる事は5つ。

1. 選択しているボタンの Index を保持するモデルクラスを作り、それは INotifyPropertyChanged を実装する。
2. Index から ImageSource へ変換する ValueConverter を作る。これはモデルの Index と、後述のコマンドパラメータ値が一致したら選択中の画像を、不一致なら未選択の画像を返すものである。
3. 画面の XAML の BindingContext に 1. のモデルのインスタンスを設定する。
4. 並べた Image の Source プロパティに １． の Index をバインドし、さらに 2. の ValueConverter を仕掛ける。コマンドパラメータには 1〜 の連番を指定する。
5. 各 Image がタップされたときの処理で、モデルクラスの Index に 1〜 を設定する。

サンプルを以下に作ってみましたので参考にしてみてください。

• amay077/RadioImageSample: Xamarin.Forms で、ラジオボタンのように Image の画像を On / Off するサンプル

Comments

[ze_ze_ze]

回答ありがとうございます。
わざわざサンプルまでありがとうございます。
返信遅れて申し訳ございません。
2点質問なんですが
①サンプルアプリがandroidでデバッグすると配置スキップされます。何が原因だと考えられますか？
②サンプルアプリではContentPageで全て作ってありますが、私はGridに均等に配置したImageを使ってやりたいのですが下の部分の変え方がわかりません。(Grid.Resourcesというものは無いと思うので。。。)
<ContentPage>
<ContentPage.Resources>
<ResourceDictionary>
<cv:IndexToImageConverter x:Key="imgConv" />
</ResourceDictionary>
</ContentPage.Resources>
</ContentPage>

もしやり方分かるようでしたら教えてください。
よろしくお願いします。

[ze_ze_ze]

①は解決しました。
構成マネージャーの配置のチェックが外れてただけでした。

[amay077]

②ですが、ContentPage なら <ContentPage.Resources> で、Grid でも書き方は変わらないです。
https://github.com/amay077/RadioImageSample/blob/master/RadioImageSample/GridSamplePage.xaml に追加してみました。

[ze_ze_ze]

迅速な回答ありがとうございます。
実は作ったものをApplicationに読み込むときにScrollViewのChildrenに設置していたため大枠をGridにしていましたがContentPageでもその中に配置できますか？
何度も質問申し訳ございません。
new RadioImageSamplePage {
HorizontalOptions = LayoutOptions.FillAndExpand,
BackgroundColor = Color.FromHex("FFFF00"),

},
今まではこのように配置していましたがContentPageだとエラーがでました。

[amay077]

大枠が Grid だとムリかなと。XAML の大枠を ContentView にすると「ContentView.Resources」が使えます。 ContentView の使い方は http://www.c-sharpcorner.com/article/creating-user-controls-in-xamarin-forms/ が参考になります。

[ze_ze_ze]

後すいません。
もう一つだけ質問で今一つのimageでラジオボタンのようにしていますが、三つともimageを変えたい場合はどうすればよいでしょうか？
色々いじってみましたがどこをいじったらよいか分かりませんでした。
質問ばかりで申し訳ございません。
よろしくお願いいたします。

[amay077]

どの画像を使うかは IndexToImageConverter で制御しているので、３つそれぞれ ON/OFF で異なる画像を使うなら、 IndexToImageConverter1, IndexToImageConverter2, IndexToImageConverter3 を作って、それぞれの on/off 画像のところを別々にします。
で、Image1 に IndexToImageConverter1 を、 Image2 に IndexToImageConverter2 を設定する、という感じでしょうね。

[ze_ze_ze]

ありがとうございました。
無事やりたいことが出来ました。
何度も何度も本当にありがとうございます。