スイッチ（トグルスイッチ）ボタンを配置したい

スイッチコントロール

１

スイッチ（トグルスイッチ）ボタンを配置したい 　

１

SwitchButtonクラスでは、複数の選択肢より任意の数を選択状態にできるスイッチ（トグルスイッチ）ボタンを表示させます。

スイッチ（トグルスイッチ）ボタンの選択肢はSwitchItemクラスで定義します。
項目の選択状態はSwitchItemクラスのSelectedプロパティから取得することが可能です。

また、SwitchButtonクラスにはつまみ部分、背景の画像を設定するためのメソッドが用意されており、独自のスイッチ（トグルスイッチ）ボタンを表示することが可能です。

SetThumbImageメソッドでコントロールのつまみ部分、SetTrachCheckedImageメソッドでチェック状態の背景、SetTrachUncheckedImageメソッドで非チェック状態の背景を設定します。

設定済みの画像を破棄したい場合、ResetThumbImageメソッド、ResetTrachCheckedImageメソッド、ResetTrachUncheckedImageメソッドを実行します。

下記のサンプルでは、ボタン押下でSwitchButtonに任意の画像を設定（または破棄）します。
スイッチボタンの選択状態が変わった際に、対象のボタン名と選択状態をメッセージとしてラベルに表示します。

【　実行イメージ　】
・画像の設定なし	・画像の設定あり

[ サンプルコード ]

Form Form1 {
    Width = 400;
    Height = 421;
    
    SwitchButton SwitchButton1 {
        X = 37;
        Y = 40;
        Width = 291;
        Height = 192;
        Border = $TRUE;
        
        SwitchItem SwitchItem1[4] {
            Height = 42;
            
            /* 選択状態が変わった場合に発生 */
            Function OnTouch(e){
                /* 配列の項目番号、選択状態を取得 */
                var idx = e.from.index;
                var select = e.from.selected;
                
                /* ラベルにメッセージを表示する */
                switch(idx){
                    case 0:
                        if(select == 1){
                            ^.^.Label1.Value = "ボタン１が選択されました。";
                        }else{
                            ^.^.Label1.Value = "ボタン１の選択が解除されました。";
                        }
                        break;
                    case 1:
                        if(select == 1){
                            ^.^.Label1.Value = "ボタン２が選択されました。";
                        }else{
                            ^.^.Label1.Value = "ボタン２の選択が解除されました。";
                        }
                        break;
                    case 2:
                        if(select == 1){
                            ^.^.Label1.Value = "ボタン３が選択されました。";
                        }else{
                            ^.^.Label1.Value = "ボタン３の選択が解除されました。";
                        }
                        break;
                    case 3:
                        if(select == 1){
                            ^.^.Label1.Value = "ボタン４が選択されました。";
                        }else{
                            ^.^.Label1.Value = "ボタン４の選択が解除されました。";
                        }
                        break;
                }
            }
        }
        SwitchItem1[0].Title = "ボタン１";
        SwitchItem1[1].Title = "ボタン２";
        SwitchItem1[2].Title = "ボタン３";
        SwitchItem1[3].Title = "ボタン４";
    }
    
    Label Label1 {
        X = 36;
        Y = 254;
        Width = 322;
        Height = 28;
        BgColor = $FFFFFF;
    }
    
    Button Button1 {
        X = 36;
        Y = 308;
        Width = 143;
        Height = 38;
        Title = "画像をセット";
        
        Function OnTouch( e ) {
            /* つまみ部分、背景に画像をセット */
            /* 任意の画像をご用意ください */
            ^.SwitchButton1.SetTrackCheckedImage("check.png");
            ^.SwitchButton1.SetTrackUncheckedImage("nocheck.png");
            ^.SwitchButton1.SetThumbImage("handle.png");
        }
    }
    
    Button Button2 {
        X = 216;
        Y = 308;
        Width = 143;
        Height = 38;
        Title = "画像を破棄";
        
        Function OnTouch( e ) {
            /* つまみ部分、背景にセットした画像を破棄 */
            ^.SwitchButton1.ResetThumbImage();
            ^.SwitchButton1.ResetTrackCheckedImage();
            ^.SwitchButton1.ResetTrackUncheckedImage();
        }
    }
}

管理番号：SwtHt_001


		Biz-Collections Bizの宝箱トップへ
		Biz/Browser HT・Biz/Browser SmartDevice・Biz/Browser AI TIPS集トップへ