AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

客人发帖：添加一个日历到您的Xamarin.Forms应用程序与Telerik日历

2017-10-20 1545
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 您是否已经使用Xamarin.Forms构建跨平台本机手机应用程序？如果是这样，挑选你的技术堆栈很棒！毕竟，您还能在C＃/ XAML中重用您的技能，使每个平台上运行的应用程序具有真正统一的单一代码库？虽然Xamarin提供了大量的框架，IDE和集成，但应用程序可能需要在Xamarin.Forms中包含的控件之外的控件。

您是否已经使用Xamarin.Forms构建跨平台本机手机应用程序？如果是这样，挑选你的技术堆栈很棒！毕竟，您还能在C＃/ XAML中重用您的技能，使每个平台上运行的应用程序具有真正统一的单一代码库？虽然Xamarin提供了大量的框架，IDE和集成，但应用程序可能需要在Xamarin.Forms中包含的控件之外的控件。开发人员不是建立自己的自定义控件，而是更愿意从Telerik这样的服务开始即时获取精心设计的，高性能的UI控件，以帮助更快地运送应用程序。想到一个抛光的UI是你必须拥有的“哇”因素;这就是您将使用Telerik UI为Xamarin获得的。

日历保持我们的生活有组织和生产力;每个人都以数字方式使用它们，越来越多，所以您的移动应用可能需要显示日历并管理事件并不奇怪。然而，事实证明，日历UI是一件棘手的事情，而细节的细节却有所不同。

Xamarin用户界面中的Telerik Calendar旨在为您的用户提供各种日历场景下最终的应用程序生产力。是的，这些在每个移动平台上都是真正的本地日历，只需通过Xamarin.Forms抽象渲染。 Telerik日历不仅充分利用了本地UI提供的所有固有优势，还展示了C＃中的属性/事件，以便开发人员完全定制和灵活。这篇文章介绍了Xamarin的Telerik UI，然后首先利用Telerik日历来探索开发人员的所有可用的定制选项。

Xamarin的Telerik UI

Xamarin的Telerik UI是Xamarin.Forms控件和Xamarin绑定的集合，构建在iOS的本机Telerik UI和Android套件的UI之上。 Xamarin.Forms控件还利用了Telerik UI的UWP控件和功能，提供了一个通用的API，允许开发人员使用单个共享代码库在所有三个移动平台（iOS / Android / Windows）上使用本地Telerik组件。 Xamarin的UI为开箱即用提供了丰富而卓越的UI控件，因此您可以专注于使用功能UI组件提供应用程序功能。

我们知道，开发人员并不总是信任高辛苦的话，对吧？您可以自己玩Xamarin套件的Telerik UI，看看是否符合您的需求。您可以在决定是否适合您的Xamarin应用程序之前查看每个控件的性能和交互性。有美丽的展示应用程序，突出显示每个移动平台的Xamarin控件的UI，以及实现相同结果的示例代码。在各自的应用商店中查找应用，包括iOS App Store和Google Play。

入门

那么，您如何在Xamarin项目中纳入Xeram的Telerik UI？一个简单的试用下载可能是最简单的入门方式。只需前往下载站点并下拉列表。下载完成后，您会发现每个平台特定的示例，模板和二进制文件作为共享版本。

如果您有开始在绿地项目上工作的奢侈品，则Xamarin的Telerik UI提供了几个方便的项目模板/向导。目标是为开发人员提供他们的Xamarin项目的一个很好的起点，无论是在Visual Studio还是Xamarin Studio.上。

无论是在Windows还是Mac上，开发人员在Xamarin项目中集成Xamarin UI的最简单的方法之一是Telerik NuGet服务器。第一步是将IDE的软件包管理器配置为指向Telerik NuGet Feed。这在您的首选项/选项中，在Visual Studio和Xamarin Studio中的工作方式相同。简单地设置一个新的NuGet源代码，指向Telerik画廊，网址为https://nuget.telerik.com/nuget，首次验证您的身份，并完成！

Adding the Telerik NuGet source in Visual Studio.

以下是您如何使用NuGet将Xamarin位的UI拉入现有项目，这里显示了Xamarin Studio的简洁性，尽管Visual Studio具有相同的工作流程。 一旦你拉入了Telerik UI的Xamarin包，NuGet就会完成其他的魔法; 您将在您的共享PCL以及所有平台特定项目中拥有Xamarin引用所需的UI。 NuGet路线的一大优点是，您不仅可以轻松地将用户界面中的Xamarin引用到现有项目中，还可以轻松更新。

Add the Telerik NuGet package.

Xamarin控件的几个用户界面获得了他们的抛光，行为和性能，因为它们是可以为每个平台定制的真正的本地UI控件。 因此，要使它们从Xamarin.Forms抽象需要自定义渲染器。 不用担心，一切都可以开箱即用，您只需在应用程序中注册渲染器即可。 该文档将向您展示如何在iOS，Android和UWP平台上使用时注册每个控件的渲染器。 以下是在iOS应用程序中使用Telerik Calendar控件时需要的示例。 您的iOS专用项目中的AppDelegate.cs文件中包含以下代码：

点击(此处)折叠或打开

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using Foundation;
  5. using Xamarin.Forms;
  6.     
  7. [assembly: ExportRenderer(typeof(Telerik.XamarinForms.Input.RadCalendar), typeof(Telerik.XamarinForms.InputRenderer.iOS.CalendarRenderer))]
  8.     
  9. namespace MyApp.iOS
  10. {
  11.     [Register("AppDelegate")]
  12.     public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
  13.     {
  14.         public override bool FinishedLaunching(UIApplication app, NSDictionary options)
  15.         {
  16.             global::Xamarin.Forms.Forms.Init();
  17.     
  18.             Telerik.XamarinForms.Common.iOS.TelerikForms.Init();
  19.             LoadApplication(new App());
  20.     
  21.             return base.FinishedLaunching(app, options);
  22.         }
  23.     }
  24. }


一旦你注册了所有的参考和渲染器，你就可以使用Telerik Calendar控件进行滚动了。 启动任何XAML视图，这个简单的标记为您呈现日历：

点击(此处)折叠或打开

  1. ... xmlns:TelerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input" ...
  2.     
  3. TelerikInput:RadCalendar />


日历视觉结构

Telerik日历控件是一个肯定的日历，刚刚渲染精准的应用程序与许多自定义选项，并适应每个移动平台的独特的UI范例。 在我们开始调整事情之前，它有助于看到整体的大图控件 - 所有视觉元素的简单渲染的Telerik日历。 标签应该是不言自明的：

Telerik Calendar control UI.

您也可以控制显示或隐藏特定的细节以满足您的需要。 默认情况下，日期名称显示，周数不会显示，但是这里有一些代码可以翻转两者（以及每个移动平台上生成的日历）：

点击(此处)折叠或打开

  1. var calendar = new RadCalendar();
  2. calendar.WeekNumbersDisplayMode = DisplayMode.Show;
  3. calendar.DayNamesDisplayMode = DisplayMode.Hide;


Telerik Camera control visual structure.

日历ViewMode

Telerik日历有几个支持的*查看模式*，用于控制日历最初呈现的方式，即：

  • Month
  • Week
  • Year
  • MonthNames
  • YearNumbers
  • Flow

在所有移动平台上都不支持每种观看模式，只有iOS有所不同。 除了通过用户操作外，还有一些方法暴露用于以编程方式更改视图模式。 如果有支持或导航是可能的，每个都返回true，否则返回false：

  • TrySetViewMode: 将日历设置为特定的视图模式
  • TryNavigateToUpperView: 如果可能，将日历导航到上视图
  • TryNavigateToLowerView: 如果可能，将日历导航到较低的视图

视图级别之间的导航层次是移动平台依赖的，如下所示：

  • iOS: YearNumbers > Year > MonthNames > Month > Week
  • Android: Year > Month > Week

以下是一些实例化日历的简单代码，并将视图模式设置为year，全部以编程方式进行：

点击(此处)折叠或打开

  1. var calendar = new RadCalendar();
  2. calendar.NativeControlLoaded += CalendarLoaded;
  3.     
  4. private void CalendarLoaded(object sender, EventArgs args)
  5. {
  6.     (sender as RadCalendar).TrySetViewMode(CalendarViewMode.Year);
  7. }


日历管理

Telerik日历公开了一些允许开发人员编程灵活性处理日历用户体验的属性：

  • DisplayDate: 当前视图中的日期
  • MinDate: 获取/设置可显示或选择的最小日期
  • MaxDate: 获取/设置可以显示或选择的最大日期

每个日期属性都可以明确设置或相对于当前日期设置，如下所示：

