내보내기(0) 인쇄
모두 확장

방법: Windows Phone용 피벗 응용프로그램 만들기

2012-02-09

이 항목에서는 Windows Phone에서 피벗 응용프로그램을 만드는 방법에 대해 설명합니다. 피벗 응용프로그램 샘플은 Windows Phone용 코드 샘플 항목에서 찾을 수 있습니다.

이 연습의 목적은 다음과 같습니다.

  • 3개의 개별 콘텐츠 페이지를 포함하는 피벗 응용프로그램 만들기

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

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

기본 피벗 응용프로그램을 만들려면

  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 피벗 페이지를 선택하고 페이지 아래쪽에 있는 추가를 클릭합니다. 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>
    
    
    참고참고:

    앞의 코드에서는 단일 Pivot 컨트롤을 만들고 이름을 지정합니다. 다음으로 각각 하나의 헤더에 지정되는 PivotItem 컨트롤을 만듭니다. 이 프로젝트의 경우 3개의 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="item1"> 뒤에 있는 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

표시:
© 2014 Microsoft