Xamarin.Forms 的頁面事件

了解更多關於 [Xamarin.Android] 的使用方式

了解更多關於 [Xamarin.iOS] 的使用方式

了解更多關於 [Xamarin.Forms] 的使用方式

了解更多關於 [Hello, Android：快速入門] 的使用方式

了解更多關於 [Hello, iOS – 快速入門] 的使用方式

了解更多關於 [Xamarin.Forms 快速入門] 的使用方式

在這份筆記中，將要來測試與分析頁面事件的呼叫順序；在 Xamarin.Forms 應用程式中，只要繼承了Page 類別的頁面，都會擁有這兩個事件可以使用：

1. OnAppearing()
   您可以在頁面內的 code-behind 重新覆寫這個事件，當 Xamarin.Forms 頁面變成可見的時候，這個事件將會被呼叫。
2. OnDisappearing()
   您可以在頁面內的 code-behind 重新覆寫這個事件，當 Xamarin.Forms 頁面變成不可見的時候，這個事件將會被呼叫。

因此，透過一個簡單的範例專案，在這個專案內，將會有兩個頁面，一個是 主頁面，另一個是 Page1頁面；這兩個頁面都有一個按鈕，前者頁面的按鈕按下之後，會切換到 Page1頁面 頁面，而後者頁面的按鈕按下之後，將會回到 主頁面；實際執行畫面如下圖所示。

  ALM無導航

下面螢幕截圖，是在 iOS 系統內的執行情況

 

而每個頁面的 code-behind 中，將會有底下的程式碼；您將會看到，當要顯示這個頁面的時候，將會寫入訊息到除錯視窗內，而當不要再顯示這個頁面的時候，也會寫入訊息到除錯視窗內。

        protected override void OnAppearing()
        {
            Debug.WriteLine($"{this.Title} 進入到 OnAppearing");
            base.OnAppearing();
        }

        protected override void OnDisappearing()
        {
            Debug.WriteLine($"{this.Title} 進入到 OnDisappearing");
            base.OnDisappearing();
        }

不過，若您使用了 Prism 設計模式工具來開發 Xamarin.Forms 應用程式，除了在每個頁面的 code-behind 會有上述覆寫程式碼，在每個頁面相對應的檢視模型(ViewModel)內，也會實作 INavigationAware ˋ頁面的兩個方法：

1. OnNavigatedFrom
   當進行頁面導航時候，需要離開這個頁面 (navigated away from)，此時，這個方法將會被呼叫
2. OnNavigatedTo
   當進行頁面導航時候，需要進入這個頁面 (navigated to)，此時，這個方法將會被呼叫

因此，使用 Prism 設計模式工具開發的專案，當在進行頁面導航的時候，每個頁面將會有兩個事件會被呼叫到：

Page1 導航到 Page2

Page1 內的 OnDisappearing & OnNavigatedFrom 將會被呼叫

Page2 內的 OnAppearing & OnNavigatedTo 將會被呼叫

另外有一點特別要提到的是，當您採用了 Prism 設計模式工具，若您的進入點頁面是 ContentPage，則，一樣可以透過 Prism 來進行導航，如下圖所示。

 

所以，在 Prism 設計模式的專案內，將會進行兩個模式的測試：

1. 進入點的頁面採用 ContentPage (請修改核心PCL 內的 App.xaml.cs 檔案內的 OnInitialized 方法)
   NavigationService.NavigateAsync("MainPage?title=Hello%20from%20Xamarin.Forms");
2. 進入點的頁面採用 NavigationPage (請修改核心PCL 內的 App.xaml.cs 檔案內的 OnInitialized 方法)
   NavigationService.NavigateAsync("MainNavigationPage/MainPage?title=Hello%20from%20Xamarin.Forms");

這兩個測試頁面事件的範例專案，可以底下網址取得

• XFALM
  https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFALM
• XFPrismALM (有使用 Prism)
  https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFPrismALM

實際執行結果

Xamarin.Forms 作法

底下是使用 XFALM 專案在 Android / iOS 模擬器上跑的結果

Android	iOS
[0:] 主頁面 進入到 OnAppearing	[0:] 主頁面 進入到 OnAppearing
[0:] 主頁面 進入到 OnDisappearing	[0:] 主頁面 進入到 OnDisappearing
[0:] Page1頁面 進入到 OnAppearing	[0:] Page1頁面 進入到 OnAppearing
[0:] Page1頁面 進入到 OnDisappearing	[0:] Page1頁面 進入到 OnDisappearing
[0:] 主頁面 進入到 OnAppearing	[0:] 主頁面 進入到 OnAppearing

Prism 作法 - 使用 ContentPage

底下是使用 XFPrismALM 專案在 Android / iOS 模擬器上跑的結果

Android	iOS
[0:] 主頁面 進入到 OnNavigatedTo	[0:] 主頁面 進入到 OnNavigatedTo
[0:] 主頁面 進入到 OnAppearing	[0:] 主頁面 進入到 OnAppearing
[0:] 主頁面 進入到 OnNavigatedFrom	[0:] 主頁面 進入到 OnNavigatedFrom
[0:] 主頁面 進入到 OnDisappearing	[0:] Page1頁面 進入到 OnAppearing
[0:] Page1頁面 進入到 OnAppearing	[0:] 主頁面 進入到 OnDisappearing
[0:] Page1頁面 進入到 OnNavigatedTo	[0:] Page1頁面 進入到 OnNavigatedTo
[0:] Page1頁面 進入到 OnNavigatedFrom	[0:] Page1頁面 進入到 OnNavigatedFrom
[0:] Page1頁面 進入到 OnDisappearing	[0:] 主頁面 進入到 OnAppearing
[0:] 主頁面 進入到 OnNavigatedTo	[0:] Page1頁面 進入到 OnDisappearing
[0:] 主頁面 進入到 OnAppearing	[0:] 主頁面 進入到 OnNavigatedTo

Prism 作法 - 使用 NavigationPage

Android	iOS
[0:] 主頁面 進入到 OnNavigatedTo	[0:] 主頁面 進入到 OnNavigatedTo
[0:] 主頁面 進入到 OnAppearing	[0:] 主頁面 進入到 OnAppearing
[0:] 主頁面 進入到 OnNavigatedFrom	[0:] 主頁面 進入到 OnNavigatedFrom
[0:] 主頁面 進入到 OnDisappearing	[0:] 主頁面 進入到 OnDisappearing
[0:] Page1頁面 進入到 OnAppearing	[0:] Page1頁面 進入到 OnAppearing
[0:] Page1頁面 進入到 OnNavigatedTo	[0:] Page1頁面 進入到 OnNavigatedTo
[0:] Page1頁面 進入到 OnNavigatedFrom	[0:] Page1頁面 進入到 OnNavigatedFrom
[0:] Page1頁面 進入到 OnDisappearing	[0:] Page1頁面 進入到 OnDisappearing
[0:] 主頁面 進入到 OnAppearing	[0:] 主頁面 進入到 OnAppearing
[0:] 主頁面 進入到 OnNavigatedTo	[0:] 主頁面 進入到 OnNavigatedTo