翻译|行业资讯|编辑:莫成敏|2020-01-15 13:19:58.470|阅读 502 次
概述:本文介绍Essential Studio 2019第4卷中 Syncfusion的Xamarin.Forms组件列表中引入的新组件——日期选择器。
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
Essential Studio for Xamarin是全面的Xamarin.iOS、Xamarin.Android和Xamarin.Forms组件套包,包含最快的图表和网格。
点击下载Essential Studio for Xamarin正式版
日期选择是Essential Studio 2019第4卷中 Syncfusion的Xamarin.Forms组件列表中引入的新组件。日期选择器是一个完全可自定义的组件,它提供了一个简单而引人入胜的用户界面,可为您的应用程序提供流畅和触摸友好的体验。该组件为所有平台提供了通用的UI,可用于计划、待办事项和提醒应用程序。
在本文中,我将向您介绍此新的Date Picker组件中的可用功能。
格式化选择器
Xamarin.Forms日期选择器以四种预定义的日期格式显示要从中选择的日期值。日期选择器组件还支持格式化列和标题的文本。以下代码示例说明了在“日期选择器”中加载的“yyyy MM dd”格式。
<fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;"> <ContentPagexmlns =“ //xamarin.com/schemas/2014/forms”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">
xmlns:x =“ //schemas.microsoft.com/winfx/2009/xaml”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">
xmlns:local =“ clr-namespace:DatePickerSample”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">
xmlns:datepicker =“ clr-namespace:Syncfusion.XForms.Pickers; assembly = Syncfusion.SfPicker.XForms”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">
x:Class =“ DatePickerSample.MainPage”></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">
<ContentPage.Content></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">
<网格></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">
<datepicker:SfDatePicker PickerMode =“ Dialog”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">
格式=“ yyyy_MM_dd”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">
ShowFooter =“ True” /></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">
</Grid></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">
</ContentPage.Content></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">
</ContentPage></font></font><font></font>
<font></font>
对话框和独立
屏幕中元素的紧凑视图是应用程序最重要的方面之一。日期选择器具有独立模式和对话框mod,该对话框将选择器呈现在应用程序窗口的中心;它使应用程序在用户界面中看起来更加令人印象深刻。
<fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;"> <ContentPagexmlns =“ //xamarin.com/schemas/2014/forms”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">xmlns:x =“ //schemas.microsoft.com/winfx/2009/xaml”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">xmlns:local =“ clr-namespace:DatePickerSample”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">xmlns:datepicker =“ clr-namespace:Syncfusion.XForms.Pickers; assembly = Syncfusion.SfPicker.XForms”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">x:Class =“ DatePickerSample.MainPage”></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;"><网格></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;"><datepicker:SfDatePicker x:Name =“ datePicker”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">PickerMode =“对话框”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">格式=“ yyyy_MM_dd”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">ShowFooter =“ True” /></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;"><ButtonClicked =“ PickerButton_Clicked” ... /></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;"></Grid></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;"></ContentPage></font></font><font></font>
<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">公共局部类MainPage</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 公共MainPage()</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> { </font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> InitializeComponent();</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> }</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 私人无效PickerButton_Clicked(对象发送者,System.EventArgs e)</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> this.datePicker.IsOpen = true;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> }</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> }</font></font>
指定最小和最大日期
通过设置最大和最小日期以限制选择超出该范围的日期,可以为Date Picker加载指定的日期范围。
<fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;"> <datepicker:SfDatePicker MinimumDate =“ 03/29/2000”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">MaximumDate =“ 05/05/2021” ... /></font></font>
带间隔的日期值
日期值可以在“日期选择器”中的间隔中分别填充天、月和年。
<fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;"> <datepicker:SfDatePicker PickerMode =“ Dialog”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">
DayInterval =“ 2”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">
MonthInterval =“ 2”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">
YearInterval =“ 2” ... /></font></font>
定制
您可以自定义标题、列标题、页脚和日期值的颜色和字体。下面的代码示例演示如何自定义选定值和未选定值以及字体。
<fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;"> <datepicker:SfDatePicker PickerMode =“ Dialog”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">HeaderText =“选择日期”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">HeaderBackgroundColor =“#238F94”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">HeaderTextColor =“#FFFFFF”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">OKButtonTextColor =“#238F94”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">CancelButtonTextColor =“#238F94”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">UnselectedItemTextColor =“#238F94”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">ColumnHeaderBackgroundColor =“#EBF2F2”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">SelectedItemTextColor =“#238F94”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">ShowFooter =“ True” /></font></font>
创建一个包含日期选择器的Xamarin.Forms应用程序
本节说明了使用Visual Studio在Xamarin.Forms应用程序中实现Date Picker控件的分步过程:
1、创建一个空白的Xamarin.Forms应用程序。
2、在应用程序中,从nuget.org引用 SfPicker NuGet包。
3、在UWP和iOS中部署应用程序时,请遵循文档中使用Date Picker在每个平台上启动应用程序中提供的步骤。
4、如以下代码示例所示,将Date Picker命名空间导入页面中,并初始化SfDatePicker。
<fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;"><?xml version =“ 1.0” encoding =“ utf-8”吗?</font><fontstyle="vertical-align: inherit;">></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;"><ContentPagexmlns =“ //xamarin.com/schemas/2014/forms”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">xmlns:x =“ //schemas.microsoft.com/winfx/2009/xaml”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">xmlns:local =“ clr-namespace:DatePickerSample”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">xmlns:datepicker =“ clr-namespace:Syncfusion.XForms.Pickers; assembly = Syncfusion.SfPicker.XForms”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">x:Class =“ DatePickerSample.MainPage”></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;"><ContentPage.Content></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;"><网格></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;"><datepicker:SfDatePicker x:Name =“ datePicker”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">PickerMode =“对话框”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">PickerWidth =“ 300”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">ShowFooter =“ True” /></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;"><ButtonText =“开放日期选择器” </font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">x:Name =“ pickerButton”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">Clicked =“ PickerButton_Clicked”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">…。/></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;"></Grid></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;"></ContentPage.Content></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;"></ContentPage></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 公共局部类MainPage:ContentPage</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
<font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 公共局部类MainPage:ContentPage</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">{</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">公共MainPage()</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">{</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">InitializeComponent();</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">}</font></font><font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">私人无效PickerButton_Clicked(对象发送者,System.EventArgs e)</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">{</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">this.datePicker.IsOpen =true;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">}</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">}</font></font>
结论
在这篇文章中,我们介绍了新的 Xamarin.Forms日期选择器组件及其功能。在我们的2019年第4卷发行版中尝试使用此控件。
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn
文章转载自: