チェックボックス

[アーティクル]
06/02/2023

チェックボックスは、アクション項目の選択や選択解除を行うときに使います。また、チェックボックスはユーザーが選択する単一の項目や複数の項目の一覧に対して使うことができます。コントロールには 3 つの選択状態 (選択されていない、選択されている、不確定) があります。不確定状態は、選択されていない状態と選択されている状態の両方がサブ選択肢のコレクションに含まれている場合に使います。

チェックボックスの状態の例

これは適切なコントロールですか?

1 つのチェックボックスを使うのは、"このアカウントを記憶する" ログインシナリオやサービス契約の条項など、はい/いいえの二者択一の選択肢の場合です。

個人的な選択のための 1 つのチェックボックス

二者択一の場合、チェックボックスとトグルスイッチとの主な違いは、チェックボックスが状態を管理し、トグルスイッチが動作を管理する点です。チェックボックスによる操作はコミットを遅らせることができますが (たとえばフォームの送信の一部として)、トグルスイッチによる操作は直ちにコミットしなければなりません。また、複数の選択ができるのは、チェックボックスだけです。

複数のチェックボックスを使うのは、複数選択シナリオの場合 (ユーザーが相互排他的でない選択肢のグループから 1 つ以上の項目を選ぶ場合) です。

ユーザーがオプションの任意の組み合わせを選べる場合は、チェックボックスのグループを作成します。

チェックボックスでの複数のオプションの選択

オプションをグループ化できる場合は、不確定状態のチェックボックスを使ってグループ全体を表すことができます。グループ内のすべてでなく一部のサブ項目をユーザーが選択する場合は、チェックボックスの不確定の状態を使います。

混在する選択を示すために使用されるチェックボックス

チェックボックス コントロールとラジオボタン コントロールの両方を使うと、ユーザーはオプションの一覧から選択できます。チェックボックスを使うと、ユーザーはオプションの組み合わせを選択できます。これに対し、ラジオボタンを使うと、ユーザーは相互排他的なオプションの中から 1 つのオプションを選択できます。 1 つ以上のオプションがあっても、選択できるのが 1 つだけの場合は、代わりにラジオボタンを使います。

推奨事項

チェックボックスの用途と現在の状態が明確であることを確認します。
チェックボックスのテキストコンテンツは 2 行以内にします。
チェックマークをオンにすると true、チェックマークをオフにすると false に設定されるようにチェックボックスのラベルを記述します。
ブランドのガイドラインで別のフォントが指示されていない限り、既定のフォントを使います。
テキストコンテンツが動的な場合、コントロールのサイズがどのように変わり、周囲の視覚効果にどのような影響が生じるかを検討してください。
相互排他的な複数のオプションから選ぶ場合は、オプションボタンを使うことを検討してください。
2 つのチェックボックスのグループを並べて配置しないようにします。グループを分けるには、グループラベルを使います。
チェックボックスをオン/オフコントロールとして使用したり、コマンドを実行したりしないでください。代わりにトグルスイッチを使用します。
ダイアログボックスなどの他のコントロールを表示するためにチェックボックスを使わないでください。
すべてではなく一部のサブ選択のためにオプションが設定されていることを示すには、不確定の状態を使います。
不確定の状態を使う場合は、下位のチェックボックスを使って、どのオプションが選択され、どのオプションが選択されていないかがわかるようにします。ユーザーにサブ選択肢がわかりやすいように UI を設計します。
不確定の状態を、第 3 の状態を示すために使わないでください。不確定の状態は、すべてではなく一部のサブ選択のためにオプションが設定されていることを示すために使います。そのため、ユーザーが不確定の状態を直接設定できないようにします。良くない例を示すために、次のチェックボックスでは不確定の状態を使って "中辛" を示しています。

このような場合は、次の 3 つのオプションがあるラジオボタングループを使います。

UWP と WinUI 2

重要

