CheckBox

サンプル アプリを参照する

.NET マルチプラットフォーム アプリ UI (.NET MAUI) の CheckBox は、チェックまたは空にできるボタンのタイプです。 チェックボックスがチェックされると、オンと見なされます。 チェックボックスが空の場合は、オフと見なされます。

CheckBox は次の特性を定義します。

• bool 型の IsChecked は、CheckBox がチェックされているかどうかを示します。 このプロパティの既定のバインディング モードは TwoWay です。
• Color 型の Color は、CheckBox の色を示します。

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

CheckBox は、ユーザー操作またはアプリケーションによる IsChecked プロパティの設定によって、IsChecked プロパティが変更されたときに発生する CheckedChanged イベントを定義します。 CheckedChanged イベントに付随する CheckedChangedEventArgs オブジェクトには、Value という名前の bool 型のプロパティが 1 つあります。 イベントが発生すると、Value プロパティの値が IsChecked プロパティの新しい値に設定されます。

チェックボックスを作成する

次の例は、XAML で CheckBox をインスタンス化する方法を示しています。

<CheckBox />

この XAML で、次のスクリーンショットのようになります。

既定では、CheckBox は空です。 CheckBox は、ユーザー操作、または IsChecked プロパティを true に設定することによってチェックすることができます。

<CheckBox IsChecked="true" />

この XAML で、次のスクリーンショットのようになります。

あるいは、CheckBox をコードで作成することもできます。

CheckBox checkBox = new CheckBox { IsChecked = true };

チェックボックスの状態の変化に対応する

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

<CheckBox CheckedChanged="OnCheckBoxCheckedChanged" />

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

void OnCheckBoxCheckedChanged(object sender, CheckedChangedEventArgs e)
{
    // Perform required operation after examining e.Value
}

sender の引数は、このイベントを発生させる CheckBox です。 これを使用して、CheckBox オブジェクトにアクセスしたり、同じ CheckedChanged イベント ハンドラーを共有する複数の CheckBox オブジェクトを区別したりできます。

または、CheckedChanged イベントのイベント ハンドラーをコードに登録することもできます。

CheckBox checkBox = new CheckBox { ... };
checkBox.CheckedChanged += (sender, e) =>
{
    // Perform required operation after examining e.Value
};

チェックボックスのデータ バインド

CheckedChanged イベント ハンドラーは、データ バインディングとトリガーを使用して、チェックまたは空の CheckBox に応答することで削除できます。

<CheckBox x:Name="checkBox" />
<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 checkBox}, Path=IsChecked}"
                     Value="true">
            <Setter Property="FontAttributes"
                    Value="Italic, Bold" />
            <Setter Property="FontSize"
                    Value="18" />
        </DataTrigger>
    </Label.Triggers>
</Label>

この例では、Label はデータ トリガーでバインディング式を使用して、CheckBox の IsChecked プロパティを監視します。 このプロパティが true になると、Label の FontAttributes プロパティと FontSize のプロパティが変更されます。 IsChecked プロパティが false に戻ると、Label の FontAttributes プロパティと FontSize プロパティは初期状態にリセットされます。

次のスクリーンショットは、CheckBox がチェックされている場合の Label の書式設定を示しています。

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

チェックボックスを無効にする

アプリケーションは、チェックされている CheckBox が有効な操作ではない状態になることがあります。 このような場合は、その IsEnabled プロパティを false に設定することで、CheckBox を無効にすることができます。

チェックボックスの外観

CheckBox が View クラスから継承するプロパティに加え、CheckBox は色を Color に設定する Color プロパティも定義します。

<CheckBox Color="Red" />

次のスクリーンショットは、チェックされた一連の CheckBox オブジェクトを示しています。各オブジェクトの Color プロパティは異なる Color に設定されています。

チェックボックスの表示状態

CheckBox には IsCheckedVisualState があり、チェックされたときに CheckBox への視覚的な変更を開始するために使用できます。

次の XAML の例は、IsChecked 状態の視覚的な状態を定義する方法を示しています。

<CheckBox ...>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal">
                <VisualState.Setters>
                    <Setter Property="Color"
                            Value="Red" />
                </VisualState.Setters>
            </VisualState>

            <VisualState x:Name="IsChecked">
                <VisualState.Setters>
                    <Setter Property="Color"
                            Value="Green" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</CheckBox>

この例では、IsCheckedVisualState は、CheckBox がチェックされると、その Color プロパティが緑色に設定されることを指定します。 NormalVisualState は、CheckBox が通常の状態にある場合、その Color プロパティが赤に設定されることを指定します。 したがって、全体的な効果として、CheckBox が空の場合は赤になり、チェックされている場合は緑になります。

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