前面兩篇修練，一篇是【Timer 撰寫簡單的時鐘範例】，另一篇是【指定不同的鍵盤模式輸入】。這一篇就來做個範例做個練習。我們來做個【生理時鐘大挑戰】的小小遊戲作為練習。內容相當簡單，設定要挑戰的秒數。按下開始後，由自己內心默數，默數時間到了，按下停止。來看看實際用掉的秒數與設定的秒數差異到底有多少。以下就來做這個示範。
緣起
前面兩篇修練，一篇是【Timer 撰寫簡單的時鐘範例】，另一篇是【指定不同的鍵盤模式輸入】。這一篇就來做個範例做個練習。我們來做個【生理時鐘大挑戰】的小小遊戲作為練習。內容相當簡單，設定要挑戰的秒數。按下開始後，由自己內心默數，默數時間到了，按下停止。來看看實際用掉的秒數與設定的秒數差異到底有多少。以下就來做這個示範。
畫面的安排
剛開始的第一個設計，先簡單化的處理，未來可以考慮把一些設定的項目、說明的描述等，改到另外設定的頁面去，讓畫面可以更簡潔(這個部份表過不提)。
秒數設定：用來設定要默數的秒數。利用上一篇的鍵盤設定，可以設定輸入鍵盤時，用Number來方便手機操作時可以快速輸入數字。
提示開關：剛開始默數練習時，可以把提示開關打開，這樣可以練習了解秒數的頻率，幫助我們真正默數時可以有大概的感覺。這會設定提示的抬頭、提示的秒數這兩個控制項的顯示與隱藏。
按鈕：他會有開始→停止→再試一次三種狀態的輪替。
結果：會顯示默數的秒數，以及與您設定的秒數差異。
相關的畫面程式碼如下：
<!--TitlePanel 包含應用程式的名稱和頁面標題-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="生理時鐘大挑戰" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="生理時鐘" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - 其他內容置於此-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Height="49" HorizontalAlignment="Left" Margin="10,10,0,0" Name="tbRuleTi" Text="規則說明：" VerticalAlignment="Top" FontSize="32" />
<TextBlock Height="147" HorizontalAlignment="Left" Margin="35,71,0,0" Name="tbRule" Text="設定預計要默數的秒數，按下開始後，心裡默署指定的秒數，等時間到的時候，按下停止。系統會顯示您真正用的時間，以及與您所設定的時間誤差多少。" VerticalAlignment="Top" Width="392" TextWrapping="Wrap" />
<TextBlock Height="44" HorizontalAlignment="Left" Margin="12,195,0,0" Name="tbSecSetTi" Text="秒數設定：" VerticalAlignment="Top" FontSize="26" />
<TextBox HorizontalAlignment="Left" Name="txtSeconds" Text="10" VerticalAlignment="Top" Margin="148,179,0,0" Width="79" TextAlignment="Right" >
<TextBox.InputScope>
<InputScope>
<InputScopeName NameValue="Number" />
</InputScope>
</TextBox.InputScope>
</TextBox>
<toolkit:ToggleSwitch Header="" Height="103" HorizontalAlignment="Left" Margin="0,243,0,0" Name="ToggleSwitch1" VerticalAlignment="Top" Width="307" FontSize="26" Content="提示開關：關" />
<TextBlock FontSize="26" Height="44" HorizontalAlignment="Left" Margin="279,269,0,0" Name="TextBlock4" Text="開" VerticalAlignment="Top" />
<Button Content="開始" Height="129" HorizontalAlignment="Left" Margin="7,311,0,0" Name="btn" VerticalAlignment="Top" Width="438" />
<TextBlock Height="50" HorizontalAlignment="Left" Margin="12,436,0,0" Name="tbTiDemo" Text="提示：" VerticalAlignment="Top" FontSize="26" Visibility="Collapsed" />
<TextBlock Height="47" HorizontalAlignment="Center" Margin="159,436,163,0" Name="tbDemo" Text="00.0" VerticalAlignment="Top" Visibility="Collapsed" TextAlignment="Center" FontSize="26" Width="134" />
<TextBlock Height="50" HorizontalAlignment="Left" Margin="12,492,0,0" Name="tbTiRlt" Text="結果：" VerticalAlignment="Top" FontSize="26" Visibility="Collapsed" />
<TextBlock FontSize="26" Height="50" HorizontalAlignment="Left" Margin="87,492,0,0" Name="tbRlt" Text="00.0" TextAlignment="Center" VerticalAlignment="Top" Visibility="Collapsed" Width="358" />
</Grid>相關程式碼：
相關的程式碼小喵貼在下面，小喵盡量的註解了。程式算簡單，按鈕來啟動與停止Timer的Trick。
當啟動的時候記錄啟動的時間；當Trick的時候，就已Trick的時間減啟動時間。得到經過的時間。
相關程式請參考如下：
Imports System.Windows.Threading
Imports Microsoft.Phone.Controls
Partial Public Class MainPage
Inherits PhoneApplicationPage
Private WithEvents tmr As New DispatcherTimer
Private StartTime As DateTime '用以記錄開始的時間
Private RunType As String = "Init" '用以記錄執行的型態
Private ShowTime As String = "" '用以記錄要顯示的運行的秒數
' 建構函式
Public Sub New()
InitializeComponent()
End Sub
Private Sub txtSeconds_GotFocus(sender As Object, e As System.Windows.RoutedEventArgs) Handles txtSeconds.GotFocus
'當焦點在Textbox的時候，讓裡面的內容選取起來，方便使用者簡易操作，可以直接輸入
Me.txtSeconds.SelectAll()
End Sub
'自己撰寫一個OnTimerTick的Sub，並且設定Hadles tmr的Tick事件
Private Sub OnTimerTick(ByVal sender As Object, ByVal args As EventArgs) Handles tmr.Tick
'當Timer Tick的時候，計算目前的時間與初始時間的差距
Dim UseTime As TimeSpan = DateTime.Now - StartTime
'透過ToString, format取得要顯示的內容
ShowTime = UseTime.ToString("ss\.f")
If Me.tbDemo.Visibility = Windows.Visibility.Visible Then
'如果有顯示示範，就將計算後的秒數差顯示
Me.tbDemo.Text = ShowTime
End If
End Sub
Private Sub ToggleSwitch1_Click(sender As Object, e As System.Windows.RoutedEventArgs) Handles ToggleSwitch1.Click
If Me.ToggleSwitch1.IsChecked = True Then
'顯示示範
Me.tbDemo.Visibility = Windows.Visibility.Visible
Me.tbTiDemo.Visibility = Windows.Visibility.Visible
Else
'隱藏示範
Me.tbDemo.Visibility = Windows.Visibility.Collapsed
Me.tbTiDemo.Visibility = Windows.Visibility.Collapsed
End If
End Sub
Private Sub MainPage_Loaded(sender As Object, e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
'設定每經過0.1秒觸發一次Tick
tmr.Interval = TimeSpan.FromSeconds(0.1)
End Sub
Private Sub btn_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles btn.Click
'判斷目前的狀態，進入下一個狀態(初始→執行→停止→初始)
Select Case RunType
Case "Init"
'**從【初始狀態】→進入【運行狀態】
StartTime = DateTime.Now
tmr.Start()
Me.btn.Content = "停止"
RunType = "Run"
ShowTime = ""
Case "Run"
'**從【運行狀態】→進入【停止狀態】
tmr.Stop()
Me.btn.Content = "再試一次"
RunType = "Stop"
Me.tbTiRlt.Visibility = Windows.Visibility.Visible
Me.tbRlt.Visibility = Windows.Visibility.Visible
Dim DiffCnt As Double = CDbl(ShowTime) - CInt(Me.txtSeconds.Text)
Me.tbRlt.Text = ShowTime & "," & "您的差異值為【" & DiffCnt.ToString("#0.#") & "】"
Case "Stop"
'**從【停止狀態】→進入【初始狀態】
Me.tbDemo.Text = "00.0"
ShowTime = ""
Me.tbTiRlt.Visibility = Windows.Visibility.Collapsed
Me.tbRlt.Text = "00.0"
Me.tbRlt.Visibility = Windows.Visibility.Collapsed
Me.btn.Content = "開始"
RunType = "Init"
End Select
End Sub
End Class
總結
這個小小的遊戲算是牛刀小試，程式的邏輯也相當簡單，剛好作為上兩篇【Timer 撰寫簡單的時鐘範例】與【指定不同的鍵盤模式輸入】的練習。後續再來將依些設定、畫面說明放到另外一頁，讓畫面可以更簡化。分享給大家。
^_^
以下是簽名：
- 歡迎轉貼本站的文章，不過請在貼文主旨上加上【轉貼】，並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】，感恩大家的配合。
- 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫，如果您需要C#的Code，也許您可以試著用線上的工具進行轉換，這裡提供幾個參考
| Microsoft MVP Visual Studio and Development Technologies (2005~2019/6) | topcat Blog:http://www.dotblogs.com.tw/topcat |