WinUI3のCheckBoxの使い方

WinUI3でCheckBoxを用いた様々な形のチェックボックスの使い方を解説します。

1. 基本形（2つの状態を持つチェックボックス）

実装例

チェックボックスの選択状態を表示する

##　1.　XAML（ボタンのUI定義）

<CheckBox x:Name="TwoStateCheckBox"
          Content="CheckBox1"
          Checked="Checked1"
          Unchecked="Unchecked1" />
<TextBlock x:Name="IsCheckedText" FontSize="16" />

解説（XAML部分）：

• x:Name：チェックボックスの名前
• Content：チェックボックスの右に表示される内容
• Checked：チェックボックスが選択されたときのイベント名
• Unchecked：チェックボックスの選択が解除されたときのイベント名

2. C#（ボタンの動作を定義）

private void Checked1(object sender, RoutedEventArgs e)
{
    IsCheckedText.Text = TwoStateCheckBox.IsChecked.ToString();
}

private void Unchecked1(object sender, RoutedEventArgs e)
{
    IsCheckedText.Text = TwoStateCheckBox.IsChecked.ToString();
}

解説（C#部分）：

• IsChecked：チェックボックスの選択状態を取得

2. 3つの状態を持つチェックボックス

実装例

チェックボックスの選択状態を表示する

##　1.　XAML（ボタンのUI定義）

<CheckBox x:Name="ThreeStateCheckBox"
        　Content="CheckBox2"
        　IsThreeState="True"
        　Checked="Checked2"
        　Unchecked="Unchecked2"
        　Indeterminate="Indeterminate2"/>
<TextBlock x:Name="IsCheckedText" FontSize="16" />

解説（XAML部分）：

• IsThreeState：3つの状態を持つことを明記
• Indeterminate：3つ目の状態

2. C#（ボタンの動作を定義）

private void Checked2(object sender, RoutedEventArgs e)
{
    IsCheckedText.Text = ThreeStateCheckBox.IsChecked.ToString();
}

private void Unchecked2(object sender, RoutedEventArgs e)
{
    IsCheckedText.Text = ThreeStateCheckBox.IsChecked.ToString();
}

private void Indeterminate2(object sender, RoutedEventArgs e)
{
    IsCheckedText.Text = ThreeStateCheckBox.IsChecked.ToString();
}

解説（C#部分）：

• IsChecked：Indeterminateの選択時はnullとなる

3. (応用)カテゴリー選択できるチェックボックス

実装例

チェックボックスの選択状態を表示する

##　1.　XAML（ボタンのUI定義）

<StackPanel Spacing="12" HorizontalAlignment="Center" VerticalAlignment="Center">
    <CheckBox x:Name="CategoryCheckBox" 
              Content="Select all" 
              IsThreeState="True"
              Checked="CheckedAll" 
              Unchecked="UncheckedAll"
              Indeterminate="Indeterminate3" />
    <CheckBox x:Name="Item1CheckBox" Content="Item1" Margin="24,0,0,0" Checked="ItemChecked" Unchecked="ItemUnchecked" />
    <CheckBox x:Name="Item2CheckBox" Content="Item2" Margin="24,0,0,0" Checked="ItemChecked" Unchecked="ItemUnchecked" />
    <CheckBox x:Name="Item3CheckBox" Content="Item3" Margin="24,0,0,0" Checked="ItemChecked" Unchecked="ItemUnchecked" />
</StackPanel>

2. C#（ボタンの動作を定義）

カテゴリーにあたるチェックボックスを選択したときのイベント

private void CheckedAll(object sender, RoutedEventArgs e)
{
    Item1CheckBox.IsChecked = true;
    Item2CheckBox.IsChecked = true;
    Item3CheckBox.IsChecked = true;
}

private void UncheckedAll(object sender, RoutedEventArgs e)
{
    Item1CheckBox.IsChecked = false;
    Item2CheckBox.IsChecked = false;
    Item3CheckBox.IsChecked = false;
}

• アイテムにあたるチェックボックスをすべて選択状態、または未選択状態にします。

カテゴリーにあたるチェックボックスをクリックしたときに2状態遷移に見せる

private void Indeterminate3(object sender, RoutedEventArgs e)
{
    if (Item1CheckBox.IsChecked == true && Item2CheckBox.IsChecked == true && Item3CheckBox.IsChecked == true)
    {
        CategoryCheckBox.IsChecked = false;
    }
}

• 本来nullになるとき（True状態でクリックしたとき）Falseへ遷移させます。

アイテムにあたるチェックボックスが選択されたとき呼ばれる関数

private void ItemCheckedSet()
{
    if (Item1CheckBox != null)
    {
        if (Item1CheckBox.IsChecked == true && Item2CheckBox.IsChecked == true && Item3CheckBox.IsChecked == true)
        {
            CategoryCheckBox.IsChecked = true;
        }
        else if (Item1CheckBox.IsChecked == false && Item2CheckBox.IsChecked == false && Item3CheckBox.IsChecked == false)
        {
            CategoryCheckBox.IsChecked = false;
        }
        else
        {
            CategoryCheckBox.IsChecked = null;
        }
    }
}

• 最初の状態はnullなのでnullチェックを行う
• アイテムにあたるチェックボックスの選択状態がそれぞれ異なれば、カテゴリーにあたるチェックボックスをnullにする

アイテムにあたるチェックボックスで呼ばれるイベント

private void ItemChecked(object sender, RoutedEventArgs e)
{
    ItemCheckedSet();
}

private void ItemUnchecked(object sender, RoutedEventArgs e)
{
    ItemCheckedSet();
}

まとめ

CheckBoxの状態を使い分けることで表現できる選択肢の幅が広がります。　　 チェックボックスを実装する際には参考にしてみてください。

参考：WinUI 3 Gallery（リンクはアプリのダウンロードページに飛びます）