Essential Studio for Xamarin 2019v4新功能:解读Xamarin.Forms日期选择器

翻译|行业资讯|编辑:莫成敏|2020-01-15 13:19:58.470|阅读 18 次

概述:本文介绍Essential Studio 2019第4卷中 Syncfusion的Xamarin.Forms组件列表中引入的新组件——日期选择器。

# 您正在找协同办公软件吗?点击这里站长给您推荐 #

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 =“ http://xamarin.com/schemas/2014/forms”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">
             xmlns:x =“ http://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>
Essential Studio for Xamarin 2019v4新功能:解读Xamarin.Forms日期选择器

对话框和独立

屏幕中元素的紧凑视图是应用程序最重要的方面之一。日期选择器具有独立模式和对话框mod,该对话框将选择器呈现在应用程序窗口的中心;它使应用程序在用户界面中看起来更加令人印象深刻。

<fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;"> <ContentPagexmlns =“ http://xamarin.com/schemas/2014/forms”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">
    xmlns:x =“ http://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>


Essential Studio for Xamarin 2019v4新功能:解读Xamarin.Forms日期选择器

指定最小和最大日期

通过设置最大和最小日期以限制选择超出该范围的日期,可以为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>
Essential Studio for Xamarin 2019v4新功能:解读Xamarin.Forms日期选择器

带间隔的日期值

日期值可以在“日期选择器”中的间隔中分别填充天、月和年。

 
<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>
Essential Studio for Xamarin 2019v4新功能:解读Xamarin.Forms日期选择器

定制

您可以自定义标题、列标题、页脚和日期值的颜色和字体。下面的代码示例演示如何自定义选定值和未选定值以及字体。

<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>
Essential Studio for Xamarin 2019v4新功能:解读Xamarin.Forms日期选择器

创建一个包含日期选择器的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 =“ http://xamarin.com/schemas/2014/forms”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">
             xmlns:x =“ http://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应用程序。

结论

在这篇文章中,我们介绍了新的  Xamarin.Forms日期选择器组件及其功能。在我们的2019年第4卷发行版中尝试使用此控件。


想要购买该产品正版授权,或了解更多产品信息请点击【咨询在线客服】





标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:Syncfusion https://www.syncfusion.com/blogs/post/introducing-xamarin-forms-date-picker.aspx

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
Essential Studio for Xamarin

全面的Xamarin.iOS、Xamarin.Android和Xamarin.Forms组件套包,包含最快的图表和网格。

在线
客服
在线
QQ
咨询
电话
177-4994-3557
购物车 反馈 返回
顶部
在线客服系统
live chat