xaml
레이아웃 컨트롤

캔버스

Canvas 는 패널 중 가장 단순합니다. 항목을 지정된 Top/Left 좌표에 배치합니다.

<Canvas>
  <TextBlock 
    Canvas.Top="50" 
    Canvas.Left="50" 
    Text="This is located at 50, 50"/>
  <TextBlock 
    Canvas.Top="100"
    Canvas.Left="50"
    Width="150"
    Height="23"
    Text="This is located at 50, 100 with height 23 and width 150"/>
</Canvas>

DockPanel

DockPanel 은 컨트롤에 배치 된 순서대로 dock 속성에 따라 컨트롤을 정렬합니다.

참고 : DockPanel 은 WPF 프레임 워크의 일부이지만 Silverlight / WinRT / UWP와 함께 제공되지 않습니다. 오픈 소스 구현은 쉽게 찾을 수 있습니다.

<DockPanel LastChildFill="False">
  <!-- This will strech along the top of the panel -->
  <Button DockPanel.Dock="Top" Content="Top"/>
  <!-- This will strech along the bottom of the panel -->
  <Button DockPanel.Dock="Bottom" Content="Bottom"/>
  <!-- This will strech along the remaining space in the left of the panel -->
  <Button DockPanel.Dock="Left" Content="Left"/>
  <!-- This will strech along the remaining space in the right of the panel -->
  <Button DockPanel.Dock="Right" Content="Right"/>
  <!-- Since LastChildFill is false, this will be placed at the panel's right, to the left of the last button-->
  <Button DockPanel.Dock="Right" Content="Right"/>
</DockPanel>

<!-- When lastChildFill is true, the last control in the panel will fill the remaining space, no matter what Dock was set to it -->
<DockPanel LastChildFill="True">
  <!-- This will strech along the top of the panel -->
  <Button DockPanel.Dock="Top" Content="Top"/>
  <!-- This will strech along the bottom of the panel -->
  <Button DockPanel.Dock="Bottom" Content="Bottom"/>
  <!-- This will strech along the remaining space in the left of the panel -->
  <Button DockPanel.Dock="Left" Content="Left"/>
  <!-- This will strech along the remaining space in the right of the panel -->
  <Button DockPanel.Dock="Right" Content="Right"/>
  <!-- Since LastChildFill is true, this will fill the remaining space-->
  <Button DockPanel.Dock="Right" Content="Fill"/>
</DockPanel>

StackPanel

StackPanel은 컨트롤을 하나씩 배치합니다. 이것은 모든 컨트롤의 도킹이 같은 값으로 설정된 도킹 패널처럼 작동합니다.

<!-- The default StackPanel is oriented vertically, so the controls will be presented in order from top to bottom -->
<StackPanel>
  <Button Content="First"/>
  <Button Content="Second"/>
  <Button Content="Third"/>
  <Button Content="Fourth"/>
</StackPanel>

<!-- Setting the Orientation property to Horizontal will display the control in order from left to right (or right to left, according to the FlowDirection property) -->
<StackPanel Orientation="Horizontal">
  <Button Content="First"/>
  <Button Content="Second"/>
  <Button Content="Third"/>
  <Button Content="Fourth"/>
</StackPanel>

항목을 아래에서 위로 쌓으려면 독 패널을 사용하십시오.

그리드

Grid 는 테이블 레이아웃을 만드는 데 사용됩니다.

기본 행 및 열 정의

<Grid>
  <!-- Define 3 columns with width of 100 -->
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="100"/>
    <ColumnDefinition Width="100"/>
    <ColumnDefinition Width="100"/>
  </Grid.ColumnDefinitions>
  <!-- Define 3 rows with height of 50 -->
  <Grid.RowDefinitions>
    <RowDefinition Height="50"/>
    <RowDefinition Height="50"/>
    <RowDefinition Height="50"/>
  </Grid.RowDefinitions>
  <!-- This is placed at the top left (first row, first column) -->
  <Button 
      Grid.Column="0"
      Grid.Row="0"
      Content="Top Left"/>
  <!-- This is placed at the top left (first row, second column) -->
  <Button 
      Grid.Column="1"
      Grid.Row="0"
      Content="Top Center"/>
  <!-- This is placed at the center (second row, second column) -->
  <Button 
      Grid.Column="1"
      Grid.Row="1"
      Content="Center"/>
  <!-- This is placed at the bottom right (third row, third column) -->
  <Button 
      Grid.Column="2"
      Grid.Row="2"
      Content="Bottom Right"/>
</Grid>

참고 : 다음 예제는 모두 열만 사용하지만 행에도 적용 할 수 있습니다 .

자동 크기 정의

열과 행의 너비 / 높이를 "자동"으로 정의 할 수 있습니다. 자동 크기는 내용을 표시하는 데 필요한만큼의 공간을 차지 하며 더 이상 필요 하지 않습니다.
자동 크기 정의는 고정 된 크기 정의와 함께 사용할 수 있습니다.

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="50"/>
  </Grid.ColumnDefinitions>
  <!-- This column won't take much space -->
  <Button Grid.Column="0" Content="Small"/>
  <!-- This column will take much more space -->
  <Button Grid.Column="1" Content="This text will be very long."/>
  <!-- This column will take exactly 50 px -->
  <Button Grid.Column="2" Content="This text will be cut"/>
</Grid>

간단한 별 크기 정의

열과 행은 * 를 너비 / 높이로 정의 할 수 있습니다. 별 크기의 행 / 열은 내용에 관계없이 별다른 공간을 차지하지 않습니다.
스타 크기 정의는 고정 및 자동 크기 정의와 함께 사용할 수 있습니다. 별 크기가 기본값이므로 열 너비 또는 행 높이를 생략 할 수 있습니다.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="50"/>
    </Grid.ColumnDefinitions>
    <!-- This column will be as wide as it can -->
    <Button Grid.Column="0" Content="Small"/>
    <!-- This column will take exactly 50 px -->
    <Button Grid.Column="2" Content="This text will be cut"/>
</Grid>

비례 별 크기 정의

별이 가능한 한 많은 공간을 차지한다는 사실 외에 별 정의도 서로 비례합니다. 다른 언급이 없다면, 각 별의 정의는 현재 그리드의 다른 별처럼 많은 공간을 차지할 것입니다.

그러나, 단순히 승수를 더함으로써 다양한 정의의 크기 사이의 비율을 정의 할 수 있습니다. 따라서 2* 로 정의 된 열은 * 정의 된 열의 두 배입니다. 단일 단위의 너비는 사용 가능한 공간을 승수의 합으로 나누어 계산합니다 (1이 아닌 경우).
따라서 * , 2* , * 로 정의 된 3 열의 격자는 1/4, 1/2, 1/4로 표시됩니다.
그리고 2* , 3* 으로 정의 된 2 열은 2/5, 3/5로 표시됩니다.

세트에 자동 또는 고정 된 정의가있는 경우, 먼저 계산되고, 별 정의는 그 이후의 나머지 공간을 차지합니다.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <!-- This column will be as wide as the third column -->
    <Button Grid.Column="0" Content="Small"/>
    <!-- This column will be twice as wide as the rest -->
    <Button Grid.Column="1" Content="This text will be very long."/>
    <!-- This column will be as wide as the first column -->
    <Button Grid.Column="2" Content="This text will may be cut"/>
</Grid>

열 / 행 범위

Row / ColumnSpan으로 컨트롤을 셀 너머로 늘릴 수 있습니다. 설정되는 값은 행 / 열 수입니다.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <!-- This control will streach across most of the grid -->
    <Button Grid.Column="0" Grid.ColumnSpan="2" Content="Small"/>
    <Button Grid.Column="2" Content="This text will may be cut"/>
