トレーニング
モジュール
.NET MAUI でデータ バインディングを使用する UI を作成します。 - Training
データ バインディングを使用して UI を作成します。 UI は最新のデータに基づいて自動的に更新され、データは UI の変更に応じて更新されます。
このブラウザーはサポートされなくなりました。
Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。
.NET マルチプラットフォーム アプリ UI (.NET MAUI) Switch コントロールは、ユーザーが操作してオンとオフの状態を切り替えることができる水平トグル ボタンで、boolean
値で表されます。
次のスクリーンショットは、オンとオフの切り替え状態の Switch コントロールを示しています。
Switch コントロールでは、次のプロパティが定義されます。
IsToggled
は、Switch がオンかどうかを示す boolean
値です。 このプロパティの既定値は false
です。OnColor
は Color で、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 が継承するプロパティに加えて、Switch は OnColor
と ThumbColor
プロパティも定義します。 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>
この例では、Label は DataTrigger でバインド式を使用し、styleSwitch
という名前の Switch の IsToggled
プロパティを監視します。 このプロパティが true
になると、Label の FontAttributes
および FontSize
プロパティが変更されます。 IsToggled
プロパティが false
に戻ると、Label の FontAttributes
と FontSize
プロパティは初期状態にリセットされます。
トリガーの詳細については、「 のトリガー」を参照してください。
Switch には、IsToggled
プロパティが変更されたときにビジュアルの変更を開始するために使用できる On
と Off
の表示状態があります。
次の XAML の例は、On
と Off
の状態について表示状態を定義する方法を示しています。
<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 がオンの位置にあるとき、つまみはミディアム スプリング グリーンになります。
表示状態の詳細については、「表示状態」をご覧ください。
アプリでは、Switch の切り替え操作が有効でない状態になる場合があります。 このような場合は、その IsEnabled
プロパティを false
に設定することで、Switch を無効にすることができます。 これにより、ユーザーは Switch を操作できなくなります。
.NET MAUI に関するフィードバック
.NET MAUI はオープンソース プロジェクトです。 フィードバックを提供するにはリンクを選択します。
トレーニング
モジュール
.NET MAUI でデータ バインディングを使用する UI を作成します。 - Training
データ バインディングを使用して UI を作成します。 UI は最新のデータに基づいて自動的に更新され、データは UI の変更に応じて更新されます。