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

C#Xamarin.Formsでスマホ開発#22 Switchの使い方を解説

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

Switchとは?

スイッチとは,WindowsFormsで言うところのチェックボックスのような感じですね。ONかOFFを設定するコントロールになります。

Switchの書き方

Switchの動作を検証するためにSwitchPageというコンテンツページを作成します。前回のレクチャーで作成したControlsPageから呼び出せるようにしましょう。ここから初めて読む人は,Xamarin.FormsのデフォルトのMainPageにSwitchPageの実装を行っても問題ありません。

ControlsPageには次のようにSwitchPageを呼び出せるようにMenuDtoを作成して,タップイベントでページを表示するように実装しておきます。

SwitchPageの作成

Pagesフォルダーに新規追加でSwitchPageという名前のコンテンツページを作成してください。作成されたらデフォルトのラベルを削除して,次のように記述します。SwitchのIsToggledはチェック状態がONで表示したい場合はTrue,OFFならFalseを設定します。Toggledイベントは,Switchのチェック状態が変更されたときにイベントが通知されます。HorizontalOptionsは中央に表示したほうが見栄えがいいと思うのでそうしているだけです。

Switchだけの実装でもいいのですが,それだけだとあまり面白くないので,Imageも一つ追加しておきます。Switchのチェック状態に合わせてアイコンの表示非表示を切り替えるという実装にしたいと思います。ImageのSourceにはファイルのパスを設定します。今回はいつも使っているmail.pngを使います。画像はインターネットなどで適当なものを使ってください。あとでこのImageはコードビハインド側から設定を操作したいので,NameもMyImageという名前で設定しておきます。

コードビハインド側の実装

SwitchPageのコードビハインド側に作成されたSwitch_Toggledイベントに実装します。イベント引数の「e」のValueには,変更後のチェック状態が入っているのでこの状態でImageのVisibleの状態を変更することで,アイコンの表示非表示を設定します。

実行

この状態で実行してみましょう。チェックをONにするとアイコンが表示され,OFFにするとアイコンが非表示になると思います。

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