확인란

아티클
03/24/2024

체크박스는 작업 항목을 선택하거나 선택 취소하는 데 사용됩니다. 단일 항목 또는 사용자가 선택할 수 있는 여러 항목 목록에 사용할 수 있습니다. 컨트롤에는 선택되지 않음, 선택됨 및 확정되지 않음, 이렇게 세 가지 선택 상태가 있습니다. 하위 선택 항목 컬렉션에 선택되지 않은 상태와 선택된 상태가 모두 있는 경우 확정되지 않은 상태를 사용합니다.

Example of check box states

올바른 컨트롤인가요?

이진 예/아니요 선택 항목에 단일 확인란을 사용합니다. 예를 들어 "기억" 로그인 시나리오 또는 서비스 계약 조건의 경우입니다.

A single check box used for an individual choice

이진 선택의 경우 확인란과 토글 스위치의 주요 차이점은, 확인란은 상태에 대한 것이고 토글 스위치는 동작에 대한 것이라는 점입니다. 토글 스위치 상호 작용을 즉시 커밋하는 동안 (예를 들어, 양식 제출의 일부로) 검사 상자 상호 작용 커밋을 지연할 수 있습니다. 또한 체크박스만 다중 선택을 허용합니다.

상호 배타적이지 않은 선택 그룹에서 사용자가 하나 이상의 선택하는 다중 선택 시나리오에는 여러 체크박스 를 사용합니다.

사용자가 옵션 조합을 선택할 수 있는 경우 체크박스 그룹을 만듭니다.

Selecting multiple options with check boxes

옵션을 그룹화할 수 있는 경우. 확정되지 않음 체크박스를 사용하여 전체 그룹을 나타낼 수 있습니다. 사용자가 전체가 아니라 그룹의 일부 하위 항목만을 선택할 때, 확정되지 않은 상태를 표시하는 체크박스를 사용합니다.

Check boxes used to show a mixed choice

이 체크박스 및 라디오 버튼 컨트롤 덕분에 사용자가 옵션 목록에서 선택할 수 있습니다. 체크박스를 사용하면 사용자가 옵션 조합을 선택할 수 있습니다. 반면, 라디오 버튼을 사용하면 사용자가 상호 배타적인 옵션 중에서 한 가지 선택을 할 수 있습니다. 둘 이상의 옵션이 있지만 하나만 선택할 수 있는 경우, 라디오 버튼을 대신 사용합니다.

권장 사항

체크박스의 용도와 현재 상태가 명확한지 확인합니다.
체크박스 텍스트 콘텐츠를 두 줄 이하로 제한합니다.
체크 표시는 true이고 체크 표시가 없으면 false가 되는 문으로 체크박스를 표시합니다.
브랜드 지침에 다른 글꼴을 사용하도록 규정되어 있지 않은 경우 기본 글꼴을 사용하세요.
텍스트 콘텐츠가 동적인 경우, 컨트롤이 크기를 재조정하는 방법과 주변의 시각적 개체에 미치는 영향을 고려하세요.
선택할 상호 배타적 옵션이 두 개 이상 있는 경우, 라디오 버튼을 사용하는 것이 좋습니다.
체크박스 그룹 두 개를 나란히 배치하지 마세요. 그룹 레이블을 사용하여 그룹을 구분합니다.
켜기/끄기 컨트롤로 체크박스를 사용하거나 명령을 수행하지 말고, 토글 스위치를 사용합니다.
체크박스를 사용하여 대화 상자와 같은 다른 컨트롤을 표시하지 마세요.
확정되지 않은 상태를 사용하여 일부 하위 선택 항목에 대해 옵션이 설정되었음을 나타냅니다.
확정되지 않은 상태를 사용하는 경우, 하위 체크박스를 사용하여 선택한 옵션과 선택되지 않은 옵션을 표시합니다. 사용자가 하위 선택 항목을 볼 수 있도록 UI를 디자인합니다.
세 번째 상태를 나타내기 위해 확정되지 않은 상태를 사용하지 마세요. 확정되지 않은 상태를 사용하여 일부 하위 선택 항목에 대해 옵션이 설정되었음을 나타냅니다. 따라서, 확정되지 않은 상태를 사용자가 직접 설정하도록 허용하지 마세요. 수행하지 않는 작업의 예를 들어, 이 체크박스는 확정되지 않은 상태를 사용하여 중간 단계의 매운 맛을 나타냅니다.

대신 세 가지 옵션이 있는 라디오 단추 그룹을 사용합니다.

UWP 및 WinUI 2

Important

이 문서의 정보 및 예제는 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가 nullable 부울 값이므로 캐스트 또는 값 변환기를 사용하여 부울 속성으로 바인딩해야 합니다. 이는 사용 중인 실제 바인딩 유형에 따라 달라지며 가능한 각 유형에 대한 예제는 아래에서 확인할 수 있습니다.

이 예제에서는 서비스 약관에 동의하는 확인란의 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;
    }
}

클릭 및 Checked 이벤트 처리

체크박스 상태가 변경될 때, Click 이벤트, 또는 Checked 및 Unchecked 이벤트를 처리할 수 있습니다.

체크 상태가 변경될 때마다 Click 이벤트가 발생합니다. Click 이벤트를 처리하는 경우, IsChekced 속성을 사용하여 체크박스의 상태를 확인합니다.

이 Checked 및 Unchecked 이벤트는 독립적으로 발생합니다. 이러한 이벤트를 처리하는 경우 둘 다 확인란의 상태 변경에 대해 응답하도록 처리해야 합니다.

다음 예제에서는, 클릭 이벤트 처리와 Checked 및 Unchcked 이벤트를 보여 줍니다.

여러 체크박스가 동일한 이벤트 처리기를 공유할 수 있습니다. 다음은 피자 토핑을 선택하기 위한 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>

다음은 클릭 이벤트에 대한 이벤트 처리기입니다. 체크박스를 클릭할 때마다, 체크박스를 검사하여 어떤 박스에 체크가 되었는지 확인하고 선택한 토핑 목록을 업데이트합니다.

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 에서 상속되며 다음 세 가지 상태를 가질 수 있습니다.

State(상태)	속성	값
checked	IsChecked	true
unchecked	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 사용

클릭 및 Checked 이벤트 처리

확정되지 않은 상태 사용

샘플 코드 가져오기

피드백

추가 리소스

확인란

올바른 컨트롤인가요?

권장 사항

UWP 및 WinUI 2

체크박스 만들기

간단한 체크박스 만들기

IsChecked에 바인딩

x:Bind 사용

x:Bind 또는 Binding 사용

클릭 및 Checked 이벤트 처리

확정되지 않은 상태 사용

샘플 코드 가져오기

관련된 문서

피드백

추가 리소스