언어: HTML | XAML

빠른 시작: 레이아웃 정의(XAML)

Applies to Windows and Windows Phone

C++, C# 또는 Visual Basic을 사용하여 Windows 런타임 앱을 만드는 경우 여러 장치 및 응용 프로그램 상태를 지원하는 데 도움이 되는 유연한 레이아웃 시스템을 사용할 수 있습니다. 유연한 디자인을 사용하면 다양한 앱 창 크기, 해상도, 픽셀 밀도 및 방향의 화면에서 앱의 모양을 멋지게 표현할 수 있습니다. 다양한 크기에 맞게 자동으로 조정되는 사용자 인터페이스를 디자인하는 방법을 설명합니다.

로드맵: 이 항목은 다음 항목과 연관되어 있습니다. 참고 항목:

사전 요구 사항

여기서는 C++, C# 또는 Visual Basic을 사용하여 기본 Windows 런타임 앱을 만들 수 있다고 가정합니다. 첫 번째 Windows 런타임 앱을 만드는 방법은 C# 또는 Visual Basic을 사용하여 첫 번째 Windows 스토어 앱 만들기를 참조하세요.

사용자 인터페이스 지침(모범 사례)

이 항목에서는 기본 레이아웃을 소개하지만 사용자가 유의해야 할 여러 가지 사용자 런타임 지침도 제공합니다.

레이아웃 개요

레이아웃은 UI에서 개체 크기를 조정하고 위치를 지정하는 프로세스입니다. 시각적 개체의 위치를 지정하려면 Panel 또는 다른 컨테이너 개체에 배치해야 합니다. XAML 프레임워크는 컨테이너로 사용되는 다양한 Panel 클래스(예: Canvas, StackPanelGrid)를 제공합니다. 이러한 클래스를 사용하면 클래스 내에 UI 요소를 배치하고 정렬할 수 있습니다.

XAML 레이아웃 시스템은 고정 레이아웃과 동적 레이아웃을 모두 지원합니다. 고정 레이아웃에서는 명시적 차원을 사용하여 요소 크기와 위치를 지정합니다. 예를 들어 고정 위치에는 Canvas 패널을 사용할 수 있습니다. 요소가 포함된 레이아웃 패널에 관계없이 요소에 고정 크기를 설정할 수 있습니다. 동적 레이아웃에서는 사용자 인터페이스의 크기가 비율(그리드 행과 열의 경우), 패널 및 컨트롤의 콘텐츠 또는 다양한 화면 해상도에 맞게 자동으로 조정됩니다. 예를 들어 동적 레이아웃의 경우 StackPanel, Grid 또는 VariableSizedWrapGrid를 사용합니다.

고정 레이아웃

고정 레이아웃에서는 부모 요소를 기준으로 정확한 위치 및 크기를 지정하는 방식으로 레이아웃 패널에 자식 요소를 배열합니다. 고정 위치의 경우 각 장치마다 화면 또는 앱 창의 크기가 다르다는 점을 고려하지 않아도 됩니다. 응용 프로그램이 앱 창의 크기에 맞게 조정되는 동시에 UI 요소를 고정 위치에 지정해야 하는 경우 다양한 화면 해상도에 맞게 각각의 다른 페이지를 디자인하거나 크기 조정을 사용할 수 있습니다.

XAML 프레임워크의 모든 패널은 고정 위치를 지원하지만 Canvas오직 고정 위치만 지원하는 패널의 예입니다. Canvas 내에 자식 요소를 배치하려면 자식 요소의 Canvas.LeftCanvas.Top 연결된 속성을 설정합니다. Microsoft Visual Studio의 XAML 디자이너를 사용하는 경우 디자인 화면에서 자식 요소를 Canvas 내로 끌면 이러한 속성이 업데이트됩니다.

동적 레이아웃

동적 레이아웃에서는 다양한 화면 해상도 및 앱 창 크기에 맞게 사용자 인터페이스가 조정됩니다. 서로 상대적인 정렬 방법과 콘텐츠 및/또는 부모에 상대적인 줄 바꿈 방법을 지정하여 자식 요소를 정렬합니다. 예를 들어 패널 내에서 UI 요소를 정렬하고 가로로 줄 바꿈되도록 지정할 수 있습니다. 자동 또는 가변 크기 조정을 사용하려면 HeightWidth 속성에 값을 할당합니다. 다음은 동적 레이아웃에 대한 권장 설정입니다.

  • UI 요소의 HeightWidthAuto로 설정합니다. 이러한 값이 Grid 레이아웃의 UI 요소에 사용되는 경우 Grid 패널이 해당 값을 포함하는 셀을 채웁니다. Auto 크기 조정은 일반적인 UI 요소와 GridStackPanel 레이아웃에 대해 지원됩니다.
  • 텍스트(텍스트 요소)를 포함하는 UI 요소의 경우 HeightWidth 속성을 설정 해제된 상태로 두고 MinWidth 또는 MinHeight 속성을 설정합니다. 이렇게 하면 레이아웃 컨테이너에서 자르기 때문에 텍스트가 읽을 수 없는 크기까지 축소되지 않습니다.
  • Grid 레이아웃의 셀 구조를 정의하는 RowDefinitionColumnDefinition 요소에 대해 비례 값을 설정하려면 상대 HeightWidth 값을 사용합니다. 예를 들어 2열 레이아웃에서 첫 번째 열을 두 번째 열보다 5배 너비로 지정하려면 ColumnDefinition 요소에서 Width 속성에 대해 "*" 및 "5*"를 사용합니다.

자동 및 배율 크기 조정

자동 크기 조정은 내용의 크기가 변경되어도 컨트롤을 해당 내용에 맞추는 데 사용됩니다. 배율 크기 조정은 가중 비율에 따라 그리드의 행과 열 사이에서 사용 가능한 공간을 분배하는 데 사용됩니다. XAML에서는 배율 값이 *(가중 배율 크기 조정의 경우 n*)로 표현됩니다. 예를 들어 그리드에 4개의 열이 있는 경우 열의 너비를 아래 값으로 설정할 수 있습니다.

Column_1Auto열의 크기가 내용에 맞게 조정됩니다.
Column_2*Auto 열이 계산된 후에는 해당 열에 나머지 너비의 일부가 지정됩니다. Column_2는 Column_4 너비의 절반이 됩니다.
Column_3Auto열의 크기가 내용에 맞게 조정됩니다.
Column_42*자동 열이 계산된 후에는 해당 열에 나머지 너비의 일부가 지정됩니다. Column_4는 Column_2 너비의 두 배가 됩니다.

 

패널 컨트롤

XAML의 기본 제공 레이아웃 패널에는 고정 레이아웃에 사용되는 Canvas 패널과 다양한 동적 레이아웃 기술에 사용되는 다른 여러 패널이 포함됩니다.

캔버스

Canvas 패널에서는 고정된 좌표 점을 사용하여 자식 요소를 배치합니다. 각 요소의 Canvas.LeftCanvas.Top 연결된 속성을 설정하여 개별 자식 요소의 점을 지정합니다. 레이아웃 중에 부모 Canvas 개체는 클래스 논리를 사용하여 자식에서 이러한 연결된 속성 값을 읽고 레이아웃의 Arrange 단계 중에 이러한 값을 사용합니다.


<Canvas Background="Black">
  <Rectangle Canvas.Left="200" Canvas.Top="100"
    Fill="Red" Width="350" Height="350" />
</Canvas>

앞의 XAML은 다음 그림과 같은 출력을 생성합니다.

레이아웃 예제

고정 위치를 사용하면 한 개체가 다른 개체 위에 그려지는 개체 겹침을 만들 수 있습니다. 자식 그리기 순서를 쉽게 조정하고 런타임에 그리기 순서를 변경할 수 있도록 CanvasCanvas.ZIndex도 지원합니다. 각 자식 요소에 설정할 수 있는 연결된 속성입니다. 가장 큰 Canvas.ZIndex 값이 마지막에 그려지므로 동일한 공간을 공유하거나 어떤 방식으로든 겹치는 다른 요소 위에 그려집니다. 자세한 내용은 Canvas.ZIndex를 참조하세요. 알파 값(투명도)이 적용되므로 요소가 겹치는 경우에도 위쪽 요소의 알파 값이 최대값이 아니면 겹치는 영역에 표시되는 콘텐츠가 혼합될 수 있습니다.

원하는 대로 Canvas 패널을 사용하세요. UI의 요소 위치를 정확하게 제어하는 것이 편리한 시나리오도 있지만 고정 위치가 지정된 레이아웃 패널에서 UI의 해당 영역은 전체 앱 창 크기 변경에 맞게 제대로 적응되지 않습니다. 앱 창 크기 조정은 장치 방향 변경, 분할된 앱 창, 모니터 변경 및 기타 여러 사용자 시나리오에서 발생할 수 있습니다.

StackPanel

StackPanel 패널은 자식 요소를 가로 또는 세로 방향으로 지정할 수 있는 한 줄로 정렬하는 간단한 레이아웃 패널입니다. Orientation 속성을 사용하여 자식 요소의 방향을 지정할 수 있습니다. Orientation의 기본값은 Vertical입니다. StackPanel 컨트롤은 일반적으로 페이지에 UI의 일부 섹션을 배열하려는 경우에 사용됩니다.

다음 XAML은 항목의 수직 StackPanel을 만드는 방법을 보여줍니다.


<StackPanel Margin="20">
  <Rectangle Fill="Red" Width="100" Height="100" Margin="10" />
  <Rectangle Fill="Blue" Width="100" Height="100" Margin="10" />
  <Rectangle Fill="Green" Width="100" Height="100" Margin="10" />
  <Rectangle Fill="Purple" Width="100" Height="100" Margin="10" />
</StackPanel>

앞의 XAML은 다음 그림과 같은 출력을 제공합니다.

레이아웃 예제

여러 개의 StackPanel을 사용하여 패널을 중첩하는 것은 일반적인 레이아웃 기술입니다. 예를 들어 가로 StackPanel을 사용하여 세로 막대와 기본 콘텐츠 영역을 만들고 세로 StackPanel을 사용하여 기본 콘텐츠의 항목을 누적할 수 있습니다. 패널을 중첩하는 경우 부모에 레이아웃 특성을 지정하는 UI 요소의 연결된 속성은 가장 직계 부모 패널에서만 해석됩니다.

Grid

Grid 패널은 컨트롤의 다중 행/열 레이아웃 배열을 지원합니다. Grid 요소 내에서 선언된 RowDefinitionsColumnDefinitions 속성을 사용하여 Grid 패널의 행/열 정의를 지정할 수 있습니다(XAML의 속성 요소 구문 사용). 연결된 속성인 Grid.ColumnGrid.Row를 사용하여 Grid의 특정 셀에 개체를 배치할 수 있습니다. Auto 또는 배율 크기 조정을 사용하면 열이나 행 안에서 공간을 분배할 수 있습니다. 연결된 속성인 Grid.RowSpanGrid.ColumnSpan을 사용하면 여러 행과 열에 걸쳐 내용을 표시할 수도 있습니다.

다음 XAML 예제는 행 3개와 열 2개로 이루어진 Grid를 만드는 방법을 보여 줍니다. 첫 번째 행과 세 번째 행의 높이는 텍스트만 포함할 정도의 크기입니다. 두 번째 행의 높이는 나머지 사용 가능한 높이입니다. 열의 너비는 사용 가능한 컨테이너 너비 내에서 고르게 분할됩니다.


<Grid Margin="12,0,12,0">

  <Grid.RowDefinitions>
    <RowDefinition Height="auto" />
    <RowDefinition />
    <RowDefinition Height="auto" />
  </Grid.RowDefinitions>

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
   </Grid.ColumnDefinitions>

  <TextBox Text="1st row 1st column" FontSize="60" Grid.Column="0" Grid.Row="0" />
  <TextBox Text="3rd row 1st column" FontSize="60" Grid.Column="0" Grid.Row="2" />

  <Button Content="1st row 2nd column" FontSize="60" Grid.Column="1" Grid.Row="0" />
  <Button Content="3rd row 2nd column" FontSize="60" Grid.Column="1" Grid.Row="2" />

</Grid>

이 경우 다음 그림과 같은 출력이 생성됩니다.

레이아웃 예제

VariableSizedWrapGrid

VariableSizedWrapGrid는 각 타일 또는 셀의 크기가 내용에 따라 달라질 수 있는 그리드 스타일 레이아웃 패널을 제공합니다. VariableSizedWrapGrid에서는 요소가 행이나 열 형태로 배열되며 MaximumRowsOrColumns 값에 도달할 경우 새 행이나 열로 자동 줄 바꿈됩니다. Orientation 속성은 그리드에서 줄 바꿈 전에 행 또는 열에 해당 항목을 추가할지 여부를 지정합니다. 셀 크기는 ItemHeightItemWidth를 사용하여 지정됩니다(픽셀 단위 값). 자식 요소는 연결된 속성인 VariableSizedWrapGrid.ColumnSpanVariableSizedWrapGrid.RowSpan(셀 개수 값)을 사용하여 자식 요소가 사용해야 하는 가변 셀 개수를 조정합니다(기본값 1). 자세한 내용은 VariableSizedWrapGrid를 참조하세요.

ItemsControl용 패널

WrapGridVirtualizingStackPanelItemsControl에 항목을 표시하는 데만 사용할 수 있는 특별한 용도의 패널입니다. 자세한 내용은 WrapGrid를 참조하세요. ItemsStackPanelItemsWrapGrid는 사용할 수 있는 위치가 제한된(여러 항목이 있는 ItemsControl) 유사한 패널입니다.

마이그레이션 참고 사항:  WPF(Windows Presentation Foundation)에는 사용할 수 있는 위치에 대한 제한이 없는 범용 패널로 사용 가능한 VirtualizingStackPanel 클래스가 있습니다. VirtualizingStackPanel을 사용한 XAML을 마이그레이션하는 경우 항목 데이터 컨트롤을 ListView로 변경해야 합니다. 그러면 기본 템플릿에 포함된 VirtualizingStackPanel로 인해 목록 내에 항목 가상화가 구현됩니다.

관련 항목

Canvas
StackPanel
Grid
VariableSizedWrapGrid
빠른 시작: 레이아웃 컨트롤 추가
ListView, SemanticZoom 및 기타 데이터 컨트롤 추가

 

 

표시:
© 2015 Microsoft