この記事の情報と例は、Windows アプリ SDKと WinUI 3 を使用するアプリ向けに最適化されていますが、一般に WinUI 2 を使用する UWP アプリに適用されます。プラットフォーム固有の情報と例については、UWP API リファレンスを参照してください。

このセクションには、UWP または WinUI 2 アプリでコントロールを使用するために必要な情報が含まれています。

このコントロールの API は、Windows.UI.Xaml.Controls 名前空間に存在します。

UWP API:CheckBox クラス、 Checked イベント、 IsChecked プロパティ、 Content プロパティ
WinUI 2 ギャラリーアプリを開き、CheckBox の動作を確認します。 WinUI 2 ギャラリー アプリには、ほとんどの WinUI 2 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソースコードを取得します。

最新の WinUI 2 を使用して、すべてのコントロールの最新のスタイルとテンプレートを取得することをお勧めします。 WinUI 2.2 以降には、丸い角を使用するこのコントロール用の新しいテンプレートが含まれています。詳しくは、「角の半径」をご覧ください。

チェックボックスの作成

重要な API: CheckBox クラス、 Checked イベント、 IsChecked プロパティ、 Content プロパティ

WinUI 3 ギャラリーアプリを開き、CheckBox の動作を確認します。

WinUI 3 ギャラリー アプリには、ほとんどの WinUI 3 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソースコードを取得します。

単純なチェックボックスを作成する

チェックボックスにラベルを割り当てるには、Content プロパティを設定します。ラベルはチェックボックスの横に表示されます。

次の XAML は、フォームの送信前にサービス条件に同意するために使う単一のチェックボックスを作成します。

<CheckBox x:Name="termsOfServiceCheckBox"
          Content="I agree to the terms of service."/>

同じチェックボックスをコードで作成すると、次のようになります。

CheckBox termsOfServiceCheckBox = new CheckBox();
termsOfServiceCheckBox.Content = "I agree to the terms of service.";

IsChecked にバインドする

チェックボックスがオンになっているかオフになっているかを判断するには、IsChecked プロパティを使います。 IsChecked プロパティの値を他のバイナリ値にバインドできます。ただし、IsChecked は Null 許容のブール値であるため、キャストまたは値コンバーターを使ってブール型プロパティにバインドする必要があります。これは、使用している実際のバインディングの種類によって異なります。考えられる各型については、次の例を参照してください。

次の例では、サービス条件に同意するためのチェックボックスの IsChecked プロパティが送信ボタンの IsEnabled プロパティにバインドされます。送信ボタンは、サービス条件に同意した場合にのみ有効です。

x:Bind の使用

注意

ここでは、関連するコードのみを示します。データバインディングについて詳しくは、「データバインディングの概要」をご覧ください。特定の {x:Bind} 情報 (キャストなど) については、{x:Bind} マークアップ拡張で詳しく説明されています。

<StackPanel Grid.Column="2" Margin="40">
    <CheckBox x:Name="termsOfServiceCheckBox" Content="I agree to the terms of service."/>
    <Button Content="Submit"
            IsEnabled="{x:Bind (x:Boolean)termsOfServiceCheckBox.IsChecked, Mode=OneWay}"/>
</StackPanel>

チェックボックスを不確定状態にもできる場合は、バインディングの FallbackValue プロパティを使用して、この状態を表すブール値を指定します。この場合、[送信] ボタンも有効にしないようにします。

<Button Content="Submit"
        IsEnabled="{x:Bind (x:Boolean)termsOfServiceCheckBox.IsChecked, Mode=OneWay, FallbackValue=False}"/>

x:Bind または Binding の使用

注意

ここでは、{x:Bind} を使用して関連するコードのみを表示します。 {Binding} の例では、{x:Bind} を {Binding} に置き換えます。データバインディング、値コンバーター、{x:Bind} と {Binding} マークアップ拡張機能の相違点について詳しくは、「データバインディングの概要」をご覧ください。

