Windows Phone 页面跳转事件调用顺序

Introduction

Windows Phone 页面跳转过程的流程到底是怎样？很多人只是知道NavigateTo, CanGoBack 和GoBack。

网上的文档一般也只是介绍NavigationService.Backstack 中页面进栈个退栈的过程。

但是页面构造函数，OnNavigatedFrom，OnNavigatedTo ,OnBackKeyPress，OnRemovedFromJournal,析构函数的效用顺序如何

并没有详细介绍。

这篇博文做了一个简单的实验，介绍一下整个页面创建跳转销毁流程：

环境：Windows Phone OS7.1

How To 

1.创建WP应用，包含MainPage，Page2和Page3。MainPage有一个按钮，点击跳转到Page2；Page2有一个按钮点击跳转Page3

2..三个Page都继承BasePage，在BasePage中重载

构造函数，OnNavigatedFrom，OnNavigatedTo ,OnBackKeyPress，OnRemovedFromJournal,析构函数，

输出相应的Debug提示

3.操作流程：进入MianPage，点击跳转到Page2,点击跳转到Page3；按物理返回到Page2，按物理返回到MainPage,按物理返回退出应用

Using The Code

public class BasePage : PhoneApplicationPage
    {
        protected string content = string.Empty;
        

        public BasePage(string pageName)
        {
            content = pageName;
            Debug.WriteLine( "Ctor               : "+content );
            
        }

        protected override void OnBackKeyPress(CancelEventArgs e)
        {
            base.OnBackKeyPress(e);
            Debug.WriteLine("OnBackKeyPress      : " + content);
            
        }

        protected override void OnRemovedFromJournal(JournalEntryRemovedEventArgs e)
        {
            base.OnRemovedFromJournal(e);
            Debug.WriteLine("OnRemovedFromJournal   : " + content);
        }

        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            base.OnNavigatedFrom(e);
            Debug.WriteLine("OnNavigatedFrom   : " + content);
            
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);
            Debug.WriteLine("OnNavigatedTo     : " + content);
            
        }

         ~BasePage()
        {

            Debug.WriteLine("On Dispose        : " + content);

        }

    }

以MainPage为例：

C# 

 public partial class MainPage : BasePage
    {
        // Constructor
        public MainPage()
            : base("MainPage")
        {
            InitializeComponent();
        }
    }

XAML
 

<!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Main" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        	<Button Content="Button" HorizontalAlignment="Left" Margin="183,166,0,0" VerticalAlignment="Top">
        		<i:Interaction.Triggers>
        			<i:EventTrigger EventName="Click">
        				<ec:NavigateToPageAction TargetPage="/Page2.xaml"/>
        			</i:EventTrigger>
        		</i:Interaction.Triggers>
        	</Button></Grid>
    </Grid>

Result

开启应用

Ctor               : MainPage
OnNavigatedTo     : MainPage

跳转到page 2

Ctor               : Page2
OnNavigatedFrom   : MainPage
OnNavigatedTo     : Page2

跳转到page3

Ctor               : page3
OnNavigatedFrom   : Page2
OnNavigatedTo     : page3

退回去Page2

OnBackKeyPress      : page3
OnNavigatedFrom   : page3
OnNavigatedTo     : Page2
OnRemovedFromJournal   : page3

退回去Mainpage

OnBackKeyPress      : Page2
OnNavigatedFrom   : Page2
OnNavigatedTo     : MainPage
OnRemovedFromJournal   : Page2

退出应用

OnBackKeyPress      : MainPage
OnNavigatedFrom   : MainPage
OnRemovedFromJournal   : MainPage
On Dispose        : Page2
On Dispose        : page3
On Dispose        : MainPage

Summary

进入页面的顺序：构造函数，OnNavigatedTo   

返回上一个页面的顺序：OnBackKeyPress，OnNavigatedFrom ，（上一个Page）OnNavigatedTo, OnRemovedFromJournal 

程序结束时，全部页面GC。

当然这只是一个测试，仅供参考

PS：

WP页面的堆栈原则：

• Forward navigation always creates a new instance
• Pages that are removed from the back stack are released
• Pages on the back stack are always cached

上面三句话来自：WinRT: Navigation Cache (or Why Going Back to Previous Page Creates a new Instance of the Page?)