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

Windows Phone 8용 파노라마 앱을 만드는 방법

2014-06-18

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

 

Visual Studio 에서 Windows Phone 의 파노라마 환경을 만드는 방식은 여러 가지입니다.

  • 새 프로젝트를 만들 때 Windows Phone 파노라마 앱이라는 사용자 지정 템플릿을 사용할 수 있습니다. 이 템플릿에는 콘텐츠가 미리 채워져 있으며 적절하게 템플릿을 수정할 수 있습니다.

  • Panorama 컨트롤은 Visual Studio 의 도구 상자에 추가할 수 있고 프로젝트에 넣을 수 있습니다.

  • Windows Phone 파노라마 페이지를 기존 프로젝트에 추가할 수 있습니다.

이 항목에서는 Windows Phone 파노라마 페이지를 기존 프로젝트에 추가하여 파노라마 앱을 만드는 방법을 보여 줍니다. 파노라마 샘플은 Windows Phone 개발자 센터의 샘플 갤러리를 참조하세요.

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

 

이 섹션에서는 Visual Studio에서 파노라마 앱을 만들고 PanoramaItem 컨트롤 3개를 만듭니다. 이 프로세스에서는 Panorama 컨트롤과 일부 PanoramaItem 컨트롤이 미리 채워져 있는 프로젝트에 Windows Phone 파노라마 페이지를 추가합니다. PanoramaItem을 더 추가하고 Panorama 컨트롤에 배경 이미지를 적용합니다.

기본 파노라마 앱을 만들려면

  1. 시작 메뉴에서 Visual Studio 를 시작합니다.

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

  3. 새 프로젝트 창이 표시됩니다. Visual C# 템플릿을 확장한 다음 Windows Phone 템플릿을 선택합니다.

  4. Windows Phone 앱  템플릿을 선택합니다. 프로젝트 이름을 원하는 대로 입력합니다.

  5. 확인을 클릭합니다. 새 프로젝트가 만들어지고 MainPage.xaml이 Visual Studio 디자이너 창에서 열립니다.

  6. 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 추가를 클릭한 다음 새 항목을 클릭합니다. Windows Phone 파노라마 페이지를 선택하고 페이지 아래쪽의 추가를 클릭합니다. 기본 이름 PanoramaPage1.xaml이 이 프로젝트에 사용됩니다.

  7. MainPage.xaml에서 ContentPanel이라는 표 안의 XAML 코드에 다음 코드를 추가합니다.

    <HyperlinkButton Content="Panorama Application Example" Height="57" 
    HorizontalAlignment="Left" Margin="49,116,0,0" Name="hyperlinkButton1" 
    VerticalAlignment="Top" Width="383" NavigateUri="/PanoramaPage1.xaml"/>
    
    

    이 하이퍼링크를 만드는 목적은 앱의 시작점을 만드는 데 있습니다. 응용프로그램 런타임에 사용자가 이 하이퍼링크를 탭하면 파노라마를 계속 경험할 수 있습니다. 파노라마 앱의 기본 입력 메커니즘으로 하이퍼링크를 사용할 필요는 없습니다. 하이퍼링크는 이 연습에서 하나의 예제로 사용될 뿐입니다. 사용자가 앱을 시작하는 즉시 파노라마 환경이 보이도록 구성할 수 있습니다.

  8. PanoramaPage1.xaml에서는 XAML 코드에 다음 코드가 표시되어야 합니다.

       <!--LayoutRoot contains the root grid where all other page content is placed.-->
        <Grid x:Name="LayoutRoot">
            <controls:Panorama Title="my application">
    
                <!--Panorama item one-->
                <controls:PanoramaItem Header="item1">
                    <Grid/>
                </controls:PanoramaItem>
    
                <!--Panorama item two-->
                <controls:PanoramaItem Header="item2">
                    <Grid/>
                </controls:PanoramaItem>
            </controls:Panorama>
        </Grid>
    
    

    앞의 코드를 사용하여 하나의 Panorama 컨트롤을 만들고 제목을 할당합니다. 다음으로 각각 하나의 머리글에 할당되는 두 개의 PanoramaItem 컨트롤을 만듭니다. 이 프로젝트의 경우 PanoramaItem 컨트롤 세 개를 만들고 다음 단계에서 추가로 PanoramaItem을 만듭니다.

  9. <!--Panorama item two--> 섹션 후 다음 코드에 PanoramaItem 컨트롤을 하나 추가합니다.

    <!--Panorama item three.-->
           <controls:PanoramaItem Header="item3">
               <Grid/>
          </controls:PanoramaItem>
    
    

