내보내기(0) 인쇄
모두 확장
정보
요청한 주제가 아래에 표시됩니다. 그러나 이 주제는 이 라이브러리에 포함되지 않습니다.

Windows Phone 8의 페이지 스택을 사용하여 탐색하는 방법

2014-06-18

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

 

이 항목에서는 탐색 기록(페이지 스택)을 조작하여 앱 탐색을 수정하는 방법을 설명합니다. NavigationService API를 사용하여 탐색 기록을 조사하고 이 기록을 사용할 수 있습니다. NavigationService 클래스의 속성과 메서드는 이 항목에서 페이지 스택을 검사하고 항목을 제거한 다음, 이 변경 내용이 앱을 통한 탐색에 끼치는 영향을 관찰하는 데 사용됩니다.

참고참고:

탐색 기록페이지 스택이라는 용어는 이 항목 전체에서 NavigationService.BackStack 속성을 통해 노출되는 탐색 기록을 지칭하기 위해 동일한 의미로 사용됩니다.

이 기능을 설명하는 앱의 완성된 샘플을 다운로드할 수 있습니다. 자세한 내용은 Windows Phone의 페이지 스택을 사용하여 탐색을 참조하세요. 이 다운로드 가능한 샘플은 Windows Phone OS 7.1 을 대상으로 합니다. 이 항목의 코드는 Windows Phone 8 에서 실행되도록 조정되었습니다.

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

 

앱의 탐색 기록은 스택이라는 LIFO(후입선출) 구조로 표시됩니다. 이 탐색 기록은 앱 후방 탐색을 나타내는 스택 구조의 페이지 집합을 포함하기 때문에, 여기서는 후방 스택이라고도 합니다.

이 스택은 쌓여 있는 접시와 같은 개념으로 생각할 수 있습니다. 즉, 마지막에 쌓은 접시를 가장 먼저 제거할 수 있습니다. 이처럼 가장 최근 항목이 이 스택의 맨 위에 추가되는데, 이를 푸시 작업이라고 합니다. 스택 맨 위에서 항목을 한 번에 하나씩 제거하는 방법으로만 스택에서 항목을 검색할 수 있습니다. 스택에서 맨 위 항목을 제거하는 것을 작업이라고 합니다. 아래 그림에 스택의 개념이 나와 있습니다.

BackStack stack representation

앱의 페이지가 Navigate를 호출하면 현재 페이지가 페이지 스택에 추가되고, 대상 페이지의 새 인스턴스가 만들어져 표시됩니다. 앱에서 페이지를 탐색하면 이 스택에 항목이 추가됩니다.

페이지가 GoBack을 호출하거나 사용자가 휴대폰의 뒤로 버튼을 누르면 현재 페이지 탐색이 중단되고 스택 맨 위의 페이지가 페이지 스택에서 팝오프되어 표시됩니다. 스택에 더 이상 항목이 남아 있지 않을 때까지 이 후방 탐색이 계속됩니다. 스택에 더 이상 항목이 없는 경우 휴대폰의 뒤로 버튼을 탭하면 앱이 종료됩니다.

대부분의 앱은 후방 스택을 조작할 필요가 없으며, 기본 탐색으로 완전하게 잘 작동합니다. 다른 앱은 최고의 사용자 환경을 제공하도록 탐색 기록을 조정해야 합니다. 예를 들어 앱에 로그인 페이지가 있는 경우, 사용자가 로그인한 후에는 로그인 페이지로 다시 이동하지 못하도록 할 수 있습니다.

이 항목에서는 BackStack 속성 및 RemoveBackEntry 메서드를 사용하여 탐색 기록을 조작하는 방법을 설명합니다.

이 섹션에서는 앱을 실행하는 동안 쉽게 검사할 수 있도록 앱에서 탐색 기록 또는 후방 스택을 표시하는 방법을 설명합니다. 예제 앱은 여러 페이지로 구성됩니다. 페이지 사이를 이동할 때 후방 스택에 있는 항목을 확인할 수 있습니다. 항목을 쉽게 제거하고, 후방 스택에 반영된 이 업데이트를 볼 수도 있습니다. 이 앱에서 후방 스택은 다음 그림에 있는 것처럼 목록으로 표시됩니다.

BackStack Initial UI

위 그림의 회색 영역에 예제 앱의 후방 스택이 표시됩니다. 앱을 탐색하면 목록이 탐색 기록의 항목으로 채워집니다. 마지막 항목 팝선택 항목까지 팝 버튼을 사용하여 탐색 기록을 변경할 수 있습니다.

회색 목록 영역은 각 개별 페이지에서 코딩되지 않습니다. 대신 앱의 RootFrame에 단일 위치에서 목록이 추가됩니다. RootFrame 개체는 앱과 연결된 PhoneApplicationFrame입니다. 각 앱에는 RootFrame이 하나 있습니다. 각 앱 페이지(PhoneApplicationPage 인스턴스)는 사용자가 해당 페이지로 이동할 때 탐색 프레임워크에서 이 프레임의 Content로 설정됩니다. 새 Windows Phone 앱을 만들 때 제공되는 RootFrame 개체의 기본 템플릿이 앱 페이지 및 기타 요소(예: 시스템 트레이 및 앱의 앱 바)를 표시합니다. 이 예제에서는 각 페이지를 표시하되 화면 맨 아래에 목록으로 후방 스택을 표시할 공간을 남겨 두는 템플릿을 만듭니다. 페이지를 이동할 때 이 목록이 업데이트되어 앱 탐색 기록(후방 스택)의 현재 상태를 반영합니다.

Windows Phone 앱의 구조에 대한 자세한 내용은 Windows Phone 8의 앱 내 탐색를 참조하세요.

페이지 스택을 표시하려면

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

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

  3. Windows Phone 앱  템플릿을 선택합니다. 이름에 원하는 이름을 입력합니다.

  4. 확인을 클릭합니다. Windows Phone 플랫폼 선택 대화 상자가 나타납니다. 대상 버전을 선택하거나 기본 버전을 적용합니다.

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

  6. 다음 단계에서는 앱 RootFrame에 사용되는 템플릿을 변경하여 후방 스택을 표시합니다. 이렇게 하려면 RootFrame의 사용자 지정 ControlTemplateListBox를 추가합니다. App.xaml 파일에서 Application.Resources 항목에 다음 태그를 추가합니다.

    템플릿은 두 개의 행이 포함된 표로 구성됩니다. 표의 첫 행에는 ContentPresenter가 포함됩니다. 여기에 각 페이지의 콘텐츠가 표시됩니다. 그리고 이 표의 두 번째 행에는 페이지 스택용 UI를 포함하기 위한 또 다른 표가 추가됩니다. 이 UI는 페이지 스택의 각 항목을 표시하는 ListBox와 페이지 스택을 조작하기 위한 버튼으로 구성됩니다.

    
    <Application.Resources>
            <ControlTemplate x:Name="NewFrameTemplate">
                <Grid x:Name="ClientArea">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <ContentPresenter Grid.Row="0"/>
                    <Border Grid.Row="1" BorderBrush="{StaticResource PhoneForegroundBrush}" BorderThickness="{StaticResource PhoneBorderThickness}" Height="300">
                        <Grid x:Name="ContentPanel" Background="{StaticResource PhoneSemitransparentBrush}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition />
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <TextBlock  Grid.Row="0" x:Name="CurrentPage" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Center"/>
                            <ListBox Grid.Row="1" ItemsSource="{Binding}" x:Name="HistoryList" 
                                    HorizontalAlignment="Center" Height="300">
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <Border BorderBrush="{StaticResource PhoneForegroundBrush}" BorderThickness="{StaticResource PhoneBorderThickness}" Width="300" Margin="5" 
                                                Background="DarkGray" HorizontalAlignment="Center">
                                            <TextBlock Text="{Binding}"/>
                                        </Border>
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>
                            <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Center">
                                <Button Content="Pop Last" x:Name="btnPopLast" IsEnabled="false"/>
                                <Button Content="Pop To Selected" x:Name="btnPopToSelected" IsEnabled="false"/>
                            </StackPanel>
                        </Grid>
                    </Border>
    
                </Grid>
            </ControlTemplate>
        </Application.Resources>
    
    
  7. App.xaml.cs 코드 숨김 파일에서, 다음 using 문을 추가합니다.

    using System.Windows.Controls;
    

    그런 다음, App 클래스의 맨 위에 다음 선언을 추가합니다. 이러한 선언은 사용자 지정 템플릿에서 만든 UI 요소를 참조하는 데 사용됩니다.

    
    // UI controls on the RootFrame template.
    ListBox historyListBox;            // ListBox for listing the navigation history
    Button popLastButton;              // Button to pop the newest entry from the back stack
    Button popToSelectedButton;        // Button to pop all entries in the back stack up to the selected entry
    TextBlock currentPageTextBlock;    // TextBlock to display the current page the user is on
    
    
  8. App.xaml.cs 코드 숨김 파일에서, 다음 using 문을 추가합니다.

    using System.Windows.Media;
    

    그런 다음, 생성자에서 InitializePhoneApplication에 대한 호출 바로 뒤에 다음 코드 줄을 추가합니다. 그러면 먼저 RootFrame의 템플릿이 NewFrameTemplate(6단계에서 정의한 템플릿의 이름)으로 설정됩니다. 템플릿에 있는 버튼에 대한 이벤트 처리기도 여기서 후크됩니다. 마지막으로 RootFrameNavigated 이벤트에 대한 대리자를 정의하여 기록을 업데이트합니다.

    이벤트 처리기는 아직 만들지 않았습니다.

    
    // Set the template for the RootFrame to the new template you created in the Application.Resources in App.xaml
    RootFrame.Template = Resources["NewFrameTemplate"] as ControlTemplate;
    RootFrame.ApplyTemplate();
    
    popToSelectedButton = (VisualTreeHelper.GetChild(RootFrame, 0) as FrameworkElement).FindName("btnPopToSelected") as Button;
    popToSelectedButton.Click += new RoutedEventHandler(PopToSelectedButton_Click);
    
    popLastButton = (VisualTreeHelper.GetChild(RootFrame, 0) as FrameworkElement).FindName("btnPopLast") as Button;
    popLastButton.Click += new RoutedEventHandler(PopLastButton_Click);
    
    currentPageTextBlock = (VisualTreeHelper.GetChild(RootFrame, 0) as FrameworkElement).FindName("CurrentPage") as TextBlock;
    
    historyListBox = (VisualTreeHelper.GetChild(RootFrame, 0) as FrameworkElement).FindName("HistoryList") as ListBox;
    historyListBox.SelectionChanged += new SelectionChangedEventHandler(HistoryList_SelectionChanged);
    
    // Update the navigation history listbox whenever a navigation happens in the application
    RootFrame.Navigated += delegate { RootFrame.Dispatcher.BeginInvoke(delegate { UpdateHistory(); }); };
    
    
  9. App.xaml.cs 코드 숨김 파일에 다음 메서드를 추가합니다. UpdateHistory는 탐색 페이지 스택의 UI를 새로 고칩니다. 이 메서드는 RootFrame에서 Navigated 이벤트가 발생하면 호출됩니다. 이 이벤트는 앱에서 탐색을 수행할 때마다 발생합니다. 이 메서드는 BackStack 속성의 모든 항목에 대해 반복되어 ListBox에 해당 항목을 추가합니다. 또한 현재 페이지의 URI도 표시합니다. 탐색 페이지 스택에 항목이 있으면 마지막 항목 팝 버튼이 사용하도록 설정됩니다. HistoryList_SelectionChanged는 탐색 기록 목록에서 항목이 선택되었는지에 따라 선택 항목까지 팝 버튼을 사용하거나 사용하지 않도록 설정합니다.

    
    /// <summary>
    /// Use the BackStack property to refresh the navigation history list box with the latest history.
    /// </summary>
    void UpdateHistory()
    {
       historyListBox.Items.Clear();
       int i = 0;
    
       foreach (JournalEntry journalEntry in RootFrame.BackStack)
       {
          historyListBox.Items.Insert(i, journalEntry.Source);
          i++;
       }
       currentPageTextBlock.Text = "[" + RootFrame.Source + "]";
       if (popLastButton != null)
       {
           popLastButton.IsEnabled = (historyListBox.Items.Count > 0);
       }
    }
    
    /// <summary>
    /// Handle the SelectionChanged event for navigation history list.
    /// </summary>
    private void HistoryList_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
       if (historyListBox != null && popToSelectedButton != null)
       {
           popToSelectedButton.IsEnabled = (historyListBox.SelectedItems.Count > 0) ? true : false;
       }
    }
    
    
  10. App.xaml.cs 코드 숨김 파일에 다음 메서드를 추가합니다. 이 메서드는 마지막 항목 팝 버튼의 클릭 이벤트를 처리합니다. 사용자가 이 버튼을 탭하면 후방 스택에 마지막으로 추가된 항목이 제거됩니다. 이 메서드는 RootFrame에서 RemoveBackEntry 메서드를 사용합니다. 항목이 제거되면 UpdateHistory를 호출하여 페이지 스택 항목 목록을 새로 고칩니다.

    
    /// <summary>
    /// Remove the last entry from the back stack.
    /// </summary>
    private void PopLastButton_Click(object sender, RoutedEventArgs e)
    {
    
        RootFrame.RemoveBackEntry();
    
        // Refresh the history list since the back stack has been modified.
        UpdateHistory();
    }
    
    
  11. App.xaml.cs 코드 숨김 파일에 다음 메서드를 추가합니다. 사용자가 후방 스택의 항목을 선택하고 선택 항목까지 팝을 탭하면 선택한 항목까지의 모든 항목이 후방 스택에서 제거됩니다. RootFrameRemoveBackEntry 메서드를 사용하여 페이지 스택에서 각 항목을 제거합니다. 항목이 제거되면 UpdateHistory를 호출하여 페이지 스택 UI를 새로 고칩니다.

    
    /// <summary>
    /// Remove all entries from the back stack up to the selected item, but not including it.
    /// </summary>
    private void PopToSelectedButton_Click(object sender, RoutedEventArgs e)
    {
        // Make sure something has been selected.
        if (historyListBox != null && historyListBox.SelectedIndex >= 0)
        {
            for (int i = 0; i < historyListBox.SelectedIndex; i++)
            {
                RootFrame.RemoveBackEntry();
            }
            // Refresh the history list since the back stack has been modified.
            UpdateHistory();
        }
     }
    
    

이 섹션에서는 앱을 탐색할 때 후방 스택을 검사 및 수정할 수 있도록 앱 RootFrame용으로 사용자 지정 템플릿을 추가하는 방법을 설명했습니다. 이 기능을 설명하려면 앱에 페이지를 여러 개 추가해야 합니다. 이 작업은 다음 섹션에서 설명합니다.

탐색 기록 검사 및 조작을 설명하려면 앱에 페이지를 여러 개 추가해야 합니다. 이 섹션에서는 이러한 페이지를 앱에 추가하는 방법을 설명합니다. 이 예제는 MainPage.xaml, Page1.xaml, Page2.xamlPage3.xaml의 네 페이지로 이루어져 있습니다. 각 페이지는 동일하게 구성되며 같은 UI를 사용합니다. 따라서 다음 단계를 각 페이지에 반복해야 합니다. 이 예제에서는 UserControl에 UI를 매핑하거나 도우미 메서드를 사용하여 코드를 다시 사용하지 않습니다.

앱에 페이지를 추가하려면

  1. 프로젝트 | 새 항목 추가 메뉴 명령을 선택하여 프로젝트에 새 페이지를 추가합니다. 새 항목 추가 창이 표시됩니다. 항목 목록에서 Windows Phone 세로 페이지를 선택하여 해당 항목을 추가하고, 이름 필드에 Page1.xaml을 입력합니다. 추가를 클릭하여 새 페이지를 프로젝트에 추가합니다. 이제 Page1.xaml이라는 새 페이지가 프로젝트에 추가되었습니다.

  2. 먼저 페이지 UI를 정의합니다. Page1.xaml에서 ContentPanel이라는 표를 다음 코드로 바꿉니다. 이렇게 하면 페이지가 시작 화면에 고정되는지 여부를 전환하는 데 사용되는 CheckBox와 앱에서 다음 페이지로 이동하는 Button(다음 페이지가 있는 경우)이 만들어집니다. 페이지를 휴대폰 시작 화면에 고정하는 것은 별도 확인이 필요한 특수 사례이므로, 시작 화면에서 페이지의 타일을 클릭하여 앱을 실행할 때 후방 스택 상태를 보여 주기 위해 여기서 설명합니다. 다음 코드에 나와 있는 이벤트 처리기는 후속 단계에서 설명합니다.

    
    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <CheckBox x:Name="PinToStartCheckBox" Content="Pin To Start" IsChecked="False" HorizontalAlignment="Center" 
    VerticalAlignment="Center" Click="PinToStartCheckBox_Click"/>
        <Button x:Name="btnNext" Content="Next Page"  Height="80" VerticalAlignment="Bottom" 
    Click="btnNext_Click"/>
    </Grid>
    
    
  3. 프로그래밍 방식으로 값을 설정할 수 있도록 2 XAML TextBlock 컨트롤에 이름을 할당합니다.

            <StackPanel Grid.Row="0" Margin="12,17,0,28">
                <TextBlock x:Name="AppName" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
                <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
            </StackPanel>
    
    
  4. Page1.xaml.cs 코드 숨김 파일에서 클래스의 맨 위에 다음 변수 선언을 추가합니다.

    
    // The URI string of the next page to navigate to from this page.
    // String.Empty here means that there is no next page.
    private string nextPage;
    
    
  5. 클래스 생성자의 InitializeComponent() 뒤에 다음 코드 줄을 추가합니다.

    참고참고:

    이 절차의 단계는 몇 개의 추가 페이지에 대해 반복됩니다. 사용자가 추가하는 각 추가 페이지에 대해 이 코드에서 페이지 제목과 nextPage 변수의 값을 업데이트하는 것을 잊지 마세요.

    
    // Set the application title - use the same application title on each page.
    AppName.Text = "SDK BACKSTACK SAMPLE";
    
    // Set a unique page title. In this example, you will use "page 1", "page 2", and so on.
    PageTitle.Text = "page 1";
    
    // Set the URI string of the next page, or String.Empty if there is no next page.
    nextPage = "/Page2.xaml";
    
    
  6. 다음 메서드를 추가하여 OnNavigatedTo 이벤트 처리기를 재정의합니다. 여기서 이 페이지에 nextPage 변수 집합이 있으면 다음 페이지 버튼이 표시됩니다. 시작 화면에 고정 확인란은 이 페이지에 해당하는 타일의 유무에 따라 설정됩니다.

    
    protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
    {
       base.OnNavigatedTo(e);
       
       // Show the Next button, if you have defined a next page.
       btnNext.Visibility = (String.IsNullOrWhiteSpace(nextPage)) ? Visibility.Collapsed : Visibility.Visible;
    
       if (ShellTile.ActiveTiles.FirstOrDefault(o => o.NavigationUri.ToString().Contains(NavigationService.Source.ToString())) == null)
          PinToStartCheckBox.IsChecked = false;
       else
          PinToStartCheckBox.IsChecked = true;
    }
    
    
  7. 페이지에서 다음 페이지 버튼의 Click 이벤트를 처리하려면 다음 메서드를 추가합니다. 이 페이지의 nextpage 변수가 정의된 경우 Navigate 메서드를 호출하여 해당 페이지로 이동합니다.

    
    /// <summary>
    /// Navigate to the next page.
    /// </summary>
    private void btnNext_Click(object sender, RoutedEventArgs e)
    {
         // Make sure to attempt navigation only if you have defined a next page.
         if (!String.IsNullOrWhiteSpace(nextPage))
         {
            this.NavigationService.Navigate(new Uri(nextPage, UriKind.Relative));
         }
    }
    
    
  8. 페이지에서 시작 화면에 고정 확인란의 Click 이벤트를 처리하려면 다음 메서드를 추가합니다. 이 메서드는 설정/해제와 같이 작동합니다. 이 페이지에 해당하는 타일이 시작 화면에 이미 있으면 확인란이 제거되고, 이 페이지에 해당하는 타일이 시작 화면에 없으면 확인란이 추가됩니다. 타일에 대한 자세한 내용은 Windows Phone 8의 타일을 참조하세요.

    
    /// <summary>
    /// Toggle pinning a Tile for this page on the Start screen.
    /// </summary>
    private void PinToStartCheckBox_Click(object sender, RoutedEventArgs e)
    {
       // Try to find a Tile that has this page's URI.
       ShellTile tile = ShellTile.ActiveTiles.FirstOrDefault(o => o.NavigationUri.ToString().Contains(NavigationService.Source.ToString()));
    
       if (tile == null)
       {
          // No Tile was found, so add one for this page.
          StandardTileData tileData = new StandardTileData { Title = PageTitle.Text };
          ShellTile.Create(new Uri(NavigationService.Source.ToString(), UriKind.Relative), tileData);
       }
       else
       {
          // A Tile was found, so remove it.
          tile.Delete();
       }
    }
    
    
    참고참고:

    앱에서 사용자가 페이지를 고정할 수 있는 경우, 사용자가 앱 루트로 빠르게 돌아가는 데 사용할 수 있는 버튼이 필요한지 여부를 고려하세요. 홈 버튼은 앱 홈 페이지로 이동한 다음 전체 탐색 후방 스택을 지웁니다. 각 탐색 시나리오를 검사하여 이 기능이 필요한지 여부를 판단하세요.

    • 고정된 페이지가 연락처 정보 페이지와 같은 독립적 페이지인 경우 사용자가 해당 페이지를 탭하여 정보를 확인한 후 앱에서 다시 나갈 가능성이 높습니다. 이 경우에는 하드웨어 뒤로 버튼을 사용하여 앱에서 나갈 수 있습니다.

    • 고정된 페이지가 앱으로 진입하는 지점(이 진입점에서 사용자가 세부 수준을 탐색할 수 있음)인 경우 앱 루트로 빠르게 돌아가는 방법이 필요할 수 있습니다. 예를 들어 고정된 페이지가 장바구니라면 사용자가 장바구니에서 구매를 완료하고 쇼핑을 다시 시작할 수 있습니다. 이 경우 사용자에게 홈 버튼을 제공하면 사용자가 앱 맨 처음으로 돌아가기 위해 탭해야 하는 횟수가 감소하므로 사용자 환경이 개선됩니다.

  9. 위의 단계에서는 페이지를 추가하고 이 앱에서 사용하도록 업데이트하는 방법을 설명했습니다. 앱을 완성하려면 다음과 같이 MainPage, Page2, Page3에 대해 이 단계를 반복하세요.

    페이지 이름

    새 페이지인지 여부

    5단계에서 변경할 내용

    MainPage.xaml

    아니요. 앱을 만들 때 이 페이지를 만듭니다. 이 페이지에 2~8단계를 반복합니다.

    PageTitle.Text = “main”;

    nextPage = “/Page1.xaml”;

    Page2.xaml

    예 이 페이지에 1~8단계를 반복합니다.

    PageTitle.Text = “page 2”;

    nextPage = “/Page3.xaml”;

    Page3.xaml

    예 이 페이지에 1~8단계를 반복합니다.

    PageTitle.Text = “page 3”;

    nextPage = String.Empty

    페이지 3은 앱의 마지막 페이지이므로, 다음 페이지에 String.Empty를 지정합니다. 전방 탐색은 페이지 3에서 할 수 없습니다.

