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

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 피벗 앱이라는 사용자 지정 템플릿을 사용할 수 있습니다. 이 템플릿에는 콘텐츠가 미리 채워져 있으며 적절하게 템플릿을 수정할 수 있습니다.

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

  • Windows Phone 피벗 페이지를 기존 프로젝트에 추가할 수 있습니다.

이 항목에서는 Windows Phone 피벗 페이지를 기존 프로젝트에 추가하여 피벗 앱을 만드는 방법을 보여 줍니다. 피벗 앱 샘플은 Windows Phone 개발자 센터의 샘플 갤러리에서 찾을 수 있습니다.

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

 

이 섹션에서는 Visual Studio에서 피벗 앱을 만듭니다. 이 프로세스에서는 Pivot 컨트롤과 일부 PivotItem 컨트롤이 미리 만들어져 있는 프로젝트에 Windows Phone 피벗 페이지를 추가합니다. PivotItem을 추가로 넣습니다.

기본 피벗 앱을 만들려면

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

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

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

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

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

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

  7. MainPage.xaml에서 ContentPanel이라는 그리드 내의 XAML 코드에 다음을 추가합니다.

    <HyperlinkButton Content="Pivot Application Example" Height="57" 
    HorizontalAlignment="Left" Margin="49,116,0,0" Name="hyperlinkButton1" 
    VerticalAlignment="Top" Width="383" NavigateUri="/PivotPage1.xaml"/>
    
    
    참고참고:

    이 하이퍼링크를 만드는 목적은 앱의 시작점을 만드는 데 있습니다. 응용프로그램 런타임에 사용자는 이 하이퍼링크를 탭하여 피벗 환경으로 진행합니다. 피벗 앱을 시작하기 위한 기본 메커니즘으로 하이퍼링크를 사용할 필요는 없습니다. 하이퍼링크는 이 연습에 사용된 예일 뿐입니다. 사용자가 앱을 시작하면 피벗 환경이 즉시 보이도록 구성할 수 있습니다.

  8. PivotPage1.xaml에서 XAML 코드에 포함된 다음 코드가 표시되어야 합니다.

    <!--LayoutRoot is the root grid where all page content is placed.-->
        <Grid x:Name="LayoutRoot" Background="Transparent">
            <!--Pivot Control-->
            <controls:Pivot Title="MY APPLICATION">
                <!--Pivot item one-->
                <controls:PivotItem Header="item1">
                    <Grid/>
                </controls:PivotItem>
    
                <!--Pivot item two-->
                <controls:PivotItem Header="item2">
                    <Grid/>
                </controls:PivotItem>
            </controls:Pivot>
        </Grid>
    
    
    참고참고:

    앞의 코드에서는 단일 피벗 컨트롤을 만들고 이름을 할당합니다. 다음으로 각각 하나의 머리글에 할당되는 두 개의 PivotItem 컨트롤을 만듭니다. 이 프로젝트의 경우 PivotItem 컨트롤 세 개를 만들고 다음 단계에서 추가로 PivotItem을 만듭니다.

  9. <!--Pivot item two--> 섹션 뒤에 다음 코드와 함께 PivotItem 컨트롤을 추가합니다.

       <!--Pivot item three.-->
            <controls:PivotItem Header="item3">
               <Grid/>
            </controls:PivotItem>
    
    

이 섹션에서는 다양한 컨트롤과 콘텐츠를 각 PivotItem 컨트롤에 추가합니다.

첫 번째 피벗 항목에 콘텐츠 추가

첫 번째 PivotItem의 경우 텍스트 줄 바꿈을 포함하는 TextBlock 컨트롤을 추가합니다.

첫 번째 피벗 항목에 콘텐츠를 추가하려면

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

    <Grid>
        <!--Added TextBlock control with formatted text.-->
        <TextBlock
           TextWrapping="Wrap"
           Style="{StaticResource PhoneTextLargeStyle}">
           <Run>This is a simple sample for the pivot control adding text.</Run>
           <LineBreak/>
           <LineBreak/>
           <Run>You can put any content you want here...</Run>
      </TextBlock>
    </Grid>
    
    참고참고:

    첫 번째 PivotItem 콘텐츠는 이 항목의 아래쪽에 나오는 그림과 유사합니다.

두 번째 피벗 항목에 콘텐츠 추가

이 페이지에서는 배경 이미지와 줄 바꿈 텍스트를 포함하는 콘텐츠 모음을 추가합니다. 이 항목의 경우 샘플 이미지인 samplePhoto.jpg가 사용됩니다. 사진을 수용할 수 있도록 적절하게 아래 코드를 변경해야 합니다.

두 번째 피벗 항목에 콘텐츠를 추가하려면

  • 두 번째 피벗 항목의 코드 줄 <controls:PivotItem Header="item2"> 뒤에 있는 XAML 코드에 다음 코드를 추가합니다. 기존 <Grid/> 태그는 삭제해야 합니다.

    <!--Added background image and text content.-->
        <Border
            BorderBrush="{StaticResource PhoneForegroundBrush}"
            BorderThickness="{StaticResource PhoneBorderThickness}">
                 <Grid>
                     <Image
                        Source="samplePhoto.jpg"
                        Stretch="UniformToFill"/>
                     <TextBlock
                        Text="Here is some generic content to take up space."
                        TextWrapping="Wrap"
                        Style="{StaticResource PhoneTextExtraLargeStyle}" />
                </Grid>
         </Border>
    
    참고참고:

    두 번째 PivotItem 콘텐츠는 이 항목의 아래쪽에 나오는 그림과 유사합니다.

세 번째 피벗 항목에 콘텐츠 추가

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

세 번째 피벗 항목에 콘텐츠를 추가하려면

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

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

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

  2. 세 번째 PivotItem 코드 줄 <controls:PivotItem 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>
    
    
    참고참고:

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

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

    AP_CoreCon_PivotSample

표시: