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

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

---

5.2 Canvas

 

 Canvas는 Windows Form에서 UI를 배치하는 방법과 매우 흡사합니다. Canvas에서는 자식 UI를 Canvas 영역 내에 배치하고자 하는 상대 좌표를 지정할 수 있습니다. 그리고, Grid와 다르게 Canvas의 크기가 변한다 하더라도 자식 UI들의 크기나 Canvas내에 상대적 위치는 변하지 않습니다. 여러분들이 만들고자 하는 프로그램에서 창의 크기에 따라 UI요소들의 크기가 자동으로 조정이 되게 하고 싶지 않은 경우에 사용하세요. 

5.2.1 xaml에서 태그를 이용하여 배치하기

 Canvas를 사용할 경우에는 xaml 파일에 태그에 직접 작성하는 것 보다는 디자인 창에서 마우스를 이용하여 원하는 위치에 배치하고 크기를 조절하는 것이 효과적입니다. 디자인 창에 원하는 UI를 배치하고 크기를 조절하면 통합 개발 환경에서는 자동으로 xaml 파일에 태그를 작성해 줍니다.

 

 Canvas를 이용하여 [그림 5.5]처럼 배치해 봅시다.

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

 

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

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

 

 이를 위해 제일 먼저 디폴트로 선언된 Grid를 Canvas로 변경하세요. Background 속성을 이용하면 배경 색을 설정할 수 있습니다.

<Canvas Background="Bisque">     

</Canvas>

 

 Canvas에 자식 컨트롤을 배치할 때는 컨트롤 요소의 Canvas.Left, Canvas.Top 등의 속성을 이용하여 값을 명시합니다.

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

이름:

</Label>

 

 실습할 내용에 맞게 나머지 자식 컨트롤들도 배치해 보세요. 여기에서도 자식 컨트롤 배치 이외에 기능적인 구현은 하지 않을게요.

MainWindow.xaml

<Window x:Class="Canvas_실습___xaml_태그로_배치.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_실습___xaml_태그로_배치"         mc:Ignorable="d"         Title="MainWindow" Height="300" Width="300">     <Canvas Background="Bisque">         <Label Canvas.Left="16" Canvas.Top="13" Height="31" Name="lb_name" Width="45">이름:         </Label>         <TextBox Canvas.Left="63" Canvas.Top="15" Height="23" Name="tbox_name" Width="194" />         <Label Canvas.Left="16" Canvas.Top="44" Height="26" Name="lb_intro" Width="63">자기 소개         </Label>         <RichTextBox Canvas.Left="16" Canvas.Top="69" Height="164"             Name="rtb_content" Width="241" />         <Label Canvas.Left="0" Canvas.Top="234" Height="28" Name="lb_ex" Width="79">Canvas 예제         </Label>     </Canvas> </Window>

  

---

실습 파일

Canvas 실습 - xaml 태그로 배치.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.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