天天看點

第十五章:互動式界面(十四)

TimePicker(或者是TimeSpanPicker?)

TimePicker比DatePicker稍微簡單一些。 它僅定義時間和格式屬性,并且不包含訓示新標明時間值的事件。 如果需要通知,可以為PropertyChanged事件安裝處理程式。

盡管TimePicker通過使用DateTime的ToString方法顯示所選時間,但Time屬性實際上是TimeSpan類型,表示自午夜以來的持續時間。

SetTimer程式包含一個TimePicker。 該程式假定從TimePicker中挑選的時間在接下來的24小時内,然後在該時間到來時通知您。 XAML檔案在頁面上放置TimePicker,Switch和Entry。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SetTimer.SetTimerPage"
             Padding="50">
    <StackLayout Spacing="20"
                 VerticalOptions="Center">
        <TimePicker x:Name="timePicker"
                    PropertyChanged="OnTimePickerPropertyChanged" />
 
        <Switch x:Name="switch"
                HorizontalOptions="End"
                Toggled="OnSwitchToggled" />
 
        <Entry x:Name="entry"
               Text="Sample Timer"
               Placeholder="label" />
    </StackLayout>
</ContentPage>           

TimePicker附加了一個PropertyChanged事件處理程式。 Entry允許您提醒自己計時器應該提醒您什麼。

點選TimePicker時,會彈出特定于平台的面闆。 與DatePicker一樣,Android和Windows 10 Mobile面闆隐藏了下面的大部分螢幕,但您可以在iPhone螢幕的中心看到SetTimer使用者界面:

第十五章:互動式界面(十四)

在實時計時器程式中 - 一個實際有用的計時器程式,而不僅僅是TimePicker視圖的示範 - 代碼隐藏檔案将通路特定于平台的通知接口,以便即使程式不再存在,也會通知使用者 活性。

SetTimer不會這樣做。 SetTimer使用特定于平台的警報框,程式可以通過調用由Page定義并由ContentPage繼承的DisplayAlert方法來調用該警報框。

代碼隐藏檔案底部的SetTriggerTime方法(如下所示)根據DateTime.Today計算計時器時間 - 一個傳回DateTime的屬性,訓示目前日期,但時間為午夜 - 并且TimeSpan從TimePicker。 如果那個時間今天已經過去了,那麼它将被假定為明天。

但是,定時器設定為一秒鐘。 計時器處理程式每秒檢查一次Switch是否打開以及目前時間是否大于或等于計時器時間:

public partial class SetTimerPage : ContentPage
{
    DateTime triggerTime;
    public SetTimerPage()
    {
        InitializeComponent();
        Device.StartTimer(TimeSpan.FromSeconds(1), OnTimerTick);
    }
    bool OnTimerTick()
    {
        if (@switch.IsToggled && DateTime.Now >= triggerTime)
        {
            @switch.IsToggled = false;
            DisplayAlert("Timer Alert",
                         "The '" + entry.Text + "' timer has elapsed", 
                         "OK");
        }
        return true;
    }
    void OnTimePickerPropertyChanged(object obj, PropertyChangedEventArgs args)
    {
        if (args.PropertyName == "Time")
        {
            SetTriggerTime();
        }
    }
    void OnSwitchToggled(object obj, ToggledEventArgs args)
    {
        SetTriggerTime();
    }
    void SetTriggerTime()
    {
        if (@switch.IsToggled)
        {
            triggerTime = DateTime.Today + timePicker.Time;
            if (triggerTime < DateTime.Now)
            {
                triggerTime += TimeSpan.FromDays(1);
            }
        }
    }
}           

當計時器時間到來時,程式使用DisplayAlert向使用者發出提醒信号。 以下是此警報在三個平台上的顯示方式:

第十五章:互動式界面(十四)

在本章中,您已經看到了定義事件的互動式視圖,并且您已經看到了實作事件處理程式的應用程式。 這些事件處理程式通常通路視圖的屬性并設定另一個視圖的屬性。

在下一章中,您将看到如何消除這些事件處理程式以及如何在代碼或标記中連結不同視圖的屬性。 這是資料綁定的令人興奮的功能。

繼續閱讀