안녕하세요. 언제나 휴일에 언휴예요.
이번 강의는 Window.xaml에 디폴트로 제공하는 Grid 패널에 컨트롤을 배치해 볼 거예요.
배치할 모습 Grid의 행과 열 폭 결정하기 원하는 행과 열에 배치하기 여러 행이나 여러 열 차지하기
배치할 모습
4개의 행과 3개의 열로 구성할 거예요.
첫 번째 컬럼에는 이름(1행), 나이(2행), 소개(3행)를 TextBlock으로 배치합니다.
이름(1행)과 나이(2행)를 입력하는 TextBox는 2개의 열을 차지하게 배치합니다.
소개(3행)를 입력하는 TextBox는 여러 줄을 입력 가능하게 설정합니다.
등록할 때 사용하는 Button을 3행, 3열에 배치합니다.
마지막으로 “Grid를 이용하여 배치하기”를 표시할 TextBlock은 전체 화면의 가운데(수평)에 배치합니다.
Grid의 행과 열 폭 결정하기
4행과 3열로 정의할 거예요.
행은 Grid.RowDefinations에 자식 요소로 RowDefination 요소를 추가합니다.
열은 Grid.ColumnDefinations에 자식 요소로 ColumnDefination 요소를 추가합니다.
고정 너비나 높이는 Width 속성과 Height 속성에 숫자로 입력합니다.
비율로 표현할 때는 *를 표시합니다.
원하는 행과 열에 배치하기
원하는 행과 열에 배치할 때는 Grid.Column과 Grid.Row 특성을 이용합니다.
이 때 설정할 값은 인덱스이며 0부터 출발하는 것에 주의하세요.
이름, 나이, 소개를 1행, 2행, 3행에 배치하려면 인덱스는 0, 1, 2를 주어야 합니다.
여러 행이나 여러 열 차지하기
여러 행이나 여러 열을 차지하게 배치할 때는 Grid.RowSpan이나 Grid.ColumnSpan을 이용합니다.
이 때는 칸 수를 입력하는 것이므로 1칸은 1, 2칸은 2를 입력합니다.
Margin 특성은 왼쪽, 오른쪽, 위쪽, 아래쪽과의 여백을 지정한 것입니다.
소개를 입력하는 TexbBox(tbox_intro)에 AcceptReturn은 여러 줄을 입력할 수 있도록 엔터 키를 수용하겠다고 설정한 값입니다.
“Grid를 이용하여 배치하기”는 전체 중앙(수평)에 배치하기 위해 전체 컬럼(Grid.ColumnSpan=”3″)을 차지하게 배치한 후에 수평 배치를 중앙(HorizontalAlignment=”Center”)를 지정하였습니다.