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

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

準備
前回のSwitchの実装
SwitchBindablePageの作成
SwitchBindablePage.xaml全体
実行

準備

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

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<MenuDto>();
            items.Add(new MenuDto("SwitchPage", "Switchの使い方", "mail.png"));
            items.Add(new MenuDto("SwitchBindablePage", "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());
            }
            else if (item.Title == "SwitchBindablePage")
            {
                Navigation.PushAsync(new SwitchBindablePage());
            }
        }
    }
}

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<MenuDto>();

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

items.Add(new MenuDto("SwitchBindablePage", "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());

}

else if (item.Title == "SwitchBindablePage")

{

Navigation.PushAsync(new SwitchBindablePage());

}

前回のSwitchの実装

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

<Switch IsToggled="True"
        Toggled="Switch_Toggled"
        HorizontalOptions="Center"/>
<Image Source="mail.png"
       x:Name="MyImage"
       HorizontalOptions="Center"/>

<Switch IsToggled="True"

Toggled="Switch_Toggled"

HorizontalOptions="Center"/>

<Image Source="mail.png"

x:Name="MyImage"

HorizontalOptions="Center"/>

SwitchBindablePageの作成

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

<Switch IsToggled="True"
        HorizontalOptions="Center"
        x:Name="MySwitch"/>

<Switch IsToggled="True"

HorizontalOptions="Center"

x:Name="MySwitch"/>

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

<Image Source="mail.png"
       HorizontalOptions="Center"
       IsVisible="{Binding Source={x:Reference MySwitch},Path=IsToggled}"/>

<Image Source="mail.png"

HorizontalOptions="Center"

IsVisible="{Binding Source={x:Reference MySwitch},Path=IsToggled}"/>

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

SwitchBindablePage.xaml全体

<?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.SwitchBindablePage">
    <ContentPage.Content>
        <StackLayout>
            <!--イベント削除　スイッチに名前を付ける-->
            <Switch IsToggled="True"
                    HorizontalOptions="Center"
                    x:Name="MySwitch"/>

            <!--Imageの名前不要 IsVisibleをバインド
            Referenceにコントロール
            Pathにプロパティ
            コードビハインド不要-->
            <Image Source="mail.png"
                   HorizontalOptions="Center"
                   IsVisible="{Binding Source={x:Reference MySwitch},Path=IsToggled}"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>