정보
요청한 주제가 아래에 표시됩니다. 그러나 이 주제는 이 라이브러리에 포함되지 않습니다.

Windows Phone 8의 레이아웃

2014-06-18

적용 대상: Windows Phone 8 및 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

 

Windows Phone 에서는 컨트롤에 화면에 배치되는 방식을 지정할 수 있는 유연한 레이아웃 시스템을 제공합니다. 이 빠른 시작에서는 다양한 화면 해상도에 맞게 자동으로 크기가 조정되는 사용자 인터페이스 디자인 방법을 설명합니다.

이 항목에는 다음 단원이 포함되어 있습니다.

 

레이아웃은 Windows Phone 용 앱에서 개체의 크기 및 위치를 지정하는 프로세스입니다. 표시 개체를 배치하려면 Panel 또는 다른 컨테이너 개체에서 파생된 컨테이너 컨트롤에 배치해야 합니다. Windows Phone 에서는 컨테이너로 사용되고 컨트롤을 배치 및 정렬할 수 있는 다양한 Panel 컨트롤을 제공합니다(예: Canvas, StackPanelGrid).

Windows Phone 레이아웃 시스템은 절대 레이아웃 및 동적 레이아웃을 둘 다 지원합니다. 절대 레이아웃에서 컨트롤은 명시적 x/y 좌표를 사용하여 배치됩니다(예: Canvas 사용). 동적 레이아웃에서 사용자 인터페이스는 다양한 화면 해상도에 맞게 자동으로 크기가 조정됩니다(예: StackPanel 또는 Grid 사용).

절대 레이아웃에서는 부모 요소를 기준으로 한 정확한 위치를 지정하여 레이아웃 패널에서 자식 요소를 정렬합니다. 절대 위치에서는 화면 크기를 고려하지 않습니다. 앱에서 UI 요소를 절대 위치로 지정해야 하는 경우 화면 해상도에 따라 다른 페이지를 디자인하거나 배율 조정을 사용할 수 있습니다.

Windows Phone 에서는 절대 위치를 지원하기 위해 Canvas 컨트롤을 제공합니다. 기본적으로 새 Windows Phone 앱 프로젝트를 만들 경우 루트 레이아웃 패널은 절대 위치에 따라 레이아웃을 만드는 Grid입니다. GridCanvas로 바꿔야 합니다.

컨트롤을 Canvas에 배치하려면 컨트롤에서 다음 연결된 속성을 설정해야 합니다. Visual Studio에서 디자이너를 사용할 경우 컨트롤을 디자인 화면으로 끌 때 이러한 속성이 업데이트됩니다.

동적 레이아웃에서는 사용자 인터페이스가 다양한 화면 해상도에서 올바르게 나타납니다. 자식 요소의 정렬 방식과 부모 요소를 기준으로 한 줄 바꿈 방식을 지정하여 자식 요소를 정렬합니다. 예를 들어 패널에 컨트롤을 정렬하고 컨트롤이 가로로 줄 바꿈 되도록 지정할 수 있습니다. 자동 또는 비례 크기 조정을 사용하려면 HeightWidth 속성에 특수 값을 할당해야 합니다. 다음은 동적 레이아웃에 대한 권장 설정입니다.

  • 컨트롤 또는 레이아웃의 높이와 너비를 Auto로 설정합니다. 이러한 값이 Grid 레이아웃의 컨트롤에 사용되면 포함된 컨트롤이 셀을 채웁니다. 자동 크기 조정은 컨트롤과 GridStackPanel 레이아웃에 대해 지원됩니다.

  • 텍스트가 포함된 컨트롤의 경우 HeightWidth 속성을 제거하고 MinWidth 또는 MinHeight 속성을 설정합니다. 그러면 텍스트 배율이 읽을 수 없는 크기로 감소하지 않습니다.

  • Grid 레이아웃에서 RowDefinitionColumnDefinition의 비례 값을 설정하려면 상대 Height 및 너비 값을 사용합니다. 예를 들어 한 열이 다른 열보다 5배 넓도록 지정하려면 ColumnDefinition 요소에서 Width 성에 대해 "*" 및 "5*"를 사용합니다.

자동 및 별표를 사용한 크기 조정

Auto 크기 조정은 내용의 크기가 변경되더라도 해당 내용에 맞게 컨트롤 크기를 조정하는 데 사용합니다. Star 크기 조정은 모눈의 행 및 열에 사용 가능한 공간을 가중치에 따라 배분하는 데 사용합니다. XAML에서 별표 값은 *(또는 n*)로 표현합니다. 예를 들어 그리드에 4개의 열이 있는 경우 열 너비를 다음 표에 나와 있는 값으로 설정할 수 있습니다.

Column_1

Auto

열의 크기가 내용에 맞게 지정됩니다.

Column_2

*

Auto 열이 계산된 후 남은 너비의 일부를 사용합니다. 열 2의 너비는 열 4의 절반 너비가 됩니다.

Column_3

Auto

열의 크기가 내용에 맞게 지정됩니다.

