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

简介:

日期和时间选择

需要用户日期或时间的Xamarin.Forms应用程序可以使用DatePicker或TimePicker视图。
它们非常相似:两个视图只在类似于Entry视图的框中显示日期或时间。 点击视图会调用特定于平台的日期或时间选择器。 然后,用户选择(或拨入)新的日期或时间并发出完成信号。
DatePicker
DatePicker有三个DateTime类型的属性:

  • MimumDate,初始化为1900年1月1日
  • MaximumDate,初始化为2100年12月31日
  • 日期,初始化为DateTime.Today

只要MinimumDate在MaximumDate之前,程序就可以将这些属性设置为它想要的任何属性。 Date属性反映了用户的选择。
如果您想在XAML中设置这些属性,可以使用x:DateTime元素。 使用DateTime.Parse方法可接受的格式以及CultureInfo.InvariantCulture的第二个参数。 可能最简单的是短日期格式,即两位数的月份,两位数的日期和四位数的年份,用斜线分隔:

<DatePicker __ >
    <DatePicker.MinimumDate>
        03/01/2016
    </DatePicker.MinimumDate>
    <DatePicker.MaximumDate>
        10/31/2016
    </DatePicker.MaximumDate>
    <DatePicker.Date>
        04/24/2016
    </DatePicker.Date>
</DatePicker>

DatePicker使用常规ToString方法显示所选日期,但您可以将视图的Format属性设置为自定义.NET格式字符串。 初始值为“d” - 短格式。
这是来自名为DaysBetweenDates的程序的XAML文件,它允许您选择两个日期,然后计算它们之间的天数。 它包含两个标记为To和From的DatePicker视图:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DaysBetweenDates.DaysBetweenDatesPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness"
                    iOS="10, 30, 10, 0"
                    Android="10, 10, 10, 0"
                    WinPhone="10, 10, 10, 0" />
    </ContentPage.Padding>
    <StackLayout>
        <StackLayout.Resources>
            <ResourceDictionary>
                <Style TargetType="DatePicker">
                    <Setter Property="Format" Value="D" />
                    <Setter Property="VerticalOptions" Value="Center" />
                    <Setter Property="HorizontalOptions" Value="FillAndExpand" />
                </Style>
            </ResourceDictionary>
        </StackLayout.Resources>
        <!-- Underlined text header -->
        <StackLayout Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
                     VerticalOptions="CenterAndExpand"
                     HorizontalOptions="Center">
            <Label Text="Days between Dates"
                   FontSize="Large"
                   FontAttributes="Bold"
                   TextColor="Accent" />
            <BoxView Color="Accent"
                   HeightRequest="3" />
        </StackLayout>
        <StackLayout Orientation="Horizontal"
                     VerticalOptions="CenterAndExpand">
            <Label Text="From:"
                   VerticalOptions="Center" />
 
            <DatePicker x:Name="fromDatePicker"
                        DateSelected="OnDateSelected" />
        </StackLayout>
        <StackLayout Orientation="Horizontal"
                     VerticalOptions="CenterAndExpand">
            <Label Text=" To:"
                   VerticalOptions="Center" />
            <DatePicker x:Name="toDatePicker"
                        DateSelected="OnDateSelected" />
        </StackLayout>
        <Label x:Name="resultLabel"
               FontSize="Medium"
              HorizontalOptions="Center"
              VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

隐式样式将两个DatePicker视图的Format属性设置为“D”,这是longdate格式,包括星期和月份名称的文本日。 XAML文件使用两个水平StackLayout对象并排显示Label和DatePicker。
注意:如果使用长日期格式,则需要避免将DatePicker的HorizontalOptions属性设置为Start,Center或End。 如果将DatePicker放在水平StackLayout中(如在此程序中),请将HorizontalOptions设置为FillAndExpand。 否则,如果用户选择的文本字符串长于原始日期,则结果格式不正确。 DaysBetweenDates程序使用隐式样式为DatePicker提供FillAndExpand的HorizontalOptions值,以便它占据水平StackLayout的整个宽度,除了Label占用的内容。
当您点击其中一个DatePicker字段时,会出现特定于平台的面板。 在iOS上,它只占据屏幕的底部,但在Android和Windows 10 Mobile上,它几乎占据了屏幕:
2018_09_20_132105
注意iOS上的Done按钮,Android上的OK按钮和Windows Phone上的复选标记工具栏按钮。 所有这三个按钮都会关闭日期选择面板,并通过触发DateSelected事件返回到程序。 DaysBetweenDates代码隐藏文件中的事件处理程序访问两个DatePicker视图并计算两个日期之间的天数:

public partial class DaysBetweenDatesPage : ContentPage
{
    public DaysBetweenDatesPage()
    {
        InitializeComponent();
        // Initialize.
        OnDateSelected(null, null);
    }
    void OnDateSelected(object sender, DateChangedEventArgs args)
    {
        int days = (toDatePicker.Date - fromDatePicker.Date).Days;
        resultLabel.Text = String.Format("{0} day{1} between dates",
                                         days, days == 1 ? "" : "s");
    }
}

这是结果:
2018_09_20_132210

目录
相关文章
|
4月前
|
开发者 图形学 开发工具
Unity编辑器神级扩展攻略:从批量操作到定制Inspector界面,手把手教你编写高效开发工具,解锁编辑器隐藏潜能
【8月更文挑战第31天】Unity是一款强大的游戏开发引擎,支持多平台发布与高度可定制的编辑器环境。通过自定义编辑器工具,开发者能显著提升工作效率。本文介绍如何使用C#脚本扩展Unity编辑器功能,包括批量调整游戏对象位置、创建自定义Inspector界面及项目统计窗口等实用工具,并提供具体示例代码。理解并应用这些技巧,可大幅优化开发流程,提高生产力。
434 1
|
6月前
|
Swift
技术好文共享:第七章美化DetailView界面
技术好文共享:第七章美化DetailView界面
|
JavaScript Android开发
|
JavaScript Android开发 索引
|
JavaScript Android开发 iOS开发
|
JavaScript Android开发 Windows
下一篇
DataWorks