</Grid>

WrapPanel

랩 패널은 스택 패널과 비슷한 방식으로 작동합니다. 항목이 크기를 초과 할 것으로 인식하는 경우를 제외하고 방향에 따라 항목을 새로운 행 / 열로 래핑합니다.

가로 방향

<WrapPanel Width="100">
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</WrapPanel>

수직 포장 패널

<WrapPanel Height="70" Orientation="Vertical">
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</WrapPanel>

유니폼 그리드

유니폼 그리드는 모든 자식을 그리드 레이아웃에 배치합니다. 각 자식은 자체 셀입니다. 모든 셀의 크기는 동일합니다. 모든 행과 열 정의가 * 로 설정된 그리드의 줄임말로 생각할 수 있습니다.

기본 행 및 열

기본적으로 UniformGrid는 같은 수의 행과 열을 만들려고 시도합니다. 행이 길어지면 새 열이 추가됩니다.

이 코드는 첫 번째 2 개의 행이 채워지고 마지막 행이 하나의 버튼으로 구성된 3x3 격자를 생성합니다.

<UniformGrid>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</UniformGrid>

지정된 행 / 열

UniformGrid에 보유하고 싶은 행 및 / 또는 열의 수를 정확히 알 수 있습니다.

<UniformGrid Columns="2" >
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</UniformGrid>

참고 : 행과 열이 모두 설정되어 있고 셀보다 자식이 더 많은 경우 표의 마지막 자식은 표시되지 않습니다.

FirstColumn 속성

Columns 속성이 설정되면 FirstColumn 속성을 설정할 수 있습니다. 이 속성은 첫 번째 자식이 표시되기 전에 x 행의 빈 셀을 입력합니다. FirstColumn은 Columns 속성보다 작은 숫자로 설정해야합니다.

이 예제에서는 첫 번째 행의 두 번째 열에 첫 번째 버튼이 표시됩니다.

<UniformGrid Columns="2" FirstColumn="1">
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</UniformGrid>

상대 패널

RelativePanel 은 Windows 10에 도입되었으며 주로 적응 레이아웃을 지원하는 데 사용됩니다.이 레이아웃에서는 사용 가능한 공간에 따라 패널의 하위 요소가 다르게 배치됩니다. RelativePanel 은 일반적으로 화면 또는 창 크기, 방향 또는 사용 사례에 맞게 레이아웃 구성을 전환하는 데 사용되는 시각적 상태 와 함께 사용됩니다. 하위 요소는 패널 및 다른 요소와의 관계를 정의하는 첨부 된 속성을 사용합니다.

<RelativePanel
    VerticalAlignment="Stretch"
    HorizontalAlignment="Stretch">
    <Rectangle
        x:Name="rectangle1"
        RelativePanel.AlignLeftWithPanel="True"
        Width="360"
        Height="50"
        Fill="Red"/>
    <Rectangle
        x:Name="rectangle2"
        RelativePanel.Below="rectangle1"
        Width="360"
        Height="50"
        Fill="Green" />
</RelativePanel>
<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState>
            <VisualState.StateTriggers>
                <!--VisualState to be triggered when window width is >=720 effective pixels.-->
                <AdaptiveTrigger
                    MinWindowWidth="720" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter
                    Target="rectangle2.(RelativePanel.Below)"
                    Value="{x:Null}" />
                <Setter
                    Target="rectangle2.(RelativePanel.RightOf)"
                    Value="rectangle1" />
                <Setter
                    Target="rectangle1.(RelativePanel.AlignLeftWithPanel)"
                    Value="False" />
                <Setter
                    Target="rectangle1.(RelativePanel.AlignVerticalCenterWithPanel)"
                    Value="True" />
                <Setter
                    Target="rectangle2.(RelativePanel.AlignVerticalCenterWithPanel)"
                    Value="True" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>