...
<Page.Resources>
    <local:NullableBooleanToBooleanConverter x:Key="NullableBooleanToBooleanConverter"/>
</Page.Resources>

...

<StackPanel Grid.Column="2" Margin="40">
    <CheckBox x:Name="termsOfServiceCheckBox" Content="I agree to the terms of service."/>
    <Button Content="Submit"
            IsEnabled="{x:Bind termsOfServiceCheckBox.IsChecked,
                        Converter={StaticResource NullableBooleanToBooleanConverter}, Mode=OneWay}"/>
</StackPanel>

public class NullableBooleanToBooleanConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value is bool?)
        {
            return (bool)value;
        }
        return false;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        if (value is bool)
            return (bool)value;
        return false;
    }
}

Click イベントと Checked イベントを処理する

チェックボックスの状態が変化したときにアクションを実行するには、Click イベント、または Checked イベントと Unchecked イベントを処理できます。

Click イベントはオンの状態が変化するたびに発生します。 Click イベントを処理する場合は、IsChecked プロパティを使ってチェックボックスの状態を確認します。

Checked イベントと Unchecked イベントは別々に発生します。これらのイベントを処理する場合は、チェックボックスの状態の変化に応じて両方のイベントを処理する必要があります。

次の例では、Click イベントの処理、および Checked イベントと Unchecked イベントの処理を示します。

同じイベントハンドラーを複数のチェックボックスで共有できます。この例では、ピザのトッピングを選ぶための 4 つのチェックボックスを作成します。 4 つのチェックボックスで同じ Click イベントハンドラーを共有して、選んだトッピングの一覧を更新します。

<StackPanel Margin="40">
    <TextBlock Text="Pizza Toppings"/>
    <CheckBox Content="Pepperoni" x:Name="pepperoniCheckbox"
              Click="toppingsCheckbox_Click"/>
    <CheckBox Content="Beef" x:Name="beefCheckbox"
              Click="toppingsCheckbox_Click"/>
    <CheckBox Content="Mushrooms" x:Name="mushroomsCheckbox"
              Click="toppingsCheckbox_Click"/>
    <CheckBox Content="Onions" x:Name="onionsCheckbox"
              Click="toppingsCheckbox_Click"/>

    <!-- Display the selected toppings. -->
    <TextBlock Text="Toppings selected:"/>
    <TextBlock x:Name="toppingsList"/>
</StackPanel>

Click イベントのイベントハンドラーを次に示します。チェックボックスをクリックするたびに、チェックボックスを調べて、チェックされているチェックボックスを確認し、選択したトッピングの一覧を更新します。

private void toppingsCheckbox_Click(object sender, RoutedEventArgs e)
{
    string selectedToppingsText = string.Empty;
    CheckBox[] checkboxes = new CheckBox[] { pepperoniCheckbox, beefCheckbox,
                                             mushroomsCheckbox, onionsCheckbox };
    foreach (CheckBox c in checkboxes)
    {
        if (c.IsChecked == true)
        {
            if (selectedToppingsText.Length > 1)
            {
                selectedToppingsText += ", ";
            }
            selectedToppingsText += c.Content;
        }
    }
    toppingsList.Text = selectedToppingsText;
}

不確定の状態を使用する

CheckBox コントロールは ToggleButton を継承します。また、このコントロールには 3 つの状態を指定できます。

State	プロパティ	値
オン	IsChecked	true
オフ	IsChecked	false
不確定	IsChecked	null

不確定の状態を報告するチェックボックスの場合、IsThreeState プロパティを true に設定する必要があります。

次の例では、[すべて選択] チェックボックスの IsThreeState プロパティを true に設定します。 [すべて選択] チェックボックスは、すべての子要素がオンになっている場合はオンになり、すべての子要素がオフになっている場合はオフになり、それ以外の場合は不確定の状態になります。

