[Xuni:CheckBox] チェックボックスの値をラベルのタップで変更する方法 (Xamarin.Forms)

文書番号 : 81827     文書種別 : 使用方法     登録日 : 2016/10/07     最終更新日 : 2016/10/07
文書を印刷する
対象製品
Xuni
詳細
XuniのCoreライブラリに含まれるXuniCheckBoxを利用すると、ブール値の入出力に利用できるチェックボックスを表示できます。XuniCheckBoxは、チェックボックス本体の色や大きさなどを変更できます。

また、チェックボックスの値はタップしてONとOFFを切り替えます。チェックボックスの脇に表示したラベルでタッチジェスチャーを認識して、チェックボックスの値を変更する処理を設定すれば、文字列をタッチした場合でもチェックボックスの値を変更することができます。

サンプルコード
C#(Xamarin.Forms)
public class XuniPage1 : ContentPage
{
    public XuniPage1()
    {

        // ON時のラベルのスタイル
        var styleOn = new Style(typeof(Label))
        {Setters = { new Setter { Property = Label.TextColorProperty, Value = Color.Red }}};
        // OFF時のラベルのスタイル
        var styleOff = new Style(typeof(Label))
        {Setters = { new Setter { Property = Label.TextColorProperty, Value = Color.Green }}};

        // チェックボックスの脇に表示するラベルの定義
        Label labelCap = new Label { Text = "ONの状態", Margin= new Thickness(0,20,0,0) };
        // チェックボックスを定義
        XuniCheckBox checkbox = new XuniCheckBox
        {
            IsChecked = true, // 初期設定はOn
            Scale = 2.0d,  // 2倍の大きさ
            BackgroundColor = Color.Blue, //背景色設定
            Margin = new Thickness(20, 20,20, 20), // マージン設定
        };
        // チェックボックスの値が変更された場合の処理
        checkbox.Checked += (object sender, EventArgs e) =>
        {
            // チェックボックスの値の変更時にラベルの文字列を変更
            labelCap.Text = (checkbox.IsChecked) ? "ONの状態" : "OFFの状態";
            // 表示する文字列のスタイルを切り替える
            labelCap.Style = (checkbox.IsChecked) ? styleOn : styleOff;

        };
        // ラベルがタップ操作を認識するように設定
        var tgr = new TapGestureRecognizer();
        labelCap.GestureRecognizers.Add(tgr);
        // ラベルをタップした場合の処理
        tgr.Tapped += (object sender, EventArgs e) =>
        {
            // チェックボックスの値を切り替える
            checkbox.IsChecked = (checkbox.IsChecked) ? false : true;
        };

        // スタックレイアウトで配置
        Content = new StackLayout
        {
            VerticalOptions = LayoutOptions.Center,
            Children = {
                new StackLayout
                {
                    Orientation = StackOrientation.Horizontal,
                    HorizontalOptions = LayoutOptions.Start,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    Children = {checkbox, labelCap },
                },
            },
        };
    }
}


Xuni > 技術情報 > ドキュメント > CheckBox
関連情報