英語で読む

次の方法で共有


Switch

サンプルを参照します。 サンプルを参照する

.NET マルチプラットフォーム アプリ UI (.NET MAUI) Switch コントロールは、ユーザーが操作してオンとオフの状態を切り替えることができる水平トグル ボタンで、boolean 値で表されます。

次のスクリーンショットは、オンとオフの切り替え状態の Switch コントロールを示しています。

オン/オフ状態のスイッチのスクリーンショット。

Switch コントロールでは、次のプロパティが定義されます。

  • IsToggled は、Switch がオンかどうかを示す boolean 値です。 このプロパティの既定値は false です。
  • OnColorColor で、Switch がトグル状態、またはオンの状態で、どのようにレンダリングされるかに影響します。
  • ThumbColor はスイッチのつまみの Color です。

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングのターゲットにすることができ、スタイルを設定できます。

Switch コントロールは、ユーザー操作によって、またはアプリケーションが IsToggled プロパティを設定するときに、IsToggled プロパティが変更されると発生する Toggled イベントを定義します。 Toggled イベントに付随する ToggledEventArgs オブジェクトには、bool 型の Value という名前の単一のプロパティがあります。 イベントが発生すると、Value プロパティの値に IsToggled プロパティの新しい値が反映されます。

スイッチを作成する

Switch は XAML でインスタンス化できます。 その IsToggled プロパティを設定して、Switch を切り替えることができます。 既定では、IsToggled プロパティは false です。 次の例は、省略可能な IsToggled プロパティ セットを使用して XAML で Switch をインスタンス化する方法を示しています。

<Switch IsToggled="true"/>

Switch はコードで作成することもできます。

Switch switchControl = new Switch { IsToggled = true };

外観を切り替える

View クラスから Switch が継承するプロパティに加えて、SwitchOnColorThumbColor プロパティも定義します。 OnColor プロパティを設定してオン状態に切り替えたときの Switch の色を定義でき、ThumbColor プロパティを設定してスイッチのつまみの Color を定義できます。 次の例は、これらのプロパティ セットを使用して XAML で Switch をインスタンス化する方法を示しています。

<Switch OnColor="Orange"
        ThumbColor="Green" />

プロパティは、コード内で Switch を作成するときに設定することもできます。

Switch switch = new Switch { OnColor = Colors.Orange, ThumbColor = Colors.Green };

次のスクリーンショットは、OnColor プロパティと ThumbColor プロパティが設定された、オンとオフの切り替え状態の Switch を示しています。

色が変更されたオン/オフ状態のスイッチのスクリーンショット。

スイッチ状態の変更に対応する

ユーザー操作またはアプリケーションによる IsToggled プロパティの設定によって IsToggled プロパティが変更されると、Toggled イベントが発生します。 このイベントのイベント ハンドラーを登録して、変更に応答できます。

<Switch Toggled="OnToggled" />

分離コード ファイルには、Toggled イベントのハンドラーが含まれます。

void OnToggled(object sender, ToggledEventArgs e)
{
    // Perform an action after examining e.Value
}

イベント ハンドラーの sender 引数は、このイベントを発生する Switch です。 sender プロパティを使用して、Switch オブジェクトにアクセスしたり、同じ Toggled イベント ハンドラーを共有する複数の Switch オブジェクトを区別したりできます。

Toggled イベント ハンドラーは、コードで割り当てることもできます。

Switch switchControl = new Switch {...};
switchControl.Toggled += (sender, e) =>
{
    // Perform an action after examining e.Value
};

スイッチをバインドするデータ

Toggled イベント ハンドラーは、データ バインディングと、Switch の切り替え状態の変化に応答するトリガーを使用することで削除できます。

<Switch x:Name="styleSwitch" />
<Label Text="Lorem ipsum dolor sit amet, elit rutrum, enim hendrerit augue vitae praesent sed non, lorem aenean quis praesent pede.">
    <Label.Triggers>
        <DataTrigger TargetType="Label"
                     Binding="{Binding Source={x:Reference styleSwitch}, Path=IsToggled}"
                     Value="true">
            <Setter Property="FontAttributes"
                    Value="Italic, Bold" />
            <Setter Property="FontSize"
                    Value="18" />
        </DataTrigger>
    </Label.Triggers>
</Label>

この例では、LabelDataTrigger でバインド式を使用し、styleSwitch という名前の SwitchIsToggled プロパティを監視します。 このプロパティが true になると、LabelFontAttributes および FontSize プロパティが変更されます。 IsToggled プロパティが false に戻ると、LabelFontAttributesFontSize プロパティは初期状態にリセットされます。

トリガーの詳細については、「 のトリガー」を参照してください。

表示状態を切り替える

Switch には、IsToggled プロパティが変更されたときにビジュアルの変更を開始するために使用できる OnOff の表示状態があります。

次の XAML の例は、OnOff の状態について表示状態を定義する方法を示しています。

<Switch IsToggled="True">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="On">
                <VisualState.Setters>
                    <Setter Property="ThumbColor"
                            Value="MediumSpringGreen" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Off">
                <VisualState.Setters>
                    <Setter Property="ThumbColor"
                            Value="Red" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Switch>

この例では、On VisualState は、IsToggled プロパティが true の場合に、ThumbColor プロパティがミディアム スプリング グリーンに設定されることを指定します。 Off VisualState は、IsToggled プロパティが false の場合に、ThumbColor プロパティが赤に設定されることを指定します。 したがって、全体的な効果は、Switch がオフの位置にあるときはつまみは赤で、Switch がオンの位置にあるとき、つまみはミディアム スプリング グリーンになります。

VisualState のスイッチをオンにしたスクリーンショット。VisualState のスイッチをオフにしたスクリーンショット。

表示状態の詳細については、「表示状態」をご覧ください。

スイッチを無効にする

アプリでは、Switch の切り替え操作が有効でない状態になる場合があります。 このような場合は、その IsEnabled プロパティを false に設定することで、Switch を無効にすることができます。 これにより、ユーザーは Switch を操作できなくなります。