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

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

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

Xamarin用户界面中的旨在为您的用户提供各种日历场景下最终的应用程序生产力。是的，这些在每个移动平台上都是真正的本地日历，只需通过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，以及实现相同结果的示例代码。在各自的应用商店中查找应用，包括和。

入门

那么，您如何在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画廊，网址为，首次验证您的身份，并完成！

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

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

using System;
using System.Collections.Generic;
using System.Linq;
using Foundation;
using Xamarin.Forms;

[assembly: ExportRenderer(typeof(Telerik.XamarinForms.Input.RadCalendar), typeof(Telerik.XamarinForms.InputRenderer.iOS.CalendarRenderer))]

namespace MyApp.iOS
{
    [Register("AppDelegate")]
    public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
    {
        public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            global::Xamarin.Forms.Forms.Init();

            Telerik.XamarinForms.Common.iOS.TelerikForms.Init();
            LoadApplication(new App());

            return base.FinishedLaunching(app, options);
        }
    }
}

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

... xmlns:TelerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input" ...

<TelerikInput:RadCalendar />

日历视觉结构

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

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

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

日历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，全部以编程方式进行：

var calendar = new RadCalendar();
calendar.NativeControlLoaded += CalendarLoaded;

private void CalendarLoaded(object sender, EventArgs args)
{
    (sender as RadCalendar).TrySetViewMode(CalendarViewMode.Year);
}

日历管理

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

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

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

// XAML Markup
xmlns:TelerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"

<TelerikInput:RadCalendar x:Name="MyCalendar" />

// Code Behind
MyCalendar.MinDate = DateTime.Today.AddMonths(-1);
MyCalendar.MaxDate = DateTime.Today.AddMonths(5);
MyCalendar.DisplayDate = DateTime.Today.AddMonths(2);

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

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

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

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

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

日历预约

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

public class Appointment : IAppointment
{
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public string Title { get; set; }
    public bool IsAllDay { get; set; }
    public Color Color { get; set; }
}

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

calendar.AppointmentsSource = new List<Appointment>() {
    new Appointment() {
        StartDate = DateTime.Today.AddDays(1),
        EndDate = DateTime.Today.AddDays(2).AddTicks(-1),
        Title = "Mom's Birthday",
        Color = Color.Red },
    new Appointment() {
        StartDate = DateTime.Today.AddDays(3).AddHours(17),
        EndDate = DateTime.Today.AddDays(3).AddHours(22),
        Title = "Big Game",
        Color = Color.Green },
    new Appointment() {
        StartDate = DateTime.Today.AddDays(11).AddHours(20),
        EndDate = DateTime.Today.AddDays(12).AddHours(4),
        Title = "Progress Party",
        Color = Color.Red }
};

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

自定义日历单元格样式

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

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

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

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

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

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

var calendar = new RadCalendar();
calendar.SetStyleForCell = this.EvaluateCellStyle;

private CalendarCellStyle EvaluateCellStyle(CalendarCell cell)
{
    var springStyle = new CalendarCellStyle {
        BackgroundColor = Color.Green,
        FontSize = Device.OnPlatform(14, 30, 17),
        FontWeight = FontWeight.Normal,
        ForegroundColor = Color.FromRgb(139, 209, 0)
    };

    var dayCell = cell as CalendarDayCell;
    if (dayCell != null && dayCell.Date.Day == 22 && dayCell.Date.Month == 3)
    {
        return springStyle;
    }
    return null;
}

结果：

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

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

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

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

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

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

结论

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