<StackPanel>
    <CheckBox x:Name="OptionsAllCheckBox" Content="Select all" IsThreeState="True"
              Checked="SelectAll_Checked" Unchecked="SelectAll_Unchecked"
              Indeterminate="SelectAll_Indeterminate"/>
    <CheckBox x:Name="Option1CheckBox" Content="Option 1" Margin="24,0,0,0"
              Checked="Option_Checked" Unchecked="Option_Unchecked" />
    <CheckBox x:Name="Option2CheckBox" Content="Option 2" Margin="24,0,0,0"
              Checked="Option_Checked" Unchecked="Option_Unchecked" IsChecked="True"/>
    <CheckBox x:Name="Option3CheckBox" Content="Option 3" Margin="24,0,0,0"
              Checked="Option_Checked" Unchecked="Option_Unchecked" />
</StackPanel>

private void Option_Checked(object sender, RoutedEventArgs e)
{
    SetCheckedState();
}

private void Option_Unchecked(object sender, RoutedEventArgs e)
{
    SetCheckedState();
}

private void SelectAll_Checked(object sender, RoutedEventArgs e)
{
    Option1CheckBox.IsChecked = Option2CheckBox.IsChecked = Option3CheckBox.IsChecked = true;
}

private void SelectAll_Unchecked(object sender, RoutedEventArgs e)
{
    Option1CheckBox.IsChecked = Option2CheckBox.IsChecked = Option3CheckBox.IsChecked = false;
}

private void SelectAll_Indeterminate(object sender, RoutedEventArgs e)
{
    // If the SelectAll box is checked (all options are selected),
    // clicking the box will change it to its indeterminate state.
    // Instead, we want to uncheck all the boxes,
    // so we do this programatically. The indeterminate state should
    // only be set programatically, not by the user.

    if (Option1CheckBox.IsChecked == true &&
        Option2CheckBox.IsChecked == true &&
        Option3CheckBox.IsChecked == true)
    {
        // This will cause SelectAll_Unchecked to be executed, so
        // we don't need to uncheck the other boxes here.
        OptionsAllCheckBox.IsChecked = false;
    }
}

private void SetCheckedState()
{
    // Controls are null the first time this is called, so we just
    // need to perform a null check on any one of the controls.
    if (Option1CheckBox != null)
    {
        if (Option1CheckBox.IsChecked == true &&
            Option2CheckBox.IsChecked == true &&
            Option3CheckBox.IsChecked == true)
        {
            OptionsAllCheckBox.IsChecked = true;
        }
        else if (Option1CheckBox.IsChecked == false &&
            Option2CheckBox.IsChecked == false &&
            Option3CheckBox.IsChecked == false)
        {
            OptionsAllCheckBox.IsChecked = false;
        }
        else
        {
            // Set third state (indeterminate) by setting IsChecked to null.
            OptionsAllCheckBox.IsChecked = null;
        }
    }
}

サンプルコードを入手する

WinUI ギャラリーのサンプル - 対話型形式ですべての XAML コントロールを表示します。

チェックボックス

これは適切なコントロールですか?

推奨事項

UWP と WinUI 2

チェックボックスの作成

単純なチェックボックスを作成する

IsChecked にバインドする

x:Bind の使用

x:Bind または Binding の使用

Click イベントと Checked イベントを処理する

不確定の状態を使用する

サンプルコードを入手する

フィードバック

その他のリソース

チェック ボックス

これは適切なコントロールですか?

推奨事項

UWP と WinUI 2

チェック ボックスの作成

単純なチェック ボックスを作成する

IsChecked にバインドする

x:Bind の使用

x:Bind または Binding の使用

Click イベントと Checked イベントを処理する

不確定の状態を使用する

サンプル コードを入手する

関連記事

フィードバック

その他のリソース

チェックボックス

チェックボックスの作成

単純なチェックボックスを作成する

サンプルコードを入手する