第十五章：交互式界面（十三）

需要用户日期或时间的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="" xmlns:x="" 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上，它几乎占据了屏幕：

注意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");
    }
}

	

这是结果：