[WPF] 5. 레이아웃과 Panel - 5.1 Grid, 5.1.2 cs 소스에서 코드로 배치하기

5. 레이아웃과 Panel - 5.1 Grid, 5.1.2 cs 소스에서 코드로 배치하기

---

5.1.2 cs 소스에서 코드로 배치하기

 

 이번에는 xmal에서 태그를 이용하지 않고 cs에서 소스를 이용하는 방법을 살펴보기로 합시다. 배치하는 것과 앞에서 Xaml 태그로 배치했던 것과 같습니다.

 

[그림 5.3] Grid 사용 예제 실행 화면

 

 먼저 WPF 응용 프로그램 프로젝트를 생성하세요.

[그림 5.4] WPF 응용 프로그램 프로젝트 생성

 

 먼저, MainWindow.xaml파일에 선언된 Grid 부분을 모두 제거합시다.

 

MainWindow.xaml

<Window x:Class="Grid_실습___소스_코드로_배치.MainWindow"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"         xmlns:local="clr-namespace:Grid_실습___소스_코드로_배치"         mc:Ignorable="d"         Title="MainWindow" Height="350" Width="525"/>

 

 Window 개체에 Grid를 배치할 경우에는 Window의 Content 속성을 사용합니다. 그리고 여기에서는 Grid의 테두리 선을 보이게 하여 테스트하기 쉽게 할게요. Grid의 ShowGridLines 속성을 true로 설정하면 테두리 선이 보입니다.

 

Grid grid = new Grid();           

this.Content = grid;

grid.ShowGridLines = true;

 

 이번에는 열과 행을 정의합시다. Grid의 RowDefinitions 컬렉션과 ColumnDefinitions 컬렉션에 추가하세요.

 

RowDefinition rd1 = new RowDefinition();

rd1.Height = new GridLength(40,GridUnitType.Pixel);

grid.RowDefinitions.Add(rd1);

 

 열의 높이나 행의 너비를 지정할 때에는 GridLength 개체를 이용합니다. 두 개의 입력 인자를 전달할 수 있는데 첫 번째 인자는 크기입니다. 그리고, 두 번째 인자는 GridUnitType 열거형에 열거된 값 들 중에 픽셀(GridUnitType.Pixel)이나 비율(GridUnitType.Star)로 할 것인지를 지정할 수 있습니다. 이 외에도 GridUnitType.Auto가 있는데 비율로 지정하는 것과 같습니다.

 

 이제 자식 UI를 배치하는 것을 해 봅시다. UI를 Grid의 자식으로 추가 할 때는 Grid 개체의 Children 컬렉션의 Add 메서드를 이용합니다.

//<TextBlock Name="tb_name" Text="이름:" VerticalAlignment="Center"/>

tb_name = new TextBlock();

tb_name.Text = "이름:";

tb_name.VerticalAlignment = VerticalAlignment.Center;

grid.Children.Add(tb_name);

 

 자식 UI를 Grid의 특정 행이나 열에 배치할 때는 Grid의 정적 메서드를 사용합니다. 그리고 여러 행이나 여러 열에 배치 할 때도 마찬가지입니다. SetRow는 열을 지정하는 정적 메서드, SetColumn은 행을 지정하는 정적 메서드, SetRowSpan과 SetColumnSpan은 여러 열과 행을 차지하게 하는 정적 메서드 입니다.

 

//<TextBox Name="tbox_name" Grid.Column="1" Grid.ColumnSpan="2"

//    Margin="2,2,2,2" Background="Cyan"/>

tbox_name = new TextBox();

tb_name.Background = Brushes.Cyan;

tb_name.Margin = new Thickness(2, 2, 2, 2);

Grid.SetColumn(tb_name, 1);

Grid.SetColumnSpan(tb_name,2);

grid.Children.Add(tbox_name);

  

MainWindow.xaml.cs

using System.Windows; using System.Windows.Controls; using System.Windows.Media; namespace Ex_Grid {     public partial class MainWindow : Window     {         TextBlock tb_name;         TextBox tbox_name;         TextBlock tb_age;         TextBox tbox_age;         TextBlock tb_intro;         TextBox tbox_intro;         Button btn_ok;         TextBlock tb_about;           public MainWindow()         {             InitializeComponent();             Layout();         }           private void Layout()         {             Grid grid = new Grid();                        this.Content = grid;             grid.ShowGridLines = true;             RowColumDefinitions(grid);             ChildrenAdd(grid);         }           private void RowColumDefinitions(Grid grid)         {             RowDefinition rd1 = new RowDefinition();             rd1.Height = new GridLength(40, GridUnitType.Pixel);             grid.RowDefinitions.Add(rd1);               RowDefinition rd2 = new RowDefinition();             rd2.Height = new GridLength(40, GridUnitType.Pixel);             grid.RowDefinitions.Add(rd2);               RowDefinition rd3 = new RowDefinition();             rd3.Height = new GridLength(2, GridUnitType.Star);             grid.RowDefinitions.Add(rd3);               RowDefinition rd4 = new RowDefinition();             rd4.Height = new GridLength(1, GridUnitType.Star);             grid.RowDefinitions.Add(rd4);               ColumnDefinition cd1 = new ColumnDefinition();             cd1.Width = new GridLength(60, GridUnitType.Pixel);             grid.ColumnDefinitions.Add(cd1);               ColumnDefinition cd2 = new ColumnDefinition();             cd2.Width = new GridLength(1, GridUnitType.Star);             grid.ColumnDefinitions.Add(cd2);               ColumnDefinition cd3 = new ColumnDefinition();             cd3.Width = new GridLength(80, GridUnitType.Pixel);             grid.ColumnDefinitions.Add(cd3);         }           private void ChildrenAdd(Grid grid)         {             //<TextBlock Name="tb_name" Text="이름:" VerticalAlignment="Center"/>             tb_name = new TextBlock();             tb_name.Text = "이름:";             tb_name.VerticalAlignment = VerticalAlignment.Center;             grid.Children.Add(tb_name);               //<TextBox Name="tbox_name" Grid.Column="1" Grid.ColumnSpan="2"             //    Margin="2,2,2,2" Background="Cyan"/>             tbox_name = new TextBox();             tbox_name.Background = Brushes.Cyan;             tbox_name.Margin = new Thickness(2, 2, 2, 2);             Grid.SetColumn(tbox_name, 1);             Grid.SetColumnSpan(tbox_name, 2);             grid.Children.Add(tbox_name);               //<TextBlock Name="tb_age" Text="나이:" Grid.Row="1" VerticalAlignment="Center"/>             tb_age = new TextBlock();             tb_age.Text = "나이:";             tb_age.VerticalAlignment = VerticalAlignment.Center;             Grid.SetRow(tb_age, 1);             grid.Children.Add(tb_age);               //<TextBox Name="tbox_age" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"             //    Margin="2,2,2,2" Background="Cyan"/>             tbox_age = new TextBox();             tbox_age.Margin = new Thickness(2, 2, 2, 2);             tbox_age.Background = Brushes.Cyan;             Grid.SetRow(tbox_age, 1);             Grid.SetColumn(tbox_age, 1);             Grid.SetColumnSpan(tbox_age, 2);             grid.Children.Add(tbox_age);               //<TextBlock Name="tb_intro" Text="소개:" Grid.Row="2" VerticalAlignment="Top"/>             tb_intro = new TextBlock();             tb_intro.Text = "소개:";             tb_intro.VerticalAlignment = VerticalAlignment.Top;             Grid.SetRow(tb_intro, 2);             grid.Children.Add(tb_intro);               //<TextBox Name="tbox_intro" Grid.Row="2" Grid.Column="1" AcceptsReturn="True"             //    Background="Cyan" />             tbox_intro = new TextBox();             tbox_intro.AcceptsReturn = true;             tbox_intro.Background = Brushes.Cyan;             Grid.SetRow(tbox_intro, 2);             Grid.SetColumn(tbox_intro, 1);             grid.Children.Add(tbox_intro);               //<Button Name="btn_ok" Grid.Row="2" Grid.Column="2" Content="등록" />             btn_ok = new Button();             btn_ok.Content = "등록";             Grid.SetRow(btn_ok, 2);             Grid.SetColumn(btn_ok, 2);             grid.Children.Add(btn_ok);               //<TextBlock Name="tb_about" Text="Grid를 이용하여 배치하기" Grid.Row="3"             //    Grid.ColumnSpan="3" HorizontalAlignment="Center"/>             tb_about = new TextBlock();             tb_about.Text = "Grid를 이용하여 배치하기";             tb_about.HorizontalAlignment = HorizontalAlignment.Center;             Grid.SetRow(tb_about, 3);             Grid.SetColumnSpan(tb_about, 3);             grid.Children.Add(tb_about);         }      } }

 

 이처럼 xaml로 표현한 것을 cs 소스 코드로 작성하는 연습하면 보다 단단하게 WPF를 익힐 수 있으며 협업할 때에 좋은 결과를 얻을 수 있습니다.

---

실습 파일

Grid 실습 - 소스 코드로 배치.zip

관련 게시글

[WPF] 5. 레이아웃과 Panel

[WPF] 5. 레이아웃과 Panel - 5.1 Grid, 5.1.1 xaml 태그를 이용하여 배치

[WPF] 5. 레이아웃과 Panel - 5.2 Canvas, 5.2.1 xaml 태그를 이용하여 배치

[WPF] 5. 레이아웃과 Panel - 5.2 Canvas, 5.2.2 cs 소스에서 코드로 배치하기

[WPF] 5. 레이아웃과 Panel - 5.3 StackPanel, 5.3.1 xaml 태그를 이용하여 배치

[WPF] 5. 레이아웃과 Panel - 5.3 StackPanel, 5.3.2 cs 소스에서 코드로 배치하기

[WPF] 5. 레이아웃과 Panel - 5.4 WrapPanel

[WPF] 5. 레이아웃과 Panel - 5.5 DockPanel