Grid Panel

두번째 패널 콘트롤로 Grid 콘트롤을 알아보자.

Grid 콘트롤은 격자형태로 칸을 나누어 각각의 칸에 하나씩의 콘트롤을 배치할 수 있게 한다.

우선 다음과 같이 아이디와 패스워드를 체크할 수 있는 윈도우를 만들어보자.

 

(0,0)	(0,1)
(1,0)	(1,1)
(2,0)	(2,1)

이 프로그램은 2개의 Label, 2개의 TextBox, 1개의 버튼으로 구성된다. 5개의 콘트롤들은 그림과 같은 Grid에 배치된다. Grid의 각각의 공간은 (row, column)으로 번호가 주어진다.

먼저, 프로그램을 gridTest 클래스로 구현해보자.

 

 

Grid콘트롤 grid를 생성하고, 3행 2열의 공간을 만들어 리턴해주는 함수를 CreateGrid()라고 하면, 이는 다음과 같다.

        // 그리드의 행과 열을 지정하는 함수
        private Grid CreateGrid()
        {
            Grid grid = new Grid();
            grid.Margin = new Thickness(10);

            // 3행 추가
            for (int i = 0; i < 3; i++)
            {
                grid.RowDefinitions.Add(new RowDefinition());
            }
            // 2열 추가
            for (int i = 0; i < 2; i++)
            {
                grid.ColumnDefinitions.Add(new ColumnDefinition());
            }
            return grid;
        }

CreateGrid() 함수는 그리드에 공간만을 만들어준다. 이 공간에 5개의 콘트롤을 만들어 배치시키는 함수를 SetGrid(grid)로 구현하면 다음과 같다.

 

SetGrid(grid) 메소드는 CreateGrid 에서 만들어진 3x2 grid 를 보내고, 5개의 콘트롤을 생성하여 속성을 세팅한 후, grid의 자식으로 추가하고 위치를 정해준다.

위의 코드에서 34~38번째 줄에서는 2개의 Label, 2개의 TextBox, 1개의 버튼을 만든다.

41~51번째 줄에서는 각 콘트롤들의 프로퍼티를 지정한다. Label에는 표시될 문자열을 지정해주고, TextBox는 폭을 200으로 지정했다. Margin은 모두 3으로 지정했다.

54~58번째 줄에서는 grid에 5개 콘트롤을 자식으로 추가했다.

61~70번째 줄에서, 5개 콘트롤을 그리드 공간에 배치하였다. 이때 SetRow, SetColumn 메소드를 사용하는데 행과 열의 인덱스는 0에서부터 시작한다.

27번째 줄에서 Content = grid; 라고 하여 만들어진 그리드가 윈도우에 표시되게 된다.

그리드의 격자를 확인하기 위해  grid.ShowGridLines = true; 문장을 26번째 줄에 추가하면, 다음 그림과 같이 그리드에 점선으로 격자를 확인할 수 있다. ShowGridLines 프로퍼티는 프로그램을 개발하는 과정에서 도움이 된다.

 

프로그램을 실행시키고 아이디, 패스워드를 입력해보면 다음과 같이 보인다.

 

패스워드가 화면에 보이는 것이 문제다. 이를 위해 TextBox와 비슷한 PasswordBox 콘트롤을 제공한다. 소스에서 txtPassword를 PasswordBox로 수정하면 다음과 같이 보인다.

PasswordBox txtPassword = new PasswordBox();

 

 

이제 이벤트핸들러함수를 추가하자. 아이디와 패스워드를 입력하고 로그인 버튼을 누르면 메시지박스에 그 결과를 보여주도록 하자.

SetGrid() 메소드에서 Button을 생성하고 나서, Click 이벤트 핸들러를 처리해준다.

  btnLogin.Click +=btnLogin_Click;

이에 대한 처리 함수는 다음과 같다.

         private void btnLogin_Click(object sender, RoutedEventArgs e)
        {
            Button btn = sender as Button;

            string s = "아이디: " + txtId.Text + ", 패스워드: " + txtPassword.Password+ "입니다";
            MessageBox.Show(s, "Id/Passwod");
        }

그런데 여기서 txtID, txtPassword는 SetGrid 함수에서 만들었기 때문에 btnLogin_Click에서는 사용할 수 없는 문제가 있다. 따라서 이 두개의 콘트롤은 SetGrid 함수 바깥에 클래스에서 선언해주기로 한다.

namespace CodingAcademy.GridTest
{
    class gridTest : Window
    {
        TextBox txtId = new TextBox();
        PasswordBox txtPassword = new PasswordBox();

        [STAThread]
        ...

이렇게 해서 아이디, 패스워드를 입력하는 프로그램을 Grid 를 사용해서 만들어보았다.

 

 

만일 로그인 버튼이 중앙에 오게 하고 싶다면, 아래 그림처럼 2번째 행에 있는 두개의 컬럼을 합쳐야하는데 그럴 때 사용하는 것이 SetColumnSpan 이다. btnLogin이 0번 컬럼에서 시작하여 2개의 컬럼을 차지하게 하려면 다음 같이 사용한다.

            Grid.SetRow(btnLogin, 2);
            Grid.SetColumn(btnLogin, 0);
            Grid.SetColumnSpan(btnLogin, 2);

 

 

실행 화면은 다음과 같다. SetColumnSpan 의 효과를 보기 위해 grid.ShowGridLines = true; 로 했다.

 

 

이제는 다음과 같은 형태의 입력양식을 Grid를 통해 구현할 수 있을 것이다.

 

 

BeeEye 드무