Part2. Using Layouts Management

u  Understand Layouts Controls

1.     Canvas

-       컨트롤 내부에 자식 컨트롤들을 가질 수 있으며, 자식 컨트롤들은 부모 컨트롤의 왼쪽 상단의 시작점을 기준으로 자신의 위치를 고정합니다.

-       Canvas 컨트롤 역시도 또 다른 Canvas 컨트롤을 자식으로 가질 수 있습니다.

Code

<UserControl x:Class="DemoSample.Page"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     Width="400" Height="300">     <Canvas x:Name="LayoutRoot" Background="DarkOrange"> <Button Content="Button1" Width="100" Height="50"  Canvas.Top="80" Canvas.Left="50" Canvas.ZIndex="1"  ></Button> <Button Content="Button2" Width="100" Height="50"  Canvas.Top="120" Canvas.Left="110"  Canvas.ZIndex="0" ></Button>     </Canvas> </UserControl>

Result

Description

ð  Canvas.Top는 해당 Canvas 영역의 상단 시작점 좌표를 나타내며, Canvas.Left는 해당 Canvas 영역의 왼쪽 시작점 좌표를 나타냅니다.

ð  Canvas.ZIndex는 해당 Canvas 영역의 렌더링 순서를 나타내며, 숫자가 높을수록, 영역의 상단에 나타납니다.

2.     StackPanel

-       Canvas와 같이, 자식 컨트롤을 가질 수 있습니다. 하지만, 절대 위치를 지정하지 않고, StackPanel에 속한 자식들을 순서대로 표시합니다.

Code

<UserControl x:Class="DemoSample.Page"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     Width="400" Height="300">     <StackPanel x:Name="LayoutRoot" Background="DarkOrange" Orientation="Horizontal">         <Button Width="100" Height="50" Content="Button1"></Button>         <Button Width="100" Height="50" Content="Button2"></Button>         <Button Width="100" Height="50" Content="Button3"></Button>     </StackPanel> </UserControl>

Result

Description

ð  Orientation 속성에 Horizontal(수평), Vertical(수직) 지정으로 자식 컨트롤의 정렬 방향 지정을 합니다.

3.     Grid

-       Grid 컨트롤 역시 자식 컨트롤을 가질 수 있으며, HTML의 테이블과 흡사하지만, 해당 셀에 직접 컨트롤을 위치하지 못합니다.

-       RowDefinitions 와 ColumnDefinitions 속성을 이용하여 그리드의 열과 행을 정의해야 합니다.

Code

<UserControl x:Class="DemoSample.Page"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     Width="400" Height="300">     <Grid x:Name="LayoutRoot" Background="DarkOrange" ShowGridLines="True">         <Grid.ColumnDefinitions>             <ColumnDefinition Width="100"></ColumnDefinition>             <ColumnDefinition Width="200"></ColumnDefinition>             <ColumnDefinition Width="*"></ColumnDefinition>         </Grid.ColumnDefinitions>         <Grid.RowDefinitions>             <RowDefinition Height="100"></RowDefinition>             <RowDefinition Height="*"></RowDefinition>             <RowDefinition Height="100"></RowDefinition>         </Grid.RowDefinitions>         <Button Width="100" Height="50" Content="Button1" Grid.Row="0"></Button>         <Button Width="100" Height="50" Content="Button2"  Grid.Row="2" Grid.Column="2"></Button>         <Button Width="100" Height="50" Content="Button3"  Grid.Row="1" Grid.Column="1" Grid.RowSpan="2"></Button>     </Grid> </UserControl>

Result

Description

ð  코드의 음영 부분을 보시면 3행 3열로 정의해 보았습니다. 이때, 행과 열의 Width 및 Height 를 지정해 주셔야 합니다. 유심히 보시면, 정의 부분의 Width, Height 에 * 로 지정한 부분이 있는데, 열과 행 크기를 비율로 설정할 수 있습니다.

ð  아래 코드로 설명하자면, 3열로 각각 *, *, 2*의 Height를 지정하였습니다.

이 같은 경우는 그리드 영역를 비율로 설정합니다. 따라서 아래 코드는 Grid 높이가 300이므로, 첫번째 열 높이 100, 두번째 열 높이 200, 세번째 열 높이 100으로 자동 지정됩니다.

<Grid x:Name="LayoutRoot" Background="DarkOrange" ShowGridLines="True" Height="300">         <Grid.RowDefinitions>             <RowDefinition Height="*"></RowDefinition>             <RowDefinition Height="*"></RowDefinition>             <RowDefinition Height="2*"></RowDefinition> </Grid.RowDefinitions> <Button Width="100" Height="50" Content="Button1" Grid.Row="0"></Button>         <Button Width="100" Height="50" Content="Button2"  Grid.Row="2"></Button>         <Button Width="100" Height="50" Content="Button3"  Grid.Row="1"></Button> </Grid>