点击(此处)折叠或打开

  1. // XAML Markup
  2. xmlns:TelerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
  3.     
  4. TelerikInput:RadCalendar x:Name="MyCalendar" />
  5.  
  6. // Code Behind
  7. MyCalendar.MinDate = DateTime.Today.AddMonths(-1);
  8. MyCalendar.MaxDate = DateTime.Today.AddMonths(5);
  9. MyCalendar.DisplayDate = DateTime.Today.AddMonths(2);


用户希望从日历中做什么？ 当然，选择日期的能力。 Telerik日历运动简单的日期选择功能，无论是通过用户交互和编程。 日期选择应以单，多个或一系列日期的形式提供。 两个关键的事情使这成为可能：

  • SelectedDate: 获取/设置当前选定的日期
  • SelectionChanged: 所选日期更改时引发的事件

以下是设置日历以显示默认月视图模式并以编程方式选择日期的代码：

点击(此处)折叠或打开

  1. RadCalendar calendar = new RadCalendar();
  2. calendar.SelectedDate = new DateTime(2016, 12, 14);


结果如下 注意在不同移动平台上呈现的日历控件中的样式差异。

Telerik Camera control date selection.

日历预约

任何日历UI都需要显示约会，这是您如何让用户参与和生产力。 Telerik日历中的预约支持从Telerik.XamarinForms.IAppointment界面开始，该界面运行了三个基本成员：StartDate，EndDate和Title，但您应该根据需要考虑在约会中添加更多描述符。 实现该接口的示例Appointment类如下所示：

点击(此处)折叠或打开

  1. public class Appointment : IAppointment
  2. {
  3.     public DateTime StartDate { get; set; }
  4.     public DateTime EndDate { get; set; }
  5.     public string Title { get; set; }
  6.     public bool IsAllDay { get; set; }
  7.     public Color Color { get; set; }
  8. }


可以通过简单地使用也可以数据绑定的AppointmentSource属性将一个来自IAppointment接口实现的约会集合提供给Telerik Calendar控件。 以下是一些绑定到日历的示例约会以及每个平台中的相应结果：

点击(此处)折叠或打开

  1. calendar.AppointmentsSource = new ListAppointment>() {
  2.     new Appointment() {
  3.         StartDate = DateTime.Today.AddDays(1),
  4.         EndDate = DateTime.Today.AddDays(2).AddTicks(-1),
  5.         Title = "Mom's Birthday",
  6.         Color = Color.Red },
  7.     new Appointment() {
  8.         StartDate = DateTime.Today.AddDays(3).AddHours(17),
  9.         EndDate = DateTime.Today.AddDays(3).AddHours(22),
  10.         Title = "Big Game",
  11.         Color = Color.Green },
  12.     new Appointment() {
  13.         StartDate = DateTime.Today.AddDays(11).AddHours(20),
  14.         EndDate = DateTime.Today.AddDays(12).AddHours(4),
  15.         Title = "Progress Party",
  16.         Color = Color.Red }
  17. };


以下是快速了解Telerik日历约会如何通过Telerik UI Xamarin示例应用程序（在iOS App Store和Google Play上找到该应用程序）：

Calendar in action gif

自定义日历单元格样式

当然，Telerik日历有一个抛光的UI，但有时您可能想通过操纵最细微的细节来定制其外观和感觉，并且在真正的开发人员友好的表单中，Telerik日历允许您为每个单元格定制样式。

您可以将一个名为SetStyleForCell的属性设置为可以为单个日历单元格设置样式的自定义函数。 所有单元格共享一个共同的基类CalendarCell，具有以下属性：

  • Text：获取单元格中显示的文本。
  • Type (CalendarCellType)：获取单元格的类型。 可能的值是：
    1. Date：与实际日期相对应的所有单元格均为此类型
    2. WeekNumber：保存周数的单元格
    3. DayName：持续一周的单元格

每个单元格都可以使用CalendarCellStyle类来设计，它们有以下选项：

  • BackgroundColor
  • BorderColor
  • BorderThickness
  • FontSize
  • FontWeight
  • ForegroundColor

具有细胞造型灵活性，以下是如何将春天的第一天着色为日历中的绿色单元格，例如：

点击(此处)折叠或打开

  1. var calendar = new RadCalendar();
  2. calendar.SetStyleForCell = this.EvaluateCellStyle;
  3.     
  4. private CalendarCellStyle EvaluateCellStyle(CalendarCell cell)
  5. {
  6.     var springStyle = new CalendarCellStyle {
  7.         BackgroundColor = Color.Green,
  8.         FontSize = Device.OnPlatform(14, 30, 17),
  9.         FontWeight = FontWeight.Normal,
  10.         ForegroundColor = Color.FromRgb(139, 209, 0)
  11.     };
  12.  
  13.     var dayCell = cell as CalendarDayCell;
  14.     if (dayCell != null && dayCell.Date.Day == 22 && dayCell.Date.Month == 3)
  15.     {
  16.         return springStyle;
  17.     }
  18.     return null;
  19. }


