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

简介:

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用户界面:
201809202103590406
在实时计时器程序中 - 一个实际有用的计时器程序,而不仅仅是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向用户发出提醒信号。 以下是此警报在三个平台上的显示方式:
201809202108270407
在本章中,您已经看到了定义事件的交互式视图,并且您已经看到了实现事件处理程序的应用程序。 这些事件处理程序通常访问视图的属性并设置另一个视图的属性。
在下一章中,您将看到如何消除这些事件处理程序以及如何在代码或标记中链接不同视图的属性。 这是数据绑定的令人兴奋的功能。

目录
相关文章
|
Python
零基础学Python【二十三、图形化界面设计 】(基础一篇全,欢迎认领)(十二)
零基础学Python【二十三、图形化界面设计 】(基础一篇全,欢迎认领)(十二)
109 0
零基础学Python【二十三、图形化界面设计 】(基础一篇全,欢迎认领)(十二)
|
搜索推荐 Python
零基础学Python【二十三、图形化界面设计 】(基础一篇全,欢迎认领)(十一)
零基础学Python【二十三、图形化界面设计 】(基础一篇全,欢迎认领)(十一)
156 0
零基础学Python【二十三、图形化界面设计 】(基础一篇全,欢迎认领)(十一)
|
数据可视化 Python 容器
零基础学Python【二十三、图形化界面设计 】(基础一篇全,欢迎认领)(二)
零基础学Python【二十三、图形化界面设计 】(基础一篇全,欢迎认领)(二)
147 0
零基础学Python【二十三、图形化界面设计 】(基础一篇全,欢迎认领)(二)
|
Python 容器
零基础学Python【二十三、图形化界面设计 】(基础一篇全,欢迎认领)(六)
零基础学Python【二十三、图形化界面设计 】(基础一篇全,欢迎认领)(六)
101 0
零基础学Python【二十三、图形化界面设计 】(基础一篇全,欢迎认领)(六)
|
Python 容器
零基础学Python【二十三、图形化界面设计 】(基础一篇全,欢迎认领)(三)
零基础学Python【二十三、图形化界面设计 】(基础一篇全,欢迎认领)(三)
134 0
零基础学Python【二十三、图形化界面设计 】(基础一篇全,欢迎认领)(三)
|
JavaScript Android开发 索引
|
JavaScript Android开发 iOS开发
|
JavaScript Android开发 Windows