C# Winform - 그룹박스 개념 및 사용법, 라디오 버튼을 그룹 단위로 하나만 선택되도록 하기 (GroupBox, RadioButton)

반응형

 

개요

여러 개의 라디오 버튼 중, 하나만 선택되도록 하려 한다.

아래와 같이 라디오 버튼을 두 개 추가해서 선택해보면 둘 중 하나만 선택되도록 되어 있다는 것을 확인할 수 있다.

etc-image-0
<라디오 버튼을 두 개를 생성하여 하나씩 선택해본 화면>

 

문제는 여기서 생긴다.

만약 총 4개의 라디오 버튼이 있을 때에도 동일하게 하나만 선택된다.

etc-image-1
<라디오 버튼 네 개를 생성하여 하나씩 선택해본 화면>

 

사용자가 원하는 요구가 아래와 같이 정의 되었다면?

  • 라디오 버튼 2개 중 하나
  • 또 다른 라디오 버튼 2개 중 하나

내가 라디오 버튼1을 선택한 상태에서 라디오 버튼3을 또 선택해야된다면?

 

포스팅에서 설명하는 프로젝트는 깃허브에서 확인 가능합니다.

 

GitHub - luvris2/CSharp-Winforms-Example

Contribute to luvris2/CSharp-Winforms-Example development by creating an account on GitHub.

github.com


그룹박스 컨트롤을 사용하여 그룹화하기

그룹박스 컨트롤이란? (GroupBox)

WIndows Forms GroupBox 컨트롤은 다른 컨트롤을 그룹화하는 데 사용된다.

컨트롤을 그룹화해야 하는 이유는 세 가지가 있다.

  • 명확한 사용자 인터페이스에 대한 관련 양식 요소의 시각적 그룹 생성을 위해
  • 프로그래밍 방식 그룹화(예를 들어 라디오 버튼)를 위해
  • 디자인 타임에 컨트롤을 단위로 이동하기 위해

그룹박스 컨트롤 그룹 만들기

도구 상자의 GroupBox 컨트롤을 폼 디자인 창으로 드래그하여 추가한다.

etc-image-2

 

그룹박스 안에 위치할 컨트롤들을 배치한다.

etc-image-3


그룹박스 사용 이유

명확한 사용자 인터페이스에 대한 관련 양식 요소의 시각적 그룹 생성

처음 라디오 버튼 4개를 생성했을 때를 생각해보자.

아래의 이미지에서 왼쪽은 그룹박스를 사용하지 않은 상태이다.

우리는 이 4개의 라디오 버튼이 따로 명시가 되어 있지 않다면 어떻게 각자 다른 분류에 속할지를 알 수 없다.

반면 이미지 오른쪽의 그룹박스를 라디오 버튼은 사용자가 보기에 직관적으로 추측할 수 있다.

사용자는 보다 명확하게 라디오1,2버튼과 라디오 3,4버튼이 그룹화가 되어 있다는 것을 알 수 있다.

etc-image-4
<좌:그룹박스를 사용하지 않은 4개의 라디오버튼, 우:그룹박스로 배치한 2개의 그룹이 있는 4개의 라디오버튼>


프로그래밍 방식 그룹화

개요에서 언급한 바와 같이, 라디오 버튼 4개 중 라디오 버튼1과 라디오 버튼3을 선택해야하는 경우가 이에 속한다.

etc-image-5

 

위와 같이 그룹박스를 이용하여 라디오 버튼을 두 개씩 그룹화하여 선택 또한 그룹별로 할 수 있도록 하는 것이다.

프로그래밍 방식 그룹화 예제는 아래에서 다루도록 한다.


디자인 타임에 컨트롤을 단위로 이동

디자인 타임이란 쉽게 말해서 윈폼 애플리케이션의 UI를 디자인하고 수정하는 시간을 의미한다.

(반대의 의미로는 런타임이 사용될 수 있다. 런타임은 윈폼 애플리케이션이 실행되는 시간을 의미하며, 개발자가 디자인 타임에 디자인한 UI나 기능을 사용자가 상호작용할 수 있다.)

 

UI를 수정해야 할 때, 라디오 버튼1과 라디 오버튼2를 일괄적으로 움직여야 할 때가 있다.

이럴 때 그룹박스를 이용하면 라디오 버튼들을 일괄적으로 이동이 가능하다.

단, 이동할 때 반드시 그룹박스 내에 위치하여야 하며 이동은 그룹박스를 통해 이동한다.

etc-image-6
<그룹박스를 이용하여 라디오 컨트롤을 일괄적으로 이동한 화면>


예제 : 그룹박스 2개와 라디오 버튼 4개로 각각 선택된 값 확인하기

폼 디자인

  • 애완동물 유무 (그룹박스 : groupBox1)
    • 있음 (라디오버튼 : radioPetY)
    • 없음 (라디오버튼 : radioPetN)
  • 애완동물 성별 (그룹박스 : groupBox2)
    • 수컷 (라디오버튼 : radioPetMale)
    • 암컷 (라디오버튼 : radioPetFemale)

etc-image-7
<그룹박스와 라디오 버튼을 사용한 윈폼 애플리케이션 폼 디자인>


요구사항

  • 그룹박스(애완동물 유무, 애완동물 성별)각각의 값이 독립적으로 선택되는지 확인해보기
  • 애완동물이 없을 경우, 애완동물 성별의 라디오 버튼 비활성화하
  • 애완동물 유무와 애완동물의 성별의 선택된 값을 레이블(Label)에 표시해보기

코딩

폼에 각 그룹의 초기값을 설정해준다.

초기값은 각각의 라디오버튼의 첫번째가 기본적으로 선택되도록 하였다.

  • 실행 시 펫 유무 있음으로 기본값 설정
  • 실행 시 펫 설병 수컷으로 기본값 설정
/* 폼 초기 설정*/
public Form1()
{
    InitializeComponent();

    // 초기값 설정
    radioPetY.Checked = true;
    radioPetMale.Checked = true;
}

 

라디오 버튼의 기능을 정의한다.

폼 디자인에서 라디오 버튼을 더블 클릭하면 간편하게 기능 정의하는 코드가 추가된다.

etc-image-8
<폼 디자인에서 라디오 버튼 컨트롤 선택 화면>

 

etc-image-9
<폼 디자인의 라디오 버튼 더블 클릭하여 기능 정의 함수가 자동적으로 코드에 추가된 화면>

 

애완동물 유무에 따른 기능 정의는 있을 경우는 성별을 선택할 수 있도록 하고, 없을 경우는 선택할 수 없도록 한다.

이는 그룹박스의 속성에서 사용 여부를 사용하지 않음(Enable = false)로 지정하면 된다.

/* 애완동물 유무 라디오 버튼 */
private void radioPetY_CheckedChanged(object sender, EventArgs e)
{
    groupBox2.Enabled = true; // 애안동물 성별 선택 여부 활성화
}

private void radioPetN_CheckedChanged(object sender, EventArgs e)
{
    groupBox2.Enabled = false; // 애안동물 성별 선택 여부 비활성화
}

 

이제 성별을 선택하면 레이블에 간단한 문구를 출력하도록 해보자.

/* 애완동물 성별 라디오 버튼 */
private void radioPetMale_CheckedChanged(object sender, EventArgs e)
{
    label1.Text = "귀여운 남아를 키우고 있군요!";
}

private void radioPetFemale_CheckedChanged(object sender, EventArgs e)
{
    label1.Text = "귀여운 여아를 키우고 있군요!";
}

 

추가적으로 기능을 재정의 해보자.

애완동물 유무가 있음과 없음으로 될 경우, 문구는 그대로 변경되지 않는다.

애완동물이 없을 경우에는 애완동물이 없다는 문구와,

애완동물 여부가 다시 있음으로 변경될 경우의 문구를 보이도록 변경해보자.

/* 애완동물 유무 라디오 버튼 */
private void radioPetY_CheckedChanged(object sender, EventArgs e)
{
    groupBox2.Enabled = true; // 애안동물 성별 선택 여부 활성화

    if (radioPetMale.Checked)   label1.Text = "귀여운 남아를 키우고 있군요!";
    else   label1.Text = "귀여운 여아를 키우고 있군요!";
}

private void radioPetN_CheckedChanged(object sender, EventArgs e)
{
    groupBox2.Enabled = false; // 애안동물 성별 선택 여부 비활성화
    label1.Text = "애완동물을 키우고 있지 않군요.";
}

실행 화면

  • 애완동물 있음 / 암컷 선택 화면

etc-image-10
<C# 윈폼에서 애완동물이 있고, 암컷을 선택한 화면>

 

  • 애완동물 없음 선택 화면

etc-image-11
<C# 윈폼에서 애완동물이 없음을 선택한 화면>

 

  • 애완동물 없음을 선택한 후, 다시 있음으로 변경한 화면 (기능 재정의 부분)

etc-image-12
<C# 윈폼에서 애완동물 없음 선택 후 있음으로 변경한 화면>


 

전체 소스 코드

Form1 디자이너 코드

더보기
namespace C__Winform_Radio_Group
{
    partial class Form1
    {
        /// <summary>
        ///  Required designer variable.
        /// </summary>
        private System.ComponentModel.IContainer components = null;

        /// <summary>
        ///  Clean up any resources being used.
        /// </summary>
        /// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

        #region Windows Form Designer generated code

        /// <summary>
        ///  Required method for Designer support - do not modify
        ///  the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {
            radioPetY = new RadioButton();
            radioPetN = new RadioButton();
            radioPetMale = new RadioButton();
            radioPetFemale = new RadioButton();
            groupBox1 = new GroupBox();
            groupBox2 = new GroupBox();
            label1 = new Label();
            groupBox1.SuspendLayout();
            groupBox2.SuspendLayout();
            SuspendLayout();
            // 
            // radioPetY
            // 
            radioPetY.AutoSize = true;
            radioPetY.Location = new Point(6, 22);
            radioPetY.Name = "radioPetY";
            radioPetY.Size = new Size(49, 19);
            radioPetY.TabIndex = 0;
            radioPetY.TabStop = true;
            radioPetY.Text = "있음";
            radioPetY.UseVisualStyleBackColor = true;
            radioPetY.CheckedChanged += radioPetY_CheckedChanged;
            // 
            // radioPetN
            // 
            radioPetN.AutoSize = true;
            radioPetN.Location = new Point(6, 47);
            radioPetN.Name = "radioPetN";
            radioPetN.Size = new Size(49, 19);
            radioPetN.TabIndex = 1;
            radioPetN.TabStop = true;
            radioPetN.Text = "없음";
            radioPetN.UseVisualStyleBackColor = true;
            radioPetN.CheckedChanged += radioPetN_CheckedChanged;
            // 
            // radioPetMale
            // 
            radioPetMale.AutoSize = true;
            radioPetMale.Location = new Point(6, 22);
            radioPetMale.Name = "radioPetMale";
            radioPetMale.Size = new Size(49, 19);
            radioPetMale.TabIndex = 2;
            radioPetMale.TabStop = true;
            radioPetMale.Text = "수컷";
            radioPetMale.UseVisualStyleBackColor = true;
            radioPetMale.CheckedChanged += radioPetMale_CheckedChanged;
            // 
            // radioPetFemale
            // 
            radioPetFemale.AutoSize = true;
            radioPetFemale.Location = new Point(6, 47);
            radioPetFemale.Name = "radioPetFemale";
            radioPetFemale.Size = new Size(49, 19);
            radioPetFemale.TabIndex = 3;
            radioPetFemale.TabStop = true;
            radioPetFemale.Text = "암컷";
            radioPetFemale.UseVisualStyleBackColor = true;
            radioPetFemale.CheckedChanged += radioPetFemale_CheckedChanged;
            // 
            // groupBox1
            // 
            groupBox1.Controls.Add(radioPetY);
            groupBox1.Controls.Add(radioPetN);
            groupBox1.Location = new Point(21, 20);
            groupBox1.Name = "groupBox1";
            groupBox1.Size = new Size(122, 83);
            groupBox1.TabIndex = 4;
            groupBox1.TabStop = false;
            groupBox1.Text = "애완동물 유무";
            // 
            // groupBox2
            // 
            groupBox2.Controls.Add(radioPetMale);
            groupBox2.Controls.Add(radioPetFemale);
            groupBox2.Location = new Point(21, 109);
            groupBox2.Name = "groupBox2";
            groupBox2.Size = new Size(122, 80);
            groupBox2.TabIndex = 5;
            groupBox2.TabStop = false;
            groupBox2.Text = "애완동물 성별";
            // 
            // label1
            // 
            label1.AutoSize = true;
            label1.Location = new Point(149, 67);
            label1.Name = "label1";
            label1.Size = new Size(39, 15);
            label1.TabIndex = 6;
            label1.Text = "label1";
            // 
            // Form1
            // 
            AutoScaleDimensions = new SizeF(7F, 15F);
            AutoScaleMode = AutoScaleMode.Font;
            ClientSize = new Size(350, 198);
            Controls.Add(label1);
            Controls.Add(groupBox2);
            Controls.Add(groupBox1);
            Name = "Form1";
            Text = "Form1";
            groupBox1.ResumeLayout(false);
            groupBox1.PerformLayout();
            groupBox2.ResumeLayout(false);
            groupBox2.PerformLayout();
            ResumeLayout(false);
            PerformLayout();
        }

        #endregion

        private RadioButton radioPetY;
        private RadioButton radioPetN;
        private RadioButton radioPetMale;
        private RadioButton radioPetFemale;
        private GroupBox groupBox1;
        private GroupBox groupBox2;
        private Label label1;
    }
}

Form1 코드

더보기
namespace C__Winform_Radio_Group
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();

            // 초기값 설정
            radioPetY.Checked = true;
            radioPetMale.Checked = true;
        }

        private void radioPetY_CheckedChanged(object sender, EventArgs e)
        {
            groupBox2.Enabled = true; // 애안동물 성별 선택 여부 활성화

            if (radioPetMale.Checked)   label1.Text = "귀여운 남아를 키우고 있군요!";
            else   label1.Text = "귀여운 여아를 키우고 있군요!";
        }

        private void radioPetN_CheckedChanged(object sender, EventArgs e)
        {
            groupBox2.Enabled = false; // 애안동물 성별 선택 여부 비활성화
            label1.Text = "애완동물을 키우고 있지 않군요.";
        }

        private void radioPetMale_CheckedChanged(object sender, EventArgs e)
        {
            label1.Text = "귀여운 남아를 키우고 있군요!";
        }

        private void radioPetFemale_CheckedChanged(object sender, EventArgs e)
        {
            label1.Text = "귀여운 여아를 키우고 있군요!";
        }
    }
}

참고

 

반응형