[C#/WINUI2.5] CheckBox 엘리먼트 : 3단계 상태 체크 박스 사용하기

■ CheckBox 엘리먼트에서 3단계 상태 체크 박스를 사용하는 방법을 보여준다.

▶ MainPage.xaml


<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <CheckBox Name="allCheckBox"
                IsThreeState="True"
                Content="전체 선택"
                Checked="allCheckBox_Checked"
                Unchecked="allCheckBox_Unchecked"
                Indeterminate="allCheckBox_Indeterminate" />
            <CheckBox Name="option1CheckBox"
                Margin="20 0 0 0"
                Content="옵션 1"
                Checked="optionCheckBox_Checked"
                Unchecked="optionCheckBox_Unchecked" />
            <CheckBox Name="option2CheckBox"
                Margin="20 0 0 0"
                IsChecked="True"
                Content="옵션 2"
                Checked="optionCheckBox_Checked"
                Unchecked="optionCheckBox_Unchecked" />
            <CheckBox Name="option3CheckBox"
                Margin="20 0 0 0"
                Content="옵션 3"
                Checked="optionCheckBox_Checked"
                Unchecked="optionCheckBox_Unchecked" />
        </StackPanel>
    </Grid>
</Page>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<CheckBox Name="allCheckBox"

IsThreeState="True"

Content="전체 선택"

Checked="allCheckBox_Checked"

Unchecked="allCheckBox_Unchecked"

Indeterminate="allCheckBox_Indeterminate" />

<CheckBox Name="option1CheckBox"

Margin="20 0 0 0"

Content="옵션 1"

Checked="optionCheckBox_Checked"

Unchecked="optionCheckBox_Unchecked" />

<CheckBox Name="option2CheckBox"

Margin="20 0 0 0"

IsChecked="True"

Content="옵션 2"

Checked="optionCheckBox_Checked"

Unchecked="optionCheckBox_Unchecked" />

<CheckBox Name="option3CheckBox"

Margin="20 0 0 0"

Content="옵션 3"

Checked="optionCheckBox_Checked"

Unchecked="optionCheckBox_Unchecked" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using Windows.Foundation;
using Windows.Graphics.Display;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace TestProject
{
    /// <summary>
    /// 메인 페이지
    /// </summary>
    public sealed partial class MainPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainPage()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainPage()
        {
            InitializeComponent();

            #region 윈도우 크기를 설정한다.

            double width  = 800d;
            double height = 600d;

            double dpi = (double)DisplayInformation.GetForCurrentView().LogicalDpi;

            ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize;

            Size windowSize = new Size(width * 96d / dpi, height * 96d / dpi);

            ApplicationView.PreferredLaunchViewSize = windowSize;

            Window.Current.Activate();

            ApplicationView.GetForCurrentView().TryResizeView(windowSize);

            #endregion
            #region 윈도우 제목을 설정한다.

            ApplicationView.GetForCurrentView().Title = "CheckBox 엘리먼트 : 3단계 상태 체크 박스 사용하기";

            #endregion
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private
        //////////////////////////////////////////////////////////////////////////////// Event

        #region 전체 체크 박스 체크시 처리하기 - allCheckBox_Checked(sender, e)

        /// <summary>
        /// 전체 체크 박스 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void allCheckBox_Checked(object sender, RoutedEventArgs e)
        {
            this.option1CheckBox.IsChecked = true;
            this.option2CheckBox.IsChecked = true;
            this.option3CheckBox.IsChecked = true;
        }

        #endregion
        #region 전체 체크 박스 체크 해제시 처리하기 - allCheckBox_Unchecked(sender, e)

        /// <summary>
        /// 전체 체크 박스 체크 해제시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void allCheckBox_Unchecked(object sender, RoutedEventArgs e)
        {
            this.option1CheckBox.IsChecked = false;
            this.option2CheckBox.IsChecked = false;
            this.option3CheckBox.IsChecked = false;
        }

        #endregion
        #region 전체 체크 박스 미정시 처리하기 - allCheckBox_Indeterminate(sender, e)

        /// <summary>
        /// 전체 체크 박스 미정시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void allCheckBox_Indeterminate(object sender, RoutedEventArgs e)
        {
            if
            (
                this.option1CheckBox.IsChecked == true &&
                this.option2CheckBox.IsChecked == true &&
                this.option3CheckBox.IsChecked == true
            )
            {
                this.allCheckBox.IsChecked = false;
            }
        }

        #endregion
        #region 옵션 체크 박스 체크시 처리하기 - optionCheckBox_Checked(sender, e)

        /// <summary>
        /// 옵션 체크 박스 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void optionCheckBox_Checked(object sender, RoutedEventArgs e)
        {
            SetAllCheckBoxState();
        }

        #endregion
        #region 옵션 체크 박스 체크 해제시 처리하기 - optionCheckBox_Unchecked(sender, e)

        /// <summary>
        /// 옵션 체크 박스 체크 해제시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void optionCheckBox_Unchecked(object sender, RoutedEventArgs e)
        {
            SetAllCheckBoxState();
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////// Function

        #region 전체 체크 박스 상태 설정하기 - SetAllCheckBoxState()

        /// <summary>
        /// 전체 체크 박스 상태 설정하기
        /// </summary>
        private void SetAllCheckBoxState()
        {
            if(this.option1CheckBox != null)
            {
                if(this.option1CheckBox.IsChecked == true && this.option2CheckBox.IsChecked == true && this.option3CheckBox.IsChecked == true)
                {
                    this.allCheckBox.IsChecked = true;
                }
                else if(this.option1CheckBox.IsChecked == false && this.option2CheckBox.IsChecked == false && this.option3CheckBox.IsChecked == false)
                {
                    this.allCheckBox.IsChecked = false;
                }
                else
                {
                    this.allCheckBox.IsChecked = null;
                }
            }
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

using Windows.Foundation;

using Windows.Graphics.Display;

using Windows.UI.ViewManagement;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

#region 윈도우 크기를 설정한다.

double width = 800d;

double height = 600d;

double dpi = (double)DisplayInformation.GetForCurrentView().LogicalDpi;

ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize;

Size windowSize = new Size(width * 96d / dpi, height * 96d / dpi);

ApplicationView.PreferredLaunchViewSize = windowSize;

Window.Current.Activate();

ApplicationView.GetForCurrentView().TryResizeView(windowSize);

#endregion

#region 윈도우 제목을 설정한다.

ApplicationView.GetForCurrentView().Title = "CheckBox 엘리먼트 : 3단계 상태 체크 박스 사용하기";

#endregion

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

//////////////////////////////////////////////////////////////////////////////// Event

#region 전체 체크 박스 체크시 처리하기 - allCheckBox_Checked(sender, e)

/// <summary>

/// 전체 체크 박스 체크시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void allCheckBox_Checked(object sender, RoutedEventArgs e)

{

this.option1CheckBox.IsChecked = true;

this.option2CheckBox.IsChecked = true;

this.option3CheckBox.IsChecked = true;

}

#endregion

#region 전체 체크 박스 체크 해제시 처리하기 - allCheckBox_Unchecked(sender, e)

/// <summary>

/// 전체 체크 박스 체크 해제시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void allCheckBox_Unchecked(object sender, RoutedEventArgs e)

{

this.option1CheckBox.IsChecked = false;

this.option2CheckBox.IsChecked = false;

this.option3CheckBox.IsChecked = false;

}

#endregion

#region 전체 체크 박스 미정시 처리하기 - allCheckBox_Indeterminate(sender, e)

/// <summary>

/// 전체 체크 박스 미정시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void allCheckBox_Indeterminate(object sender, RoutedEventArgs e)

{

(

this.option1CheckBox.IsChecked == true &&

this.option2CheckBox.IsChecked == true &&

this.option3CheckBox.IsChecked == true

)

{

this.allCheckBox.IsChecked = false;

}

#endregion

#region 옵션 체크 박스 체크시 처리하기 - optionCheckBox_Checked(sender, e)

/// <summary>

/// 옵션 체크 박스 체크시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void optionCheckBox_Checked(object sender, RoutedEventArgs e)

{

SetAllCheckBoxState();

}

#endregion

#region 옵션 체크 박스 체크 해제시 처리하기 - optionCheckBox_Unchecked(sender, e)

/// <summary>

/// 옵션 체크 박스 체크 해제시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void optionCheckBox_Unchecked(object sender, RoutedEventArgs e)

{

SetAllCheckBoxState();

}

#endregion

//////////////////////////////////////////////////////////////////////////////// Function

#region 전체 체크 박스 상태 설정하기 - SetAllCheckBoxState()

/// <summary>

/// 전체 체크 박스 상태 설정하기

/// </summary>

private void SetAllCheckBoxState()

{

if(this.option1CheckBox != null)

{

if(this.option1CheckBox.IsChecked == true && this.option2CheckBox.IsChecked == true && this.option3CheckBox.IsChecked == true)

{

this.allCheckBox.IsChecked = true;

}

else if(this.option1CheckBox.IsChecked == false && this.option2CheckBox.IsChecked == false && this.option3CheckBox.IsChecked == false)

{

this.allCheckBox.IsChecked = false;

}

else

{

this.allCheckBox.IsChecked = null;

}

#endregion

}

TestProject.zip