在 Xamarin.Forms 當中直接製作Timer …

1. 前言

• Xamarin.Forms 確實在製作跨平台 App 有很大的優勢在，但是常常會遇到一些因為各平台差異而無法直接在 Xamarin.Forms 當中直接處理的問題，所以必須常常使用Customer Renderer 或是 DependencyService 來處理各平台的問題。而本篇文章要來討論一個本來可能需要用 DependencyService來處理的 Timer 問題，透過直接讓Xamarin.Forms 自己就能處理的小技巧。

2. 環境準備

• Visual Studio 2015/2017

• Visual Studio for Mac

3. 本文

前置準備

• Xamarin.Forms 專案準備:

開始之前請在Visual Studio當中先建立一個Xamairn.Forms的專案，並且選擇使用可攜式類別庫。

並且在該專案當中所預設建立的MainPage.xaml 當中先設計一下畫面，利用StackLayout來包覆兩個Button跟原本應該就預設存在的Label(紅色實線框，上方的紅色虛線框是為了iOS的畫面呈現時不要跟status bar重疊到)，並且幫這兩個Button設定文字顯示以及設計 Clicked事件，Label設定文字大小跟名稱。




Preview的結果如下:

在Xamarin.Forms 當中設計Timer

• 接著在Xamarin.Forms 的App1(可攜式)的專案當中，建立一個新的類別。


並取名叫做”MyTimer”，完成後就新增。

• 建立完成後我們要開始來針對MyTimer這個類別設計我們的Timer程式。其實能直接在Xamarin.Forms當中設計Timer，主要還是仰賴Xamarin.Forms.Device類別底下有提供一個StartTimer的方法。

(Ref: https://developer.xamarin.com/api/member/Xamarin.Forms.Device.StartTimer/p/System.TimeSpan/System.Func%7BSystem.Boolean%7D/ )。

但是Xamarin.Forms.Device類別底下提供的這個StartTimer方法，只能單純的設定interval跟一個Func，沒辦法讓我們隨意的開關，因此在透過一些設計來達成我們想要隨意開關的Timer。

• 首先，我們現在剛剛所建立的MyTimer 類別當中，設計三個欄位(紅色實線框所示)以及建立一個建構方法(紅色虛線框所示)。




並透過建構方法的參數DI相關物件給欄位。

• 再來接著在MyTimer的這個類別中設計兩個公開方法 Start 與 Stop。

• 到Start 這個方法當中，撰寫以下紅色框中的程式碼:

• 到Stop 這個方法當中，撰寫以下紅色框中的程式碼:

在Xamarin.Forms 當中使用Timer

• 接著我們打開MainPage.xaml.cs，如果沒意外應該會如下圖的呈現。

• 接著在MainPage.xaml.cs當中建立一個 _myTimer與 _count的欄位，並且在MainPage建構方法當中設定MyTimer的物件。在這邊我們設定每秒鐘執行在MyTimer的第二個參數所注入的Action 一次，讓DisplayLabel的文字會數數字。

• 而按鈕的事件程式碼就相對簡單，只要呼叫 _myTimer 的Start跟Stop的方法即可。

• 接著我們選擇任一個平台(Android、iOS、UWP)來來執行看看吧!

點下 StartTimer後，Timer就會開始計數，DisplayLabel的文字就會根據Timer計數的數字改變，直到點選StopTimer。


Android:




iOS:




UWP:

以上就是在Xamairn.Forms上直接做到Timer的效果。

4. 參考來源

• Xamarin.Forms.Device.StartTimer Method:
https://developer.xamarin.com/api/member/Xamarin.Forms.Device.StartTimer/p/System.TimeSpan/System.Func%7BSystem.Boolean%7D/

• Xamarin Forms Timer:
https://xamarinhelp.com/xamarin-forms-timer/

• How can I stop Device.StartTimer?:
https://forums.xamarin.com/discussion/49492/how-can-i-stop-device-starttimer