다음 그림에서는 이 연습 단계에서 기본 파노라마 컨트롤과 PanoramaItem 컨트롤이 어떻게 표시되는지를 보여 줍니다.

AP_CoreCon_PanoBase

이 섹션에서는 Panorama 컨트롤에 이미지를 적용합니다. 이 항목의 경우 샘플 이미지인 samplePhoto.jpg가 사용됩니다. 앱에 적절한 크기의 이미지를 사용합니다. 성능을 향상시키고 로드 시간을 최소화하며 배율 조정이 발생하지 않도록 하려면 배경 이미지가 480 x 800 픽셀과 1024 x 800 픽셀(너비 x 높이) 사이여야 합니다. 이미지의 높이가 800픽셀이 되지 않으면 가로 세로 비율이 유지되지 않아 이 높이까지 연장됩니다.

배경 이미지를 설정하려면

  • Panorama 컨트롤 코드, <controls:Panorama Title="my application"> 뒤에 있는 XAML 코드에 다음 코드를 추가합니다.

    <!--Assigns a background image to the Panorama control.-->
         <controls:Panorama.Background>
            <ImageBrush ImageSource="samplePhoto.jpg"/>
         </controls:Panorama.Background>
    
    

    또는 코드 숨김 파일이나 페이지에서 컨트롤의 Background를 프로그래밍 방식으로 변경할 수도 있습니다. System.Windows.Media.Imaging 네임스페이스에 대한 지시문 사용을 코드 숨김 파일에 추가합니다. Background를 프로그래밍 방식으로 변경하려면 페이지 생성자, OnNavigatedTo 오버라이드 또는 Panorama 컨트롤의 Background를 설정하려는 코드의 다른 위치에 다음 코드를 추가합니다. 이 코드는 Panorama 컨트롤 이름을 PanoControl로 지정한 것으로 가정합니다.

    
    BitmapImage bitmapImage = new BitmapImage(new Uri(“samplePhoto.jpg”,UriKind.Relative));
    ImageBrush imageBrush = new ImageBrush();
    imageBrush.ImageSource = bitmapImage;
    PanoControl.Background = imageBrush;
    
    

이 섹션에서는 다양한 컨트롤과 콘텐츠를 각 PanoramaItem 컨트롤에 추가합니다. 또한 두 번째 PanoramaItem 방향을 좌우로 전환하여 콘텐츠에 독특한 원근감을 줍니다. 예를 들어 콘텐츠 섹션이 화면을 벗어나 확장되면 사용자가 나머지 부분을 표시하기 위해 이동해야 합니다.

첫 번째 PanoramaItem에 콘텐츠 추가

첫 번째 PanoramaItem에서 줄 바꿈 텍스트가 포함된 TextBlock 컨트롤 두 개를 추가합니다. 두 컨트롤은 모두 StackPanel 컨트롤 안에 배치됩니다. 이는 PanoramaItem 컨트롤에서 콘텐츠를 표시하는 방법을 간단히 나타낸 것입니다.

첫 번째 PanoramaItem에 콘텐츠를 추가하려면

  • 첫 번째 PanoramaItem, <controls:PanoramaItem Header="item1"> 뒤 XAML 코드에 다음 코드를 추가합니다. 기존 <Grid/> 태그는 삭제해야 합니다.

             <Grid>
             <!--This code creates two TextBlock controls and places them in a StackPanel control.-->
                <StackPanel>
                    <TextBlock
                        Text="This is a text added to the first panorama item control"
                        Style="{StaticResource PhoneTextLargeStyle}"
                        TextWrapping="Wrap"/>
                    <TextBlock Text=" "/>
                    <TextBlock
                        Text="You can put any content you want here..."
                        Style="{StaticResource PhoneTextLargeStyle}"
                        TextWrapping="Wrap"/>
                </StackPanel>
             </Grid>
    

    첫 번째 PanoramaItem은 이 항목의 아래쪽에 나오는 그림과 유사합니다.

두 번째 PanoramaItem에 콘텐츠 추가

이 섹션에서는 PanoramaItem컨트롤의 방향을 가로로 변경합니다. 그러면 콘텐츠가 화면을 벗어나 확장되어 사용자가 가로 방향으로 이동하여 나머지 콘텐츠를 표시해야 합니다.

두 번째 PanoramaItem의 방향을 변경하려면

  • 두 번째 PanoramaItem의 방향을 가로로 변경합니다. 두 번째 PanoramaItem 컨트롤에 대한 XAML 코드에서 Orientation 특성을 Horizontal로 설정합니다.

    <controls:PanoramaItem
          Header="item2"
          Orientation="Horizontal">
    
    

두 번째 PanoramaItem에 콘텐츠를 추가하려면

  • 두 번째 PanoramaItem, <controls:PanoramaItem Header="item2" Orientation=”Horizontal”> 뒤 XAML 코드에 다음 코드를 추가합니다. 기존 <Grid/> 태그는 삭제해야 합니다.

    
       <!--Assigns a border to the PanoramaItem control and background for the content section.-->
            <Grid>
                <Border
                    BorderBrush="{StaticResource PhoneForegroundBrush}"
                    BorderThickness="{StaticResource PhoneBorderThickness}"
                    Background="#80808080">
                    
                    <TextBlock
                        Text="This content is very wide and can be panned horizontally."
                        Style="{StaticResource PhoneTextExtraLargeStyle}"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center" >                  
                    </TextBlock>
                        
                </Border>
             </Grid>
    
    

    두 번째 PanoramaItem은 이 항목의 아래쪽에 나오는 그림과 유사합니다.

세 번째 PanoramaItem에 콘텐츠 추가

마지막 PanoramaItem의 경우 ListBox 컨트롤 내에 일련의 문자열 텍스트 값을 입력합니다. 이는 호스팅된 컨트롤을 탐색할 수 있음을 표시하기 위함입니다. 그러면 사용자가 목록 콘텐츠를 세로(위아래) 방향으로 이동할 수 있게 됩니다.

세 번째 PanoramaItem에 콘텐츠를 추가하려면

  1. PanoramaPage1.xaml에서 다음 네임스페이스 선언을 XAML 코드에 추가합니다.

    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    
    
    참고참고:

    이 어셈블리는 여러 줄의 문자열 텍스트를 ListBox 컨트롤에 추가하기 위해 참조됩니다.

  2. 세 번째 PanoramaItem, <controls:PanoramaItem Header="item3"> 뒤 XAML 코드에 다음 코드를 추가합니다. 기존 <Grid/> 태그는 삭제해야 합니다.

    
    <!--This code adds a series of string text values.-->
    <Grid>
                <ListBox FontSize="{StaticResource PhoneFontSizeLarge}">
                    <sys:String>This</sys:String>
                    <sys:String>item</sys:String>
                    <sys:String>has</sys:String>
                    <sys:String>a</sys:String>
                    <sys:String>short</sys:String>
                    <sys:String>list</sys:String>
                    <sys:String>of</sys:String>
                    <sys:String>strings</sys:String>
                    <sys:String>that</sys:String>
                    <sys:String>you</sys:String>
                    <sys:String>can</sys:String>
                    <sys:String>scroll</sys:String>
                    <sys:String>up</sys:String>
                    <sys:String>and</sys:String>
                    <sys:String>down</sys:String>
                    <sys:String>and</sys:String>
                    <sys:String>back</sys:String>
                    <sys:String>again.</sys:String>         
                </ListBox>
    </Grid>
    
    
    

    세 번째 PanoramaItem은 이 항목의 아래쪽에 나오는 그림과 유사합니다.

  3. 디버그 | 디버깅 시작 메뉴 명령을 선택하여 앱을 실행합니다. 이렇게 하면 에뮬레이터 창이 열리고 앱이 실행되거나 선택 항목에 따라 장치로 배포됩니다.

    AP_CoreCon_PanoFinish

표시: