방법: Windows Phone에서 방향 변경 처리

2012-02-09

이 항목에서는 Windows Phone에서 방향 변경을 사용하여 응용프로그램에 올바로 구성된 구조적 UI 콘텐츠를 제공하는 방법에 대한 정보를 제공합니다. Windows Phone에서 사용할 수 있는 세 가지 가능한 방향은 세로 방향과 가로 방향(왼쪽 또는 오른쪽)입니다. 세로 방향은 페이지 내용의 세로 위치 지정이고, 가로 방향은 페이지 내용의 가로 표현입니다. 사용자는 단말기를 회전하여 한 방향에서 다른 방향으로 변경할 수 있습니다. 응용프로그램이 방향 지원을 제공하려면 XAML 또는 코드에서 SupportedOrientations 속성을 PortraitOrLandscape로 구성해야 합니다. 다음 단원에서는 세로 방향 또는 가로 방향으로 콘텐츠를 표시하는 두 가지 메커니즘의 예를 제공합니다.

  • 자동 크기 조정 및 스크롤 –- 이 예제에서는 ScrollViewer 컨트롤과 함께 작동하는 StackPanel 컨트롤을 사용하여 두 방향을 모두 지원합니다. 이 메서드는 콘텐츠가 목록에 표시되는 경우 또는 여러 컨트롤이 페이지에 하나씩 표시되는 경우에 사용되는 간단하고 효과적인 메서드입니다.

  • 표 레이아웃 –- 이 예제에서는 컨트롤을 표에 배치하고 선택한 방향에 따라 표 셀 내에서 요소 위치를 이동합니다.

참고참고:

이 항목은 C# 개발을 기준으로 하지만 Visual Basic 코드도 제공됩니다.

이 단원에서는 SupportedOrientations 속성에서 세로 방향 및 가로 방향 모드를 모두 사용하도록 설정하고 ScrollViewerStackPanel 컨트롤 안에 컨트롤 그룹을 배치합니다.

양방향으로 콘텐츠의 크기를 자동 조정하고 스크롤하려면

  1. 파일 | 새 프로젝트 메뉴 명령을 선택하여 새 프로젝트를 만듭니다.

  2. 새 프로젝트 창이 표시됩니다. Visual C# 템플릿을 확장하고 Windows Phone용 Silverlight 템플릿을 선택합니다.

  3. Windows Phone 응용프로그램 템플릿을 선택합니다. 프로젝트 이름을 원하는 대로 입력합니다.

  4. MainPage.xaml의 XAML 코드에서 phone:PhoneApplicationPage 아래의 SupportedOrientations 속성이 세로 방향 및 가로 방향으로 설정되었는지 확인합니다. 설정되지 않은 경우 이 속성을 다음과 같이 수정합니다.

    SupportedOrientations=”PortraitOrLandscape”
    
    참고참고:

    SupportedOrientations 속성을 세로 방향 및 가로 방향으로 설정하면 응용프로그램이 두 모드를 모두 지원합니다. PhoneApplicationPage 컨트롤을 선택할 때 디자이너에서 이 속성을 설정할 수도 있습니다. PhoneApplicationPage 컨트롤을 선택하려면 에뮬레이터 창 외부의 흰색 공간을 클릭합니다.

  5. 이 단계에서는 StackPanel 컨트롤을 ScrollViewer 컨트롤 안에 포함합니다. StackPanel 컨트롤을 사용하면 응용프로그램에서 컨트롤의 순서를 차례로 지정할 수 있고, ScrollViewer 컨트롤을 사용하면 UI 요소가 화면 바깥쪽으로 나가는 경우 StackPanel 콘텐츠를 스크롤할 수 있습니다. 이 경우 에뮬레이터나 단말기에서 가로 방향으로 전환합니다. MainPage.xaml의 Content Panel 섹션에서 페이지 아래쪽의 XAML 코드에 다음 코드를 추가합니다. 섹션 앞의 주석은 ""<!--ContentPanel - place additional content here-->"입니다. 해당 섹션에 이미 채워져 있는 열고 닫는 Grid 태그를 제거합니다.

    
            <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 sample that will wrap in portrait mode but not landscape.” TextWrapping="Wrap"  />
                    <CheckBox Content="A CheckBox" />
                    <RadioButton Content="A RadioButton" />
                </StackPanel>
            </ScrollViewer>
    
    
  6. 디버그 | 디버깅 시작 메뉴 명령을 선택하여 응용프로그램을 실행합니다. 에뮬레이터 창이 열리고 응용프로그램이 시작됩니다. 응용프로그램이 실행 중인 경우 에뮬레이터 도구 모음에서 방향 왼쪽 또는 오른쪽 버튼을 클릭하여 화면 방향을 세로 방향에서 가로 방향으로 전환할 수 있습니다. 각 버튼에는 상자 위에 곡선 화살표가 있습니다. 최종 결과로, 스크롤이 필요 없는 정렬된 UI 요소 뒤에 스크롤이 필요한 가로 방향 표현이 있는 세로 방향 렌더링이 생성됩니다.

 

AP_Con_Orien_Scroll1

이 예제에서는 UI 요소를 지원할 표를 만든 다음 응용프로그램이 방향 변경에 따라 표 안에서 이러한 요소의 위치를 변경하게 합니다. 이 연습에서는 이미지와 버튼 컬렉션을 지원하기 위해 2 x 2 표를 만듭니다. 그런 다음 OrientationChanged 이벤트 처리기를 만들고, 세로 방향에서 가로 방향 모드로 전환하거나 그 반대로 전환할 때 표 안에서 이러한 UI 요소를 재구성하는 코드를 제공합니다.

방향 변경에 표 레이아웃을 사용하려면

  1. 파일 | 새 프로젝트 메뉴 명령을 선택하여 새 프로젝트를 만듭니다.

  2. 새 프로젝트 창이 표시됩니다. Visual C# 템플릿을 확장하고 Windows Phone용 Silverlight 템플릿을 선택합니다.

  3. Windows Phone 응용프로그램 템플릿을 선택합니다. 프로젝트 이름을 원하는 대로 입력합니다.

  4. MainPage.xaml의 XAML 코드에서 phone:PhoneApplicationPage 아래의 SupportedOrientations 속성이 세로 방향 및 가로 방향으로 설정되었는지 확인합니다. 설정되지 않은 경우 이 속성을 다음과 같이 수정합니다.

    SupportedOrientations=”PortraitOrLandscape”
    
  5. 2 x 2 표를 만드는 코드를 추가하고, 이미지를 표에 추가한 다음 버튼이 포함된 StackPanel 컨트롤을 표에 추가합니다. MainPage.xamlContent Panel 섹션에서 페이지 아래쪽의 XAML에 다음 코드를 추가합니다. 섹션 앞의 주석은 ""<!--ContentPanel - place additional content here-->"입니다." 해당 섹션에 이미 채워져 있는 Grid 태그 사이에 코드를 추가합니다.

    
                <!--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 that 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="TestImage.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>
    
    
    
    참고참고:

    이 연습에서는 아무 이미지나 사용할 수 있습니다. 예제 TestImage.jpg를 유효한 이미지 이름과 소스 경로로 바꾸어야 합니다. 또한 Button 컨트롤에 아무 이름이나 사용할 수 있습니다.

  6. MainPage.xaml의 XAML 코드에서 페이지 맨 위의 phone:PhoneApplicationPage 아래에 다음 코드를 추가합니다.

    OrientationChanged="PhoneApplicationPage_OrientationChanged"
    
    
    참고참고:

    OrientationChanged를 입력할 때 IntelliSense를 통해 ""<새 이벤트 처리기>"를 만들 수 있습니다. 이 옵션을 선택하면 기본 이름 "PhoneApplicationPage_OrientationChanged"를 사용하여 자동으로 처리기가 생성됩니다.

  7. MainPage.xaml.cs로 이동하여 이벤트 처리기를 찾습니다. 다음 코드는 방향 변경에 따라 표에서 버튼 목록의 위치를 전환합니다.

    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 the portrait mode, move buttonList content to a visible row and column.
    
                else
                {
                    Grid.SetRow(buttonList, 0);
                    Grid.SetColumn(buttonList, 1);
    
                }
    
            }
    
    중요중요:

    이 코드를 응용프로그램에 추가하지 않으면 버튼 콘텐츠와 이미지가 가로 방향에서 나란히 정렬되지 않고 포개진 상태로 유지됩니다. 버튼이 일부만 표시되거나 표시되지 않습니다.

  8. 디버그 | 디버깅 시작 메뉴 명령을 선택하여 응용프로그램을 실행합니다. 에뮬레이터 창이 열리고 응용프로그램이 시작됩니다. 응용프로그램이 실행 중인 경우 에뮬레이터 도구 모음에서 방향 왼쪽 또는 오른쪽 버튼을 클릭하여 화면 방향을 세로 방향에서 가로 방향으로 전환할 수 있습니다. 각 버튼에는 상자 위에 곡선 화살표가 있습니다. 화면 아래쪽의 버튼이 화면 오른쪽으로 위치가 조정됩니다.

 

AP_Con_Orientation(포트)

표시: