[WPF] 1. 화면 구성 - Grid

[WPF] 1. 화면 구성

Grid는 RowDefinitions와 ColumnDefinitions의 자식으로 Row, Column을 등록하여 화면을 분할하며

Grid에 자식 Control을 추가하고 이에 좌표를 등록하여 위치를 배정할 수 있습니다.

Control을 화면에 가시화하는 방법은 Xaml을 이용한 방법과 Code를 이용한 방법이 있습니다.

WPF_Example_1_Layout_Grid.zip

다운로드

---

Xaml에서는 RowDefinitions와 ColumnDefinitions에서 Grid 내부의 영역을 분할합니다.

    <!--In xaml-->
    <Grid Name="grid">
        <!--Grid에 Definitions설정합니다.-->
        <Grid.RowDefinitions>
            <RowDefinition Height="150"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>

        <!--빨간버튼-->
        <Button Grid.Row="0" Grid.Column="0"
                Background="Red"/>
        <!--파란버튼-->
        <Button Grid.Row="0" Grid.Column="1" Grid.RowSpan="2"
                Background="Blue"/>
        <!--초록버튼-->
        <Button Grid.Row="1" Grid.Column="0" Grid.RowSpan="2"
                Background="Green"/>

    </Grid> 

 

---

In Code를 작성하기 전에 Xaml에서 Grid의 name을 grid로 설정합니다.   

<Grid Name="grid"> 

InCode에서도 RowDefinitions, ColumnDefinitions을 설정합니다.

Definition의 크기의 단위는 GridLength를 사용하기때문에 새로운 GridLength변수를 생성하고 그 값을 인자로 넣어줍니다.

이후 버튼을 생성하고 Grid.SetRow, Grid.SetColumn를 사용하여 위치를 지정하고  Grid.SetRowSpan, Grid.SetColumnSpan를 사용하여 Grid내부에서 사용하는 영역의 크기를 지정합니다.

마지막으로 grid.Children.Add(UIElement elemen)함수로 각 버튼을 grid변수의 자식으로 추가합니다.

//In Code
public MainWindow()
{
    InitializeComponent();
    //Grid에 Definitions설정합니다.
    grid.RowDefinitions.Add(new RowDefinition(){ Height = new GridLength(150, GridUnitType.Pixel) });
    grid.RowDefinitions.Add(new RowDefinition(){ Height = new GridLength(1, GridUnitType.Star) });
    grid.RowDefinitions.Add(new RowDefinition(){ Height = new GridLength(1, GridUnitType.Star) });
    grid.ColumnDefinitions.Add(new ColumnDefinition(){ Width = new GridLength(1, GridUnitType.Star) });
    grid.ColumnDefinitions.Add(new ColumnDefinition(){ Width = new GridLength(1, GridUnitType.Star) });
    //빨간버튼 생성
    Button btnRed = new Button()
    {
        Background = Brushes.Red
    };
    //빨간버튼의 위치 설정
    Grid.SetRow(btnRed, 0);
    Grid.SetColumn(btnRed, 0);
    //Grid에 빨간버튼 넣기
    grid.Children.Add(btnRed);
    //파란버튼 생성
    Button btnBlue = new Button()
    {
        Background = Brushes.Blue
    };
    //파란버튼의 위치 설정
    Grid.SetRow(btnBlue, 0);
    Grid.SetColumn(btnBlue, 1);
    //Grid에서 파란버튼의 세로 영역크기 지정
    Grid.SetRowSpan(btnBlue, 2);
    //Grid에 파란버튼 넣기
    grid.Children.Add(btnBlue);
    //초록버튼 생성
    Button btnGreen = new Button()
    {
        Background = Brushes.Green
    };
    //초록버튼의 위치 설정
    Grid.SetRow(btnGreen, 1);
    Grid.SetColumn(btnGreen, 0);
    //Grid에서 초록버튼의 세로 영역크기 지정
    Grid.SetRowSpan(btnGreen, 2);
    //Grid에 초록버튼 넣기
    grid.Children.Add(btnGreen);
}