Column_4

2*

Auto 열이 계산된 후 남은 너비의 일부를 사용합니다. 열 4의 너비는 열 2의 두 배 너비가 됩니다.

자동 및 별표 크기 조정에 대한 자세한 내용은 GridUnitType 열거를 참조하세요.

Windows Phone 의 기본 제공 레이아웃 패널은 Canvas, StackPanelGrid입니다.

Canvas

Canvas에서 Canvas 영역에 상대적인 좌표를 사용하여 자식 요소를 명시적으로 배치할 수 있는 영역을 정의합니다. Canvas는 포함된 UI 요소가 이동되지 않는 시나리오에 유용합니다.

X, Y 좌표를 지정하여 Canvas 내부에 컨트롤을 배치할 수 있습니다. X 및 Y 좌표는 Canvas.LeftCanvas.Top 연결 속성을 사용하여 지정됩니다. Canvas.Left는 포함하는 Canvas 왼쪽에서의 개체 거리(X 좌표)를 지정하고, Canvas.Top은 포함하는 Canvas 위쪽에서의 개체 거리(Y 좌표)를 지정합니다.

다음 XAML에서는 Canvas 왼쪽에서 30 픽셀, 위쪽에서 200 픽셀 떨어진 위치에 사각형을 배치하는 방법을 보여 줍니다.

<Canvas Background="Transparent">
    <Rectangle Canvas.Left="30" Canvas.Top="200"
        Fill="red" Width="200" Height="200" />
</Canvas>

다음 그림에서는 LayoutRoot에서 StackPanel 뒤에 이름이 TitlePanel인 이전 XAML을 추가하는 경우 출력을 보여 줍니다.

QS Layout Canvas

StackPanel

StackPanel은 가로 또는 세로 방향으로 지정할 수 있는 한 줄에 자식 요소를 정렬하는 단순 레이아웃 패널입니다. Orientation 속성을 사용하여 하위 요소의 방향을 지정할 수 있습니다. Orientation 속성의 기본값은 Vertical입니다. 일반적으로 StackPanel은 페이지에서 UI의 작은 하위 섹션을 정렬하려는 시나리오에 사용됩니다.

다음 XAML에서는 항목의 세로 StackPanel을 만드는 방법을 보여 줍니다.

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

이전 XAML은 다음 Windows Phone 그림과 비슷한 출력을 생성합니다.

QS Layout StackPanel

그리드

Grid 컨트롤은 가장 유연한 레이아웃 패널이며 컨트롤을 여러 행 및 여러 열 레이아웃으로 정렬하는 방법을 지원합니다. Grid 컨트롤 바로 안쪽에 선언되는 RowDefinitionsColumnDefinitions 속성을 사용하여 Grid의 행 및 열 정의를 지정할 수 있습니다. ColumnRow 연결된 속성을 사용하여 Grid의 특정 셀에 개체를 배치할 수 있습니다. 자동 또는 별표 크기 조정을 사용하여 열 또는 행 내에서 공간을 분배할 수 있습니다. 자동 및 별표 크기 조정은 이 빠른 시작의 앞부분에서 설명했습니다. RowSpanColumnSpan 연결 속성을 사용하여 콘텐츠를 여러 행과 열에 표시할 수 있습니다.

Grid의 자식 요소는 태그 또는 코드에서 나타나는 순서대로 그려집니다. 따라서 여러 요소가 같은 좌표를 공유할 때 계층화된 순서(Z 순서)를 구현할 수 있습니다. Z 순서에 대한 자세한 내용은 ZIndex을 참조하세요.

다음 XAML은 행 3개 및 열 2개가 있는 Grid를 만드는 방법을 보여 줍니다. 첫 번째 및 세 번째 행의 높이는 텍스트를 포함할 만큼 충분히 큽니다. 두 번째 행의 높이는 사용 가능한 나머지 높이까지 채웁니다. 열 너비는 사용 가능한 컨테이너 너비 내에서 똑같이 분할됩니다.

<Grid ShowGridLines="True" 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" TextWrapping="Wrap" Grid.Column="0" Grid.Row="0" />
    <TextBox Text="3rd row 1st column" TextWrapping="Wrap" Grid.Column="0" Grid.Row="2" />
    <Button Content="1st row 2nd column" FontSize="17" Grid.Column="1" Grid.Row="0" />
    <Button Content="3rd row 2nd column" FontSize="17" Grid.Column="1" Grid.Row="2" />
</Grid>

이전 XAML은 다음 그림과 비슷한 출력을 생성합니다.

QS Layout GridPhone

Canvas, StackPanel 또는 Grid만으로는 구현하기가 쉽지 않은 복잡한 레이아웃을 만들 때는 패널의 자식 요소에 대한 레이아웃 동작을 정의할 수 있는 사용자 지정 패널을 만들 수 있습니다. 이렇게 하려면 Panel에서 파생시킨 뒤 해당 MeasureOverrideArrangeOverride 메서드를 재정의합니다.

표시: