방법: Windows Phone용 후방 스택을 사용하여 탐색

2012-02-09

이 항목에서는 후방 스택이라는 후방 탐색 기록을 조작하여 응용프로그램의 탐색을 수정하는 방법을 보여 줍니다. Windows Phone OS 7.1 에서는 탐색 기록을 사용하고 검사할 수 있게 하는 기능이 NavigationService API에 추가되었습니다. 이러한 속성과 메서드는 항목에서 후방 스택을 검사하고 항목을 제거한 다음 이러한 변경 사항이 응용프로그램 탐색에 미치는 영향을 관찰하는 데 사용됩니다. 이 기능을 보여 주는 응용프로그램의 완성된 샘플을 다운로드할 수 있습니다. 자세한 내용은 후방 스택 탐색 샘플을 참조하십시오.

참고참고:

다음 절차의 단계는 Windows Phone용 Visual Studio 2010 Express에 적용됩니다. Visual Studio 2010 Professional 또는 Visual Studio 2010 Ultimate용 추가 기능을 사용하는 경우에는 메뉴 명령이나 창 레이아웃에서 일부 소규모 변형이 나타날 수 있습니다.  

이 항목은 다음 섹션으로 이루어져 있습니다.

참고참고:

탐색 기록후방 스택이란 용어는 이 항목 전체에서 동일한 의미로 사용되며 NavigationService.BackStack 속성이 노출하는 후방 탐색 기록을 나냅니다.

응용프로그램의 탐색 기록은 스택이라는 후입선출 구조로 표현됩니다. 이 기록은 응용프로그램의 후방 탐색을 나타내는 스택 구조로 페이지 집합을 포함하기 때문에 여기서 후방 스택이라고도 합니다. 이 스택을 포개진 접시로 생각해 보십시오. 스택에 마지막으로 추가한 접시가 제거할 수 있는 첫 번째 접시가 됩니다. 최신 항목이 이 스택의 맨 위에 추가됩니다. 이것을 푸시 작업이라고 합니다. 스택에서 맨 위 항목을 제거하는 것을 작업이라고 합니다. 스택의 맨 위에서 한 번에 하나씩 항목을 제거하는 방법으로만 스택에서 항목을 검색할 수 있습니다. 스택의 개념은 다음 그림을 참조하십시오.

BackStack 스택 표현

응용프로그램의 페이지가 Navigate를 호출하면 현재 페이지가 후방 스택에 놓이고 대상 페이지의 새 인스턴스가 생성되어 표시됩니다. 응용프로그램에서 페이지를 탐색하면 이 스택에 항목이 추가됩니다. 페이지가 GoBack을 호출하거나 사용자가 휴대폰의 뒤로 버튼을 누르면 현재 페이지가 삭제되고 스택의 맨 위에 있는 페이지가 후방 스택에서 팝되어 표시됩니다. 이 후방 스택은 스택에 더 이상 항목이 없을 때까지 계속됩니다. 이때 휴대폰의 뒤로 버튼을 탭하면 응용프로그램이 종료됩니다.

대부분의 응용프로그램은 후방 스택을 조작할 필요가 없고 기본 탐색으로도 완벽하게 작동하지만 일부 개발자는 응용프로그램에 최상의 사용자 환경을 제공하기 위해 탐색 기록을 조정해야 합니다. 이 작업을 수행하는 여러 가지 이유가 있습니다. 예를 들어 응용프로그램에 로그인 페이지가 있을 수 있습니다. 사용자가 로그인한 경우 해당 페이지로 돌아갈 수 없도록 하는 것이 좋습니다. 이 항목에서는 BackStack 속성과 RemoveBackEntry 메서드를 사용하여 탐색 기록을 조작하는 방법을 보여 줍니다.

이 단원에서는 응용프로그램이 실행되는 동안 쉽게 검사할 수 있도록 응용프로그램에서 탐색 기록, 즉 후방 스택을 시각화하는 방법에 대해 설명합니다. 응용프로그램은 여러 페이지로 구성되어 있습니다. 한 페이지에서 다음 페이지로 이동할 때 후방 스택에 있는 항목을 확인하려고 합니다. 또한 쉽게 항목을 제거하고 후방 스택에 대한 모든 업데이트를 확인하려고 합니다. 이 응용프로그램에서는 후방 스택을 화면에 목록으로 시각화합니다. 다음 그림을 참조하십시오. 이것은 후방 스택의 개념 이해를 돕기 위한 것입니다. 응용프로그램의 후방 스택 항목을 표시해야 하는 것은 아니며 사용자가 결정할 문제입니다.

BackStack 초기 UI

앞의 그림에서 회색 영역은 응용프로그램의 후방 스택을 시각화한 것입니다. 응용프로그램을 탐색하면 목록에 탐색 기록의 항목이 채워집니다. Pop LastPop To Selected 버튼을 사용하여 탐색 기록을 변경합니다. 각 개별 페이지에는 이 회색 영역이 없습니다. 대신 중앙의 응용프로그램 RootFrame에 목록이 추가됩니다. RootFrame 개체는 응용프로그램과 연결된 PhoneApplicationFrame입니다. 각 응용프로그램에 RootFrame 하나가 있습니다. 응용프로그램의 각 페이지 또는 PhoneApplicationPage 인스턴스는 사용자가 해당 페이지를 탐색할 때 탐색 프레임워크에서 이 프레임의 Content로 설정됩니다. 새 Windows Phone 응용프로그램을 만들 때 가져오는 RootFrame 개체의 기본 템플릿은 응용프로그램 페이지 및 시스템 트레이, 응용프로그램 모음 등 응용프로그램의 기타 요소를 표시합니다. 이 예제에서는 응용프로그램 페이지를 표시하지만 화면의 맨 아래에 후방 스택을 목록으로 표시할 공간을 남겨 두는 템플릿을 만듭니다. 페이지 간에 탐색할 때 이 중앙 집중식 목록은 응용프로그램의 탐색 기록 또는 후방 스택의 현재 상태를 반영하도록 업데이트됩니다. Windows Phone 응용프로그램의 구조에 대한 자세한 내용은 Windows Phone의 프레임 및 페이지 탐색 개요를 참조하십시오.