이 섹션을 완료하면 솔루션 탐색기에서 솔루션이 다음 그림과 같이 표시됩니다. 앱에는 페이지가 네 개 있는데, 이러한 페이지의 전방 탐색은 MainPage.xaml -> Page1.xaml -> Page2.xaml -> Page3.xaml 순서로 진행됩니다.

Solution view for BackStack HowTo

이 섹션에서는 이 항목에서 생성한 앱을 실행하는 방법을 설명합니다.

앱을 테스트하려면

  1. 디버그 | 디버깅 시작 메뉴 명령을 선택하여 앱을 실행합니다.

  2. 앱이 실행되고 MainPage.xaml 페이지가 표시됩니다. 다음 그림에서 이를 확인할 수 있습니다. 화면 아랫부분에 후방 스택이 표시되어 있습니다. 현재는 탐색 기록에 항목이 없으므로 목록이 비어 있습니다. 현재 페이지는 [/MainPage.xaml]로 표시됩니다.

    BackStack Initial UI
  3. 다음 페이지 버튼을 탭합니다. 해당 페이지가 페이지 1로 변경되면 페이지 스택 목록에 /MainPage.xaml이 포함됩니다.

  4. 다음 페이지 버튼을 다시 탭합니다. 현재 페이지는 페이지 2입니다. 페이지 스택에는 두 항목(/Page1.xaml/MainPage.xaml)이 포함됩니다. 스택에서는 최신 항목이 맨 위에 표시되고, 가장 오래된 항목이 맨 아래에 표시됩니다. 다음 그림에 이러한 방식으로 표시된 후방 스택이 나와 있습니다.

    Interim UI for BackStack HowTo
  5. 마지막 항목 팝 버튼을 탭합니다. 그러면 후방 스택 목록에서 /Page1.xaml 항목이 제거됩니다.

  6. 장치에서 하드웨어 뒤로 버튼을 탭합니다. 그러면 기본 페이지 페이지가 표시되고 후방 스택이 비워집니다. 이전 단계에서 /Page1.xaml이 페이지 스택에서 제거되어 후방 탐색이 Page 2 -> Page1 - MainPage에서 Page2 -> MainPage로 변경되었기 때문입니다.

  7. 기본 페이지에서 다음 페이지 버튼을 탭합니다. 그러면 페이지 1 페이지가 표시됩니다. 이제 후방 스택에는 한 항목(/MainPage.xaml)이 포함됩니다.

  8. 페이지 1에서 다음 페이지 버튼을 탭합니다. 그러면 페이지 2 페이지가 표시됩니다. 후방 스택에는 두 항목(/Page1.xaml/MainPage.xaml)이 포함됩니다.

  9. 페이지 2에서 시작 화면에 고정을 탭합니다.

  10. 페이지 2라는 타일이 장치 시작 화면에 만들어집니다.

  11. 앞의 단계에서 만든 타일을 탭합니다. 그러면 앱이 실행되고 페이지 2가 표시됩니다. 그리고 후방 스택은 비어 있습니다. 단말기에서 뒤로 버튼을 탭하면 앱이 종료됩니다. 이 상태의 예제가 다음 그림에 나와 있습니다. 페이지 2는 장치 시작 화면에 고정되어 있습니다. 이 타일을 탭하여 앱이 실행되고 Page2가 표시된 상태입니다. 아래 그림에 표시된 후방 스택은 비어 있습니다.

    State of BackStack when navigation from Tile.

표시:
© 2014 Microsoft