개요
여러 개의 라디오 버튼 중, 하나만 선택되도록 하려 한다.
아래와 같이 라디오 버튼을 두 개 추가해서 선택해보면 둘 중 하나만 선택되도록 되어 있다는 것을 확인할 수 있다.
문제는 여기서 생긴다.
만약 총 4개의 라디오 버튼이 있을 때에도 동일하게 하나만 선택된다.
사용자가 원하는 요구가 아래와 같이 정의 되었다면?
- 라디오 버튼 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 컨트롤을 폼 디자인 창으로 드래그하여 추가한다.
그룹박스 안에 위치할 컨트롤들을 배치한다.
그룹박스 사용 이유
명확한 사용자 인터페이스에 대한 관련 양식 요소의 시각적 그룹 생성
처음 라디오 버튼 4개를 생성했을 때를 생각해보자.
아래의 이미지에서 왼쪽은 그룹박스를 사용하지 않은 상태이다.
우리는 이 4개의 라디오 버튼이 따로 명시가 되어 있지 않다면 어떻게 각자 다른 분류에 속할지를 알 수 없다.
반면 이미지 오른쪽의 그룹박스를 라디오 버튼은 사용자가 보기에 직관적으로 추측할 수 있다.
사용자는 보다 명확하게 라디오1,2버튼과 라디오 3,4버튼이 그룹화가 되어 있다는 것을 알 수 있다.
프로그래밍 방식 그룹화
개요에서 언급한 바와 같이, 라디오 버튼 4개 중 라디오 버튼1과 라디오 버튼3을 선택해야하는 경우가 이에 속한다.
위와 같이 그룹박스를 이용하여 라디오 버튼을 두 개씩 그룹화하여 선택 또한 그룹별로 할 수 있도록 하는 것이다.
프로그래밍 방식 그룹화 예제는 아래에서 다루도록 한다.
디자인 타임에 컨트롤을 단위로 이동
디자인 타임이란 쉽게 말해서 윈폼 애플리케이션의 UI를 디자인하고 수정하는 시간을 의미한다.
(반대의 의미로는 런타임이 사용될 수 있다. 런타임은 윈폼 애플리케이션이 실행되는 시간을 의미하며, 개발자가 디자인 타임에 디자인한 UI나 기능을 사용자가 상호작용할 수 있다.)
UI를 수정해야 할 때, 라디오 버튼1과 라디 오버튼2를 일괄적으로 움직여야 할 때가 있다.
이럴 때 그룹박스를 이용하면 라디오 버튼들을 일괄적으로 이동이 가능하다.
단, 이동할 때 반드시 그룹박스 내에 위치하여야 하며 이동은 그룹박스를 통해 이동한다.
예제 : 그룹박스 2개와 라디오 버튼 4개로 각각 선택된 값 확인하기
폼 디자인
- 애완동물 유무 (그룹박스 : groupBox1)
- 있음 (라디오버튼 : radioPetY)
- 없음 (라디오버튼 : radioPetN)
- 애완동물 성별 (그룹박스 : groupBox2)
- 수컷 (라디오버튼 : radioPetMale)
- 암컷 (라디오버튼 : radioPetFemale)
요구사항
- 그룹박스(애완동물 유무, 애완동물 성별)각각의 값이 독립적으로 선택되는지 확인해보기
- 애완동물이 없을 경우, 애완동물 성별의 라디오 버튼 비활성화하
- 애완동물 유무와 애완동물의 성별의 선택된 값을 레이블(Label)에 표시해보기
코딩
폼에 각 그룹의 초기값을 설정해준다.
초기값은 각각의 라디오버튼의 첫번째가 기본적으로 선택되도록 하였다.
- 실행 시 펫 유무 있음으로 기본값 설정
- 실행 시 펫 설병 수컷으로 기본값 설정
/* 폼 초기 설정*/
public Form1()
{
InitializeComponent();
// 초기값 설정
radioPetY.Checked = true;
radioPetMale.Checked = true;
}
라디오 버튼의 기능을 정의한다.
폼 디자인에서 라디오 버튼을 더블 클릭하면 간편하게 기능 정의하는 코드가 추가된다.
애완동물 유무에 따른 기능 정의는 있을 경우는 성별을 선택할 수 있도록 하고, 없을 경우는 선택할 수 없도록 한다.
이는 그룹박스의 속성에서 사용 여부를 사용하지 않음(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 = "애완동물을 키우고 있지 않군요.";
}실행 화면
- 애완동물 있음 / 암컷 선택 화면
- 애완동물 없음 선택 화면
- 애완동물 없음을 선택한 후, 다시 있음으로 변경한 화면 (기능 재정의 부분)
전체 소스 코드
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 = "귀여운 여아를 키우고 있군요!";
}
}
}참고