패널 콘트롤

Content 에는 하나의 콘트롤 밖에 붙일 수 없다. 만일 다음과 같이 여러개의 콘트롤 들이 포함된 윈도우를 만들기 위해서는 패널(Panel) 콘트롤을 사용한다.

패널은 자신은 보여지지 않지만, 여러개의 콘트롤들을 자식으로 포함할 수 있다.

패널에는 StackPanel, DockPanel, Grid 가 있다.

StackPanel

StackPanel을 이용하면 콘트롤들을 한 방향으로 차곡차곡 쌓을 수 있다. 정렬방향은 Default로 수직방향이며, Orientation을 Horizontal로 바꾸어주면 수평방향으로 위치시킬 수 있다.

우선 다섯개의 버튼을 수직으로 배치해보자.

        // 생성자
        public controlTest()
        {
            Title = "Control Test";
            Width = 400;
            Height = 300;
                        
            // StackPanel
            StackPanel stack = new StackPanel();
            stack.Margin = new Thickness(10);

            // 5개의 버튼을 만들어서 배치
            for (int i = 1; i <= 5; i++)
            {
                Button btn = new Button();
                btn .Name = "btn" + i.ToString();    // 버튼의 이름을 btn1, btn2, ... btn5로 만듦
                btn .Margin = new Thickness(3);
                btn .Content = btn .Name;             // btn에 버튼의 이름을 표시
                stack.Children.Add(btn );             // stack에 버튼을 자식으로 추가
            }
            Content = stack;
       } //controlTest

 

 

그림처럼 5개의 버튼이 400x300의 윈도우에 차례로 배치된 것을 볼 수 있다.

Window의 프로퍼티 중에 SizeToContents 라는 것이 있는데, SizeToContent = SizeToContent.WidthAndHeight; 로 바꾸면 윈도우의 크기가 내부 콘텐트의 크기에 맞추어진다는 뜻이다.

생성자 함수의 Title, Width, Height 프로퍼티 지정하는 밑에 이것을 추가해보자.

            Title = "Control Test";
            Width = 400;
            Height = 300;
            SizeToContent = SizeToContent.WidthAndHeight;

그러고 나서 실행시키면 아래 그림처럼 윈도우의 크기가 5개 버튼이 배치된 크기에 맞추어 표시된다.

 

버튼 크기에 맞추어 윈도우가 나타나다보니 윈도우 크기가 작아져서 Title이 표시되지 못하였다. 또한 윈도우의 타이틀바에는 default로 축소버튼과 최대버튼, 취소버튼이 표시되는데 이중 축소와 최대버튼을 없앨 수도 있다.

           ResizeMode = ResizeMode.NoResize;

를 SizeToContent 아래 라인에 추가해주자.

 

원하는 대로 최소, 최대버튼이 없어진 것을 볼 수있다. 윈도우를 만들 때는 필요없는 최소, 최대 버튼은 없애는 것이 좋다.

이제 버튼을 눌렀을 때 수행되는 이벤트 함수를 추가해보자. for 문 안에 다음의 이벤트 핸들러를 추가한다.

  btn.Click += btn_Click;

이 함수를 오른쪽 마우스 버튼을 누르고 생성->메서드 스텁 하고, 다음과 같이 완성한다. 버튼을 클릭하면 메시지박스에 버튼이름을 클릭했다는 메시지가 보이게 된다.

        private void btnInStack_Click(object sender, RoutedEventArgs e)
        {
            Button btn = sender as Button;
            MessageBox.Show(btn.Name + "을 Click 했습니다", "Button Click");
        }

 

 

마지막으로 StackPanel의 프로퍼티 중 Orientation을 바꾸어 보자.

stack.Orientation = Orientation.Horizontal;

이 문장에 의해 stack에는 5개의 버튼이 수평으로 나란히 정렬될 것이다.

 

 

최종 소스코드는 다음과 같다. 위의 설명에서는 버튼을 btn으로 설명했지만 소스코드에서는 34번째 줄에서 버튼을 btnInStack 이라는 이름으로 사용했다. 이를 btn으로 바꾸어도 문제없이 수행된다.

이 예제에서 SizeToContent = SizeToContent.WidthAndHeight; 로 했기때문에 WIdth와 Height는 지정해주지 않아도 된다.

 

 

BeeEye 드무