방법: Windows Phone용 파노라마 응용프로그램 만들기

2012-02-09

이 항목에서는 Windows Phone에서 파노라마 응용프로그램을 만드는 방법에 대해 설명합니다. 파노라마 샘플은 Windows Phone용 코드 샘플을 참조하십시오.

지금부터 이 항목에서는 다음 단계를 다룹니다.

  • 3개의 PanoramaItem 컨트롤 또는 섹션을 포함하는 파노라마 응용프로그램 만들기

  • Panorama 컨트롤의 배경 이미지 설정

  • 각각의 PanoramaItem 컨트롤에 다양한 컨트롤 및 콘텐츠 추가

  • PanoramaItem 컨트롤에서 방향 및 콘텐츠 레이아웃 변경

이 섹션에서는 Visual Studio에서 파노라마 응용프로그램을 만들고 PanoramaItem 컨트롤 3개를 추가합니다. 이 프로세스는 Panorama 컨트롤과 일부 PanoramaItem 컨트롤이 미리 만들어져 있는 프로젝트에 Windows Phone 파노라마 페이지를 추가하는 것입니다. 그리고 PanoramaItem을 추가하고 Panorama 컨트롤에 배경 이미지를 적용하게 됩니다.

기본 파노라마 응용프로그램을 만들려면

  1. 시작 메뉴에서 Windows Phone용 Visual Studio 2010 Express를 실행합니다.

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

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

  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 컨트롤을 만듭니다. 이 프로젝트의 경우 3개의 PanoramaItem 컨트롤을 만들고 다음 단계에서 추가적인 PanoramaItem을 만듭니다.

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

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

다음은 이 연습 단계에서 기본 Panorama 컨트롤과 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>
    
    

    또는 코드 숨김 파일이나 페이지에서 컨트롤의 배경을 프로그래밍 방식으로 변경할 수 있습니다. System.Windows.Media.Imaging 네임스페이스에 대한 using 지시문을 코드 숨김 파일에 추가합니다. 프로그래밍 방식으로 배경을 변경하려면 다음 코드를 페이지 생성자, OnNavigatedTo 재정의에 추가하거나, Panorama 컨트롤의 배경을 설정할 코드 내 다른 위치에 추가합니다. 이 코드는 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의 경우 텍스트 줄 바꿈을 포함하는 TextBlock 컨트롤 2개를 추가합니다. 두 컨트롤 모두 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에 콘텐츠를 추가하려면

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

    <controls:PanoramaItem
          Header="item2"
          Orientation="Horizontal">
    
    
  2. XAML 코드에서 두 번째 PanoramaItem<controls:PanoramaItem Header="item2" Oreintation="Horizontal"> 뒤에 다음 코드를 추가합니다. 기존 <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의 경우 ListBox 컨트롤 내부에 일련의 문자열 텍스트 값을 배치합니다. 그 목적은 개발자가 호스트되는 컨트롤을 탐색할 수 있다는 사실을 보여 주기 위한 것입니다. 사용자는 목록 내용을 세로로(위 또는 아래로) 이동할 수 있습니다.

세 번째 파노라마 항목에 콘텐츠를 추가하려면

  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

표시: