Xamarin.Formsでスマホアプリ開発

C#Xamarin.Formsでスマホ開発#23 コントロールをデータバインドする方法

Udemyで公開しているC#のコースを1つ無料でプレゼントしています。こちらから確認してください。

前回のSwitchのレクチャーでスイッチがONのときにImageを表示し,OFFのときにImageを非表示にする例を解説しました。その時はSwitchのToggledイベントをコードビハインド側に書いて,その中でImageのIsVisibleを変更しましたが,データバインドという機能を使うことで,コードビハインド側に何も書かなくても,Xamlだけで完結させることができます。

準備

今回はSwitchBindablePageというコンテンツページを作成して検証していきたいと思います。ここまで順番に解説をよんでいただいている方は,SwitchBindablePage という新規のコンテンツページを作って,ControlsPageから呼び出せるようにしてください。ここから初めて読んでいる方は,Xamarin.Formsのデフォルトで作成されるMainPageにSwitchBindablePageの実装をして問題ありません。

前回のSwitchの実装

前回のSwithの実装をおさらいしましょう。Toggledをコードビハインド側に実装し,その中でImageのVisibleを変更していました。

SwitchBindablePageの作成

今回はSwitchBindablePageという新規の画面を作り前回のSwitchPageの実装を記述します。その後,SwitchのToggledのイベントを削除します。その代わり,Switchに名前を付けます。ここではMySwitchにしています。

Switch側の変更は以上です。Imageには名前を付けていましたが,コードビハインド側で操作しないため削除します。次にIsVisibleに次のように記述して,データバインディングします。

少し長いですが,Binding Source={x:Reference MySwitch}の部分に,バインドしたいコントロールを指定します。今回はMySwitchになります。つづけてPath=IsToggledの部分にバインドしたいコントロールのプロパティを指定します。今回はIsToggledになります。これで,ImageのIsVisibleにMySwitchのIsToggledがバインドされました。IsToggledの変更に合わせて,ImageのVisibleが変更されます。

SwitchBindablePage.xaml全体

実行

実行すると,前回のSwitchのときと同じようにスイッチのONOFFに合わせてImageの表示状態が変わります。コードビハインド側に記述しなくても実装できていることが確認できます。

コントロールのバインドする場合はSwitchに限らず,このパターンでバインドします。x:Referenceにコントロール,Pathにプロパティと覚えておいてください。

Udemyで公開しているC#のコースを1つ無料でプレゼントしています。こちらから確認してください。