Canvas

설명

좌상(상하 좌우 가능)로부터의 상대 좌표를 지정한다.

샘플 소스

test.xaml

    <Canvas>
        <Button Content="TOP" Height="50" Width="500" Canvas.Top="0" Canvas.Left="0"/>
        <Button Content="BOTTOM" Height="50" Width="500" Canvas.Bottom="0" Canvas.Left="0"/>
        <Button Content="LEFT" Height="500" Width="50" Canvas.Top="0" Canvas.Left="0"/>
        <Button Content="RIGHT" Height="500" Width="50" Canvas.Top="0" Canvas.Right="0"/>
    </Canvas>

실행 결과

문제점

윈도우의 리사이즈에 대응하지 않는다.

버튼의 계층 구조가 판별하기 어렵다.

DockPanel

설명

DockPanel.Dock에서 지정한 방향으로 자식 요소를 붙입니다. (1개라고 의미하지 않는, 복수의 아이 요소가 필요.)

샘플 소스

test.xaml

    <DockPanel>
        <Button Content="TOP" Height="50"  DockPanel.Dock="Top"/>
        <Button Content="BOTTOM" Height="50" DockPanel.Dock="Bottom"/>
        <Button Content="LEFT" Width="50" DockPanel.Dock="Left" />
        <Button Content="RIGHT" Width="50" DockPanel.Dock="Right"/>
        <Button Content="center" Height="50" />
    </DockPanel>

실행 결과

문제점

윈도우의 리사이즈에 대응 가능하지만, 사용하기 어렵다.
center의 버튼을 없애면 레이아웃이 무너진다・・・

그리드

설명

테이블 형식으로 행과 열의 위치를 지정합니다.

샘플 소스

test.xaml

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50"/>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="50" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>
        <Button Content="TOP" Grid.Row="0" Grid.ColumnSpan="3"/>
        <Button Content="BOTTOM" Grid.Row="2" Grid.ColumnSpan="3"/>
        <Button Content="LEFT" Grid.Row="1" Grid.Column="0"/>
        <Button Content="RIGHT" Grid.Row="1" Grid.Column="2"/>
    </Grid>

실행 결과

문제점

비상이 되는 레이아웃으로, 행의 수, 열의 수가 어느 정도 정해져 있는 경우는, 이것이 편리함이 좋을 것 같다. 다만, 나중에 행, 열의 수가 바뀌면 귀찮게 될 생각된다.

StackPanel

설명

세로·가로로 쌓아 간다. (Orientation에서 종횡 지정 가능)

샘플 소스

test.xaml

    <StackPanel>
        <Button Content="TOP" Height="50"/>
        <StackPanel Orientation="Horizontal">
            <Button Content="LEFT" Width="50" />
            <Grid Height="400" Width="400" />
            <Button Content="RIGHT" Width="50"/>
        </StackPanel>
        <Button Content="BOTTOM" Height="50"/>
    </StackPanel>