结果：

预约可能会出现另一个常见的定制机会，您可能需要在繁忙的日历上进行自定义样式约会。 使用Telerik日历，您将获得一个AppointmentStyle属性，该属性为CalendarAppointmentsStyle类型。 这允许使用文本和形状完成颜色编码的约会定制。

这是日历单元格中的约会样式的视觉结构; 您可以使用文本或形状或两者。


CalendarAppointmentsStyle的一些造型机会包含以下属性：

  • DisplayMode：定义约会如何可视化。 值可以是Text，TextWithShape，TextWithBackground和Shape。
  • Padding：定义保存事件的矩形的填充。
  • Spacing：定义同一日期的两个约会之间的空白空间。
  • ShapeType：定义表示约会的形状。 值可以是Rectangle，Ellipse，TriangleUp，TriangleDown和Rhombus。
  • AllDayIndicatorLocation：定义全天指标可视化的位置。

表示约会的形状的一些示例可以被可视化如下：

全日制预约指标的示例如下。 您可以控制指标在日历单元格中呈现的位置，宽度和填充：

结论

使用Xamarin.Forms为.NET开发人员实现跨平台移动开发的民主化，您可以自豪地选择Xamarin技术堆栈...只需不要重复使用复杂的手动构建的UI。 用于Xamarin的Telerik UI在这里是有帮助的，每个控制背后的工程设计表现在其表现和抛光。 当您需要在跨平台移动应用程序中支持任何类型的日历和事件时，Telerik日历将随时可用，并提供无数的自定义选项。 准备好后，请仔细查看详细的文档，并通过正确的日历支持保持您的应用用户的生产力。 干杯快乐编码！

文章标签：
iOS开发
Android开发
数据可视化
关键词：
Xamarin应用程序
日历Xamarin
wangccsy
目录
相关文章
wangccsy
【Xamarin】使用WebSocket开发实时通信应用程序
WebSockets是一种双向通信协议，或TCP连接上的持久通信通道，由许多游戏，具有聊天功能的应用程序和实时应用程序（如股票行情）利用的非常强大的协议。 在这篇博文中，我们将讨论如何构建一个简单的Xamarin聊天室应用程序，该应用程序将利用并连接到ASP.NET Core WebSocket服务。
wangccsy
3244 0
wangccsy
|
数据库 Android开发 数据库管理
【Xamarin.Android】使用实体框架构建Android应用程序
数据是任何应用程序开发的一个重要组成部分，移动应用程序也不例外；作为开发人员，处理数据是我们的一个重要决策，对移动应用开发也是如此。从键值对存储到SQLite，有许多选项可用，但是，.NET开发者往往特别熟悉的是实体框架。
wangccsy
1503 0
性能优化实践者
|
存储 JSON Java
使用友盟+的APM服务实现基于Xamarin.Android的应用程序启动性能优化
随着开发平台的普及， 我们需要正确的⼯具和⽅法来满⾜不断增⻓的需求。Xamarin就是这样⼀种框架， 它⽀持在 Android、 iOS 和 Windows 平台上共享单个代码库。所以，我们将在 Xamarin.Android应⽤程序中测试性能， 就像在 AndroidStudio 中使⽤ Java 开发⼀样， 我们可以使⽤c#对性能进⾏测试， 从⽽优化启动时间。
性能优化实践者
181 0
使用友盟+的APM服务实现基于Xamarin.Android的应用程序启动性能优化
杰克.陈
|
Android开发 iOS开发
带农历日历的DatePicker控件！Xamarin控件开发小记
原文:带农历日历的DatePicker控件！Xamarin控件开发小记 闲来无事开发了个日期选择控件，感兴趣的同学前往： https://github.com/MatoApps/Mato.DatePicker Mato.
杰克.陈
1744 0
wangccsy
【Xamarin.Forms】XAML编译——使用XAML编译器来提高Xamarin.Forms应用程序的性能
XAML可以选择使用XAML编译器（XAMLC）直接编译为中间语言（IL）。XAMLC提供了许多好处： 它执行XAML的编译时检查，通知用户任何错误。
wangccsy
1127 0
wangccsy
|
Android开发 iOS开发 MacOS
让你的Xamarin.Forms应用程序更好（更快！）
随着我们继续追求稳定性和性能，我们很高兴获得您对Xamarin.Forms 2.3.5的第一个预发布的反馈。 本次发布包含超过130种修复和增强功能，我想强调一下我们最为您的探索：快速渲染器，ListView增强功能和macOS预览！ Android的快速渲染器 快速渲染器背后的概念非常简单：通过平坦化控制嵌套来减少通货膨胀和降低成本。
wangccsy
1035 0
wangccsy
|
API Android开发 iOS开发
使您的Xamarin.Forms应用程序可访问
iOS，Android和Windows都会为开发人员公开API，为每个人构建可访问的移动应用。 我们很高兴地宣布，我们在Xamarin.Forms中添加了可用性的新API，以便开发人员更轻松地构建可访问的跨平台移动应用程序。
wangccsy
1010 0
wangccsy
|
前端开发 容器
【Xamarin.Forms】使用Infragistics的Ultimate UI控件快速编写应用程序
Infragistics Xamarin的Ultimate UI控件是一系列生产力工具和美丽的UI控件，可以自定义并放置在Xamarin.Forms项目中，用于闪电般的本机UI。 您是否准备好加快使用Xamarin.Forms编写跨平台手机应用程序的过程？如果您刚开始使用Xamarin应用程序开发，或者即使您已经开发了几个移动应用程序，我们也知道大多数开发人员希望尽快开始使用项目。
wangccsy
2150 0
wangccsy
|
API Android开发 iOS开发
使用.NET标准构建（生成）Xamarin.Forms应用程序
.NET标准库将我们的代码带入更多平台，并为基础类库提供更多API，从而构建出惊人的应用程序。开发人员已经能够使用Xamarin的.NET标准库来跨平台共享代码，并且使用Xamarin.Forms长久地在iOS，Android，UWP，macOS之间创建一个共享的用户界面。
wangccsy
1113 0
wangccsy
|
存储 测试技术
【Xamarin】快速生成和发布五星级应用程序
移动应用程序的第一步是构建自动化，它构建应用程序并运行所需的测试，以确保应用程序遵循所需的规则。 构建自动化也是运送高品质，五星级移动应用程序的第一步。 在构建iOS和Android移动应用程序时，主要的挑战之一就是正确安装所需的工具和SDK，以便成功构建应用程序并运行测试。
wangccsy
1099 0

