Telerik Tagit

第5部分-按日期排序和选择图像

Xamarin Tagit Banner的Telerik UI

基于时间轴查看图像

Xamarin忍者时间线的Telerik UI

第4部分在这个系列中,我们为Xamarin使用了Telerik UI自动完成控件,为用户提供基于计算机视觉API返回的标签搜索图像的能力,并增加了对图像进行评级和管理收藏夹的功能。现在是时候与Xamarin的Telerik UI“约会”了日历控制并允许用户根据照片上传和标记的日期查找照片。

制定日程表

你拍的照片越多,就越难找到你想要的照片。Xamarin Calendar控件的Telerik UI具有灵活的样式、约会支持和完整的数据绑定支持。开发人员可以轻松地将Calendar绑定到图像列表,公开标记图像的日期,并按日、周、月或年显示它们。

Telerik UI为Xamarin UI日历

日历中包含的信息通常以不同于其他类型的数据的方式呈现。日历上的项目不仅与特定的时间框架相关联,还经常根据其他属性进行颜色编码和格式化。为了简化管理列表或日历项的集合,Telerik UI for Xamarin定义了一个独特的IAppointment接口,可以轻松地在您自己的模型中实现:

公共接口IAppointment

DateTime StartDate {get;设置;}
DateTime结束日期设置;}
字符串标题{获取;设置;}
颜色颜色{获取;设置;}
bool IsAllDay{获取;设置;}
字符串详细信息{获取;设置;}

通过创建一个实现IAppointment接口的模型,并将相关的图像信息传递给类构造函数,我们可以用图像集合的信息填充Calendar控件:

this.Timeline。添加(新ImageCreationEvent (
的形象。CreatedDate,
image.CreatedDate.AddMinutes (1),
的形象。标题,
Color.FromHex (image.AccentColor)));

这是允许Tagit按日期显示图像的基础。

是时候了

第2部分,我们使用Telerik为Xamarin UI构建了一个导航系统SideDrawer控制。SideDrawer菜单中的一个项目是“Timeline”命令,用于导航到Timeline页面。为了让用户能够根据标记的日期查看图像,我们在该页中声明了一个Calendar控件,并将其绑定到视图模型的Timeline属性,该属性包含一个表示照片的iappointment集合:

< telerikInput: RadCalendar
AppointmentsSource = "{绑定时间}"
/> . SelectedDate="{绑定SelectedDate, Mode=TwoWay}"

Telerik UI为Xamarin第一个日历机器人

作为一名移动开发人员,你面临的最大挑战之一是确保你的用户界面在不同平台上看起来一致,并且它符合主机操作系统的标准和期望。例如,在iOS设备上,日历呈现略有不同,他们使用圆形而不是矩形来表示所选日期。Xamarin控件的所有Telerik UI都在底层发出本地控件,Calendar控件也不例外。

Xamarin第一个日历ios的Telerik UI

移动设备上缺乏屏幕空间意味着用于显示当前选定日期的日历项列表的空间有限。这为我们提供了一个很好的机会列表视图控件的日历控件,并使用它列出在特定日期上传和标记的所有照片。

得到上市

Calendar控件会触发一系列有用的事件,包括AppointmentTapped、DisplayDateChanged、SelectedDateChanged。显示以特定日期标记的图像列表非常简单,只需在用户每次点击日期时过滤图像集合,并将过滤后的列表绑定到ListView控件。在代码背后,Tagit实现了一个事件处理程序,每次用户在日历上选择一个日期时都会被调用:

UpdateTimelineEvents(DateTime?值)

this.SelectedImages.Clear ();

foreach (this.TaggedImages中的var图像)

if (image.CreatedDate.CompareTo(value.Value) >= 0 && image.CreatedDate.CompareTo(value.Value. adddays (1)) < 0)

this.SelectedImages.Add(图片);


事件处理程序使用筛选过的图像列表初始化视图模型的SelectedImages属性,因为ListView绑定到该属性,所以在选中日期标记的图像列表出现在日历下面。作为一个有用的视觉线索,每个ListView项左边的彩色条都初始化了图像的强调色——由计算机视觉API返回的强调色。

Telerik UI为Xamarin下一个日历机器人

点击ListView中的一个项目,将转到该图像的图像详细信息页面,使用户能够快速轻松地查看图像和与之相关的元数据。

Telerik UI为Xamarin查看图像细节

Tagit的用户体验几乎完成了。在第6部分,我们将使用径向规TabView,饼状图控件将数据可视化添加到应用程序中,使用户能够快速、轻松地查看按标签或类别划分的图像。


第1部分
应用程序概述

第2部分
布局和导航

具有SideDrawer和SlideView控件。


第3部分
图片上传和标签

具有ListView和BusyIndicator控件和计算机视觉API。


第4部分
增强UI和评级

具有自动完成和评级控件。


第5部分
按日期排序和选择图像

具有日历和TabView控件。


第6部分
收尾工作

具有测量和图表控制。


Baidu
map