내보내기(0) 인쇄
모두 확장
정보
요청한 주제가 아래에 표시됩니다. 그러나 이 주제는 이 라이브러리에 포함되지 않습니다.

빠른 시작: Windows Phone 8의 화면 방향

2014-06-18

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

 

Windows Phone 에서는 가로 및 세로 화면 방향을 지원합니다. 이 빠른 시작에서는 Windows Phone 에서 방향을 변경하는 방법에 대해 설명합니다.

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

 

Windows Phone 에서는 다음 화면 방향을 지원합니다.

  • 세로

  • 가로 방향 왼쪽

  • 가로 방향 오른쪽

사용자는 간단하게 단말기를 회전시켜서 다른 방향으로 바꿀 수 있습니다. 에뮬레이터에서 앱을 테스트할 때 에뮬레이터 도구 모음에서 버튼을 클릭하여 화면 방향을 전환할 수 있습니다. 방향 버튼에는 방향 변경을 가리키는 화살표가 있는 직사각형이 있습니다.

Screen Orientation - Emulator

세로 방향의 페이지는 페이지 높이가 너비보다 크도록 수직으로 향합니다.

두 가로 방향 중 하나에서, 상태 표시줄응용프로그램 모음은 각각 전원시작 버튼이 있는 화면의 측면에 남아 있게 됩니다. 가로 왼쪽에는 왼쪽에 상태 표시줄이 있고, 가로 오른쪽에는 오른쪽에 상태 표시줄이 있습니다.

앱의 기본 방향은 세로이며, 가로 방향을 지원하려면 코드를 더 추가해야 합니다. 왼쪽이나 오른쪽 가로 방향만 지정할 수는 없습니다. 가로 방향을 지원하는 경우 왼쪽과 오른쪽을 모두 지원해야 합니다. 앱이 세로 및 가로를 지원하도록 지정하려면 XAML 또는 코드에서 SupportedOrientations 속성을 PortraitOrLandscape로 설정해야 합니다.

세로 또는 가로 방향으로 콘텐츠를 표시하는 방법은 여러 가지가 있습니다. 두 가지 방법이 스크롤과 그리드 레이아웃입니다.

스크롤 방법에서는 ScrollViewer 컨트롤에 배치된 StackPanel 컨트롤을 사용합니다. 이 방법은 콘텐츠를 목록에 표시하거나, 페이지에서 여러 다른 컨트롤이 차례대로 표시되도록 하는 경우에 사용합니다. StackPanel을 사용하면 앱에서 차례로 자식 요소의 순서를 지정하고, ScrollViewer 컨트롤을 사용하면 세로에서 가로로 전환할 때 UI 요소가 화면에 맞지 않을 경우 StackPanel을 스크롤할 수 있습니다.

스크롤 방법을 사용하려면 일반적으로 다음 단계를 수행합니다.

다음 예제에서는 ScrollViewer.내에서 StackPanel 및 여러 개의 컨트롤을 보여 줍니다.

<ScrollViewer x:Name="ContentGrid" Grid.Row="1" VerticalScrollBarVisibility="Auto">
    <!--You must apply a background to the StackPanel control or you
    will be unable to pan the contents.-->
    <StackPanel Background="Transparent" >
        <!--Adding various controls and UI elements.-->
        <Button Content="This is a Button" />
        <Rectangle Width="100" Height="100" Margin="12,0"
            HorizontalAlignment="Left" Fill="{StaticResource PhoneAccentBrush}"/>
        <Rectangle Width="100" Height="100" HorizontalAlignment="Center"
            Fill="{StaticResource PhoneAccentBrush}"/>
        <Rectangle Width="100" Height="100" Margin="12,0"
            HorizontalAlignment="Right" Fill="{StaticResource PhoneAccentBrush}"/>
        <TextBlock Text="This is a line of text that will wrap in portrait
            orientation but not landscape orientation." TextWrapping="Wrap" />
        <CheckBox Content="A CheckBox"/>
        <RadioButton Content="A RadioButton" />
    </StackPanel>
</ScrollViewer> 

다음 그림에서는 세로 및 가로 방향의 스크롤 동작을 보여 줍니다. 세로 방향은 스크롤이 필요하지 않지만 가로 방향은 스크롤이 필요합니다.

AP_Con_Orien_Scroll1

그리드 레이아웃 방법에서는 UI 요소를 Grid에 배치합니다. 방향 변경이 발생하면 프로그래밍 방식을 사용하여 요소의 위치를 Grid의 다양한 셀로 변경합니다.

그리드 레이아웃 방법을 사용하려면 일반적으로 다음 단계를 수행합니다.

  1. 페이지의 SupportedOrientations 속성을 PortraitOrLandscape로 변경합니다.

  2. 콘텐츠 패널에 Grid를 사용합니다.

  3. OrientationChanged 이벤트 처리기를 만들고 코드를 추가하여 Grid에서 요소의 위치를 변경합니다.

다음 예제에서는 버튼의 이미지와 컬렉션을 지원하는 2 x 2 Grid를 만듭니다. 방향이 바뀌면 OrientationChanged 이벤트 처리기가 Grid 내 요소의 위치를 변경합니다.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <!--Create a 2 x 2 grid to store an image and button layout.-->
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <!--Add an image to the grid. Ensure the image height and width
        are set to 300 and 500 respectively for this example.-->
    <Image x:Name="Image1" Grid.Row="0" Grid.Column="0"
        Stretch="Fill" HorizontalAlignment="Center" Source="licorice.jpg"
        Height="300" Width="500"/>
    <!--Add a StackPanel with buttons to the row beneath the image.-->
    <StackPanel x:Name="buttonList" Grid.Row="1" Grid.Column="0"
        HorizontalAlignment="Center" >
        <Button Content="Action 1" />
        <Button Content="Action 2" />
        <Button Content="Action 3" />
        <Button Content="Action 4" />
    </StackPanel>
</Grid> 

private void PhoneApplicationPage_OrientationChanged(
object sender, OrientationChangedEventArgs e)
{
    // Switch the placement of the buttons based on an orientation change.
    if ((e.Orientation & PageOrientation.Portrait) == (PageOrientation.Portrait))
    {
        Grid.SetRow(buttonList, 1);
        Grid.SetColumn(buttonList, 0);
    }
    // If not in portrait, move buttonList content to visible row and column.
    else
    {
        Grid.SetRow(buttonList, 0);
        Grid.SetColumn(buttonList, 1);
    }
} 

다음 그림에서는 세로 및 가로 방향의 그리드 레이아웃 동작을 보여 줍니다. 세로 방향에서 바닥에 버튼들을 배치합니다. 가로 방향에서 오른쪽에 버튼들을 배치합니다.

AP_Con_Orientation(Port)

표시:
© 2014 Microsoft