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

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

---

5.2.2 cs 소스 파일에서 코드로 배치하기

 이번에는 cs 파일에서 직접 소스를 작성하여 배치하는 것에 대해 살펴봅시다. 실제 WPF 프로그램을 작성할 때 UI 배치를 소스에서 작성하는 것은 자주 발생하는 작업은 아니지만 cs 파일에서 소스를 직접 작성해 보면 좀 더 명확하게 이해할 수 있어요.

 

 실습할 배치 모습은 앞에서 xaml 태그를 이용한 것과 같습니다. 

[그림 5.7] Canvas 사용 예제 실행 화면

 

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

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

 

 먼저, xaml 파일에 Window 요소 내부를 지우세요.

<Window x:Class="Canvas_실습___소스_코드로_배치.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:Canvas_실습___소스_코드로_배치"

        mc:Ignorable="d"

     Title="MainWindow" Height="300" Width="300"/>

  

 Canvas 개체를 생성하는 코드부터 시작해야겠지요. 생성한 Canvas 개체의 배경 브러쉬를 변경할 경우에는 Canvas 개체의 Background 속성을 설정합니다.

 

//<Canvas Background="Bisque"></Canvas>

canvas = new Canvas();

canvas.Background = Brushes.Bisque;

this.Content = canvas;

 

 Canvas 개체에 UI를 자식으로 추가를 하는 방법은 Grid처럼 Canvas의 Children 속성의 Add 메서드를 이용합니다. 이는 기반 클래스 Panel에서 제공하고 있기 때문입니다. 하지만 Canvas에 UI를 자식으로 배치할 때는 Canvas의 작업 영역에서의 배치할 좌표를 지정합니다. 배치할 좌표를 지정할 때는 Canvas의 정적 메서드 SetLeft, SetTop, SetRight, SetBottom 등을 사용하세요.

 

//<Label Canvas.Left="16" Canvas.Top="13" Height="31" Name="lb_name" Width="45">이름</Label>

lb_name = new Label();

lb_name.Content = "이름";

lb_name.Height = 31;

lb_name.Width = 45;           

Canvas.SetLeft(lb_name, 16);

Canvas.SetTop(lb_name, 13);

canvas.Children.Add(lb_name);

 

MainWindow.xaml.cs

using System.Windows; using System.Windows.Controls; using System.Windows.Media; namespace Ex_Canvas {     public partial class MainWindow : Window     {         Canvas canvas;         Label lb_name;         TextBox tbox_name;         Label lb_intro;         RichTextBox rtb_content;         Label lb_ex;                 public MainWindow()         {             InitializeComponent();             LayOut();         }           private void LayOut()         {             //<Canvas Background="Bisque"></Canvas>             canvas = new Canvas();             canvas.Background = Brushes.Bisque;             this.Content = canvas;             ChildrenAdd();                    }           private void ChildrenAdd()         {             //<Label Canvas.Left="16" Canvas.Top="13" Height="31" Name="lb_name" Width="45">이름             //</Label>             lb_name = new Label();             lb_name.Content = "이름";             lb_name.Height = 31;             lb_name.Width = 45;                        Canvas.SetLeft(lb_name, 16);             Canvas.SetTop(lb_name, 13);                         canvas.Children.Add(lb_name);               //<TextBox Canvas.Left="63" Canvas.Top="15" Height="23" Name="tbox_name"             //    Width="194" />                tbox_name = new TextBox();             tbox_name.Height = 23;             tbox_name.Width = 194;             Canvas.SetLeft(tbox_name, 63);             Canvas.SetTop(tbox_name, 15);             canvas.Children.Add(tbox_name);               //<Label Canvas.Left="16" Canvas.Top="44" Height="26" Name="lb_intro" Width="63">             //    자기 소개</Label>             lb_intro = new Label();             lb_intro.Content = "자기 소개";             lb_intro.Height = 26;             lb_intro.Width = 63;             Canvas.SetLeft(lb_intro, 16);             Canvas.SetTop(lb_intro, 44);             canvas.Children.Add(lb_intro);               //<RichTextBox Canvas.Left="16" Canvas.Top="69" Height="164"             //    Name="rtb_content" Width="241" />             rtb_content = new RichTextBox();             rtb_content.Height = 164;             rtb_content.Width = 241;             Canvas.SetLeft(rtb_content, 16);             Canvas.SetTop(rtb_content, 69);             canvas.Children.Add(rtb_content);               //<Label Canvas.Left="0" Canvas.Top="234" Height="28" Name="lb_ex" Width="79">             //     Canvas 예제</Label>             lb_ex = new Label();             lb_ex.Content = "Canvas 예제";             lb_ex.Height = 23;             lb_ex.Width = 79;             Canvas.SetLeft(lb_ex, 0);             Canvas.SetTop(lb_ex, 234);             canvas.Children.Add(lb_ex);                       }     } }

  

---

실습 파일

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

관련 게시글

[WPF] 5. 레이아웃과 Panel

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

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

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

[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