후방 스택을 시각화하려면

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

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

  3. Windows Phone 응용프로그램 템플릿을 선택합니다. 이름에 선택한 이름을 입력합니다.

  4. 확인을 클릭합니다. Windows Phone 플랫폼 선택 창이 나타납니다. 대상 Windows Phone OS 버전으로 Windows Phone OS 7.1을 선택합니다.

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

  6. 다음 단계에서는 응용프로그램의 RootFrame이 후방 스택을 시각화하는 데 사용하는 템플릿을 변경합니다. 이렇게 하려면 RootFrame에 대한 사용자 지정 ControlTemplateListBox를 넣습니다. 이 새 템플릿은 App.xaml 페이지의 Application.Resources 섹션에서 정의됩니다. 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 코드 숨김 파일에서 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 페이지의 코드 숨김 파일에서 생성자의 InitializePhoneApplication 호출 바로 뒤에 다음 코드 줄을 추가합니다. 먼저 RootFrame의 템플릿이 6단계에서 정의한 템플릿 이름인 NewFrameTemplate으로 설정됩니다. 템플릿에 있는 버튼의 이벤트 처리기도 여기서 연결됩니다. 최종적으로, 기록을 업데이트하기 위해 RootFrameNavigated 이벤트에 대해 대리자가 정의됩니다.

    
    // Set the template for the RootFrame to the new template we 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 페이지의 코드 숨김 파일에 다음 메서드를 추가합니다. UpdateHistory는 탐색 후방 스택에 대한 UI를 새로 고칩니다. 이 메서드는 응용프로그램에서 탐색이 수행될 때마다 발생하는 Navigated 이벤트가 RootFrame에서 발생할 때 호출됩니다. 이 메서드는 BackStack 속성의 모든 항목을 반복하고 ListBox에 추가합니다. 또한 현재 페이지의 URI를 표시합니다. 탐색 후방 스택에 항목이 있는 경우 Pop Last 버튼을 사용할 수 있습니다. HistoryList_SelectionChanged는 탐색 기록 목록의 항목이 선택되었는지 여부에 따라 Pop To Selected 버튼을 사용하거나 사용하지 않도록 설정합니다.

    
    /// <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.Reverse())
       {
          historyListBox.Items.Insert(0, 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 페이지에 대한 코드 숨김 파일에 다음 메서드를 추가합니다. 이 메서드는 Pop Last 버튼의 클릭 이벤트를 처리합니다. 사용자가 이 버튼을 탭하면 후방 스택에 마지막으로 추가한 항목이 제거됩니다. 이 메서드는 RootFrameRemoveBackEntry 메서드를 사용합니다. 항목이 제거된 후 UpdateHistory를 호출하여 후방 스택 항목 목록을 새로 고칩니다.

    
    /// <summary>
    /// Remove the last entry from the back stack.
    /// </summary>
    private void PopLastButton_Click(object sender, RoutedEventArgs e)
    {
        // If RemoveBackEntry is called on an empty back stack, an InvalidOperationException is thrown.
        // Check to make sure the back stack has entries before calling RemoveBackEntry.
        if (RootFrame.BackStack.Count() > 0)
            RootFrame.RemoveBackEntry();
    
        // Refresh the history list since the back stack has been modified.
        UpdateHistory();
    }
    
    
  11. App.xaml 페이지에 대한 코드 숨김 파일에 다음 메서드를 추가합니다. 사용자가 후방 스택에서 항목을 선택하고 Pop To Selected를 탭하면 선택한 항목까지 모든 항목이 후방 스택에서 제거됩니다. 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" 
                  Click="PinToStartCheckBox_Click"/>
        <Button x:Name="btnNext" Content="Next Page"  Height="80" VerticalAlignment="Bottom" 
                Click="btnNext_Click"/>
    </Grid>
    
    
  3. 이 페이지의 코드 숨김 파일에서 다음 using 지시문을 추가합니다.

    using Microsoft.Phone.Shell;
    
    
  4. 클래스의 맨 위에 다음 변수 선언을 추가합니다.

    
    // 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() 뒤에 다음 코드 줄을 추가합니다.

    
    // Set the application title - use the same application title on each page.
    ApplicationTitle.Text = "SDK BACKSTACK SAMPLE";
    
    // Set a unique page title. In this example, we 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";
    
    
    참고참고:

    이 절차의 단계는 추가한 각 페이지에 대해 반복되므로 생성된 각 페이지에 대해 PageTitle.TextnextPage를 업데이트해야 합니다.

  6. OnNavigatedTo 이벤트 처리기를 재정의할 다음 메서드를 추가합니다. 이 페이지에 nextPage 변수가 설정되어 있는 경우 여기서 Next Page 버튼이 표시됩니다. 시작 화면에 고정 확인란은 이 페이지의 타일이 있는지 여부에 따라 설정됩니다.

    
    protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
    {
       base.OnNavigatedTo(e);
       
       // Show the Next button, if we 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. 페이지의 Next Page 버튼에 대한 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 we have defined a next page.
         if (!String.IsNullOrWhiteSpace(nextPage))
         {
            this.NavigationService.Navigate(new Uri(nextPage, UriKind.Relative));
         }
    }
    
    
  8. 페이지의 시작 화면에 고정 확인란에 대한 Click 이벤트를 처리할 다음 메서드를 추가합니다. 이 메서드는 토글처럼 작동합니다. 이 페이지의 타일이 시작 화면에 이미 있는 경우 타일이 제거됩니다. 이 페이지의 타일이 시작 화면에 없는 경우 타일이 추가됩니다. 타일에 대한 자세한 내용은 Windows Phone의 타일을 참조하십시오.

    
    /// <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

    page 3이 응용프로그램의 마지막 페이지이며 page 3에서 전방 탐색하기를 원하지 않으므로 다음 페이지에 대해 String.Empty를 지정합니다.

이 단원을 완료하면 솔루션 탐색기에서 해당 솔루션이 다음 그림과 같이 표시됩니다. 응용프로그램에는 네 페이지가 있고, 이러한 페이지의 전방 탐색은 MainPage.xaml -> Page1.xaml -> Page2.xaml -> Page3.xaml 순으로 이루어집니다.

BackStack의 솔루션 뷰 방법

이 단원에서는 이 항목에서 생성한 응용프로그램을 실행하는 방법에 대해 설명합니다.

응용프로그램을 테스트하려면

  1. 디버그 | 디버깅 시작 메뉴 명령을 선택하여 응용프로그램을 실행합니다.

  2. 응용프로그램이 시작되고 MainPage.xaml 페이지가 표시됩니다. 다음 그림을 참조하십시오. 화면의 아래쪽 절반에는 후방 스택 시각화가 표시됩니다. 지금은 탐색 기록에 아무 항목도 없으므로 목록이 비어 있습니다. 현재 페이지는 [/MainPage.xaml]로 표시됩니다.

    BackStack 초기 UI
  3. Next Page 버튼을 탭합니다. 페이지가 page 1로 변경되고 이제 후방 스택 목록에 /MainPage.xaml이 포함됩니다.

  4. Next Page 버튼을 다시 탭합니다. 현재 페이지는 page 2입니다. 이제 후방 스택에 /Page1.xaml/MainPage.xaml이라는 두 항목이 있습니다. 스택이므로 최신 항목이 맨 위에 표시되고 가장 오래된 항목이 맨 아래에 표시됩니다. 다음 그림을 참조하십시오.

    BackStack의 중간 UI 방법
  5. Pop Last 버튼을 탭합니다. /Page1.xaml 항목이 후방 스택 목록에서 제거됩니다.

  6. 단말기에서 하드웨어 뒤로 버튼을 탭합니다. main page 페이지가 표시되고 후방 스택은 비어 있습니다. 이는 앞의 단계에서 /Page1.xaml을 후방 스택에서 제거하여 후방 탐색을 Page 2 -> Page1 -> MainPage에서 Page2 -> MainPage로 변경했기 때문입니다.

  7. main page에서 Next Page 버튼을 탭합니다. page 1 페이지가 표시됩니다. 후방 스택에 /MainPage.xaml 항목만 있습니다.

  8. page 1에서 Next Page 버튼을 탭합니다. 이제 page 2 페이지가 표시됩니다. 후방 스택에 /Page1.xaml/MainPage.xaml이라는 두 항목이 있습니다.

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

  10. 단말기의 시작 화면에 page 2라는 타일이 생성됩니다.

  11. 앞의 단계에서 만든 타일을 탭합니다. 응용프로그램이 시작되고 page 2가 표시됩니다. 또한 후방 스택이 비어 있습니다. 단말기에서 뒤로 버튼을 탭하면 응용프로그램이 종료됩니다. 이 상태의 예는 다음 그림을 참조하십시오. page 2가 단말기의 시작 화면에 고정되었습니다. 타일을 탭하고 응용프로그램이 시작되었으며 Page2가 표시됩니다. 이 그림에 표시된 후방 스택은 비어 있습니다.

    타일에서 탐색할 때 BackStack의 상태

표시: