프로그래밍 기술/WPF

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

언제나휴일 2016. 5. 24. 17:10
반응형

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


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

 

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

 

Grid 사용 예제 실행 화면

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

 

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

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

반응형