[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 - 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 소스에서 코드로 배치하기