热门文章

最新文章

  • 1
    Xamarin.Android 使用 SQLite 出现 Couldn't read row 0, col -1 from CursorWindow. 异常
  • 2
    使用Xamarin开发即时通信系统 -- 基础篇（大量图文讲解 step by step，附源码下载）
  • 3
    Xamarin.Android 使用百度地图获取定位信息
  • 4
    【Xamarin开发 Android 系列 5】 Xamarin 的破解
  • 5
    Xamarin.Forms入门-使用 Xamarin.Forms 来创建跨平台的用户界面
  • 6
    Xamarin.Forms多画面快速入门
  • 7
    使用Xamarin.Forms的企业应用程序模式（电子书）--单元测试
  • 8
    【Xamarin 挖墙脚系列：IOS 开发界面的3种方式】
  • 9
    Xamarin 资源包下载
  • 10
    【Xamarin挖墙脚系列：时刻下载最新的Mac环境下的Xamarin安装包】
  • 1
    Xamarin.Android | 获取常见的10种系统权限
    125
  • 2
    使用xamarin开发Android、iOS报错failed to open directory: 系统找不到指定的文件
    127
  • 3
    在Xamarin开发中，UWP环境下无法进入断点调试standard库的问题解决方案
    123
  • 4
    Xamarin 联合创始人 Miguel de Icaza 将离开微软
    120
  • 5
    C# Xamarin数据绑定入门基础
    176
  • 6
    Xamarin 学习笔记 - 配置环境(Windows & iOS)
    1291
  • 7
    C#使用Xamarin开发可移植移动应用终章(11.获取设备信息与常用组件,开源一个可开发模版.)
    1717
  • 8
    C#使用Xamarin开发可移植移动应用进阶篇(7.使用布局渲染器,修改默认布局),附源码
    1004
  • 9
    C#使用Xamarin开发可移植移动应用(2.Xamarin.Forms布局,本篇很长,注意)附源码
    1180
  • 10
    C#使用Xamarin开发可移植移动应用(3.Xamarin.Views控件)附源码
    1316

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    DataWorks