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

Switchとは？
Switchの書き方
SwitchPageの作成
コードビハインド側の実装
実行

Switchとは？

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

Switchの書き方

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

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

using System.Collections.Generic;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using XSample.Objects;

namespace XSample.Pages
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class ControlsPage : ContentPage
    {
        public ControlsPage ()
        {
            InitializeComponent ();

            var items = new List();
            items.Add(new MenuDto("SwitchPage", "Switchの使い方", "mail.png"));
            MyListView.ItemsSource = items;
        }

        private void MyListView_ItemTapped(object sender, ItemTappedEventArgs e)
        {
            var item = e.Item as MenuDto;
            if (item.Title == "SwitchPage")
            {
                Navigation.PushAsync(new SwitchPage());
            }
        }
    }
}

using System.Collections.Generic;

using Xamarin.Forms;

using Xamarin.Forms.Xaml;

using XSample.Objects;

namespace XSample.Pages

{

[XamlCompilation(XamlCompilationOptions.Compile)]

public partial class ControlsPage : ContentPage

{

public ControlsPage ()

{

InitializeComponent ();

var items = new List();

items.Add(new MenuDto("SwitchPage", "Switchの使い方", "mail.png"));

MyListView.ItemsSource = items;

}

private void MyListView_ItemTapped(object sender, ItemTappedEventArgs e)

{

var item = e.Item as MenuDto;

if (item.Title == "SwitchPage")

{

Navigation.PushAsync(new SwitchPage());

}

SwitchPageの作成

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

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

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XSample.Pages.SwitchPage">
    <ContentPage.Content>
        <StackLayout>
            <Switch IsToggled="True"
                    Toggled="Switch_Toggled"
                    HorizontalOptions="Center"/>
            <Image Source="mail.png"
                   x:Name="MyImage"
                   HorizontalOptions="Center"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

x:Class="XSample.Pages.SwitchPage">

<ContentPage.Content>

<Switch IsToggled="True"

Toggled="Switch_Toggled"

HorizontalOptions="Center"/>

<Image Source="mail.png"

x:Name="MyImage"

HorizontalOptions="Center"/>

</StackLayout>

</ContentPage.Content>

</ContentPage>

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

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

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace XSample.Pages
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class SwitchPage : ContentPage
    {
        public SwitchPage ()
        {
            InitializeComponent ();
        }

        private void Switch_Toggled(object sender, ToggledEventArgs e)
        {
            MyImage.IsVisible = e.Value;
        }
    }
}