你拍的照片越多,就越难找到你想要的照片。Xamarin Calendar控件的Telerik UI具有灵活的样式、约会支持和完整的数据绑定支持。开发人员可以轻松地将Calendar绑定到图像列表,公开标记图像的日期,并按日、周、月或年显示它们。
日历中包含的信息通常以不同于其他类型的数据的方式呈现。日历上的项目不仅与特定的时间框架相关联,还经常根据其他属性进行颜色编码和格式化。为了简化管理列表或日历项的集合,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}"
作为一名移动开发人员,你面临的最大挑战之一是确保你的用户界面在不同平台上看起来一致,并且它符合主机操作系统的标准和期望。例如,在iOS设备上,日历呈现略有不同,他们使用圆形而不是矩形来表示所选日期。Xamarin控件的所有Telerik UI都在底层发出本地控件,Calendar控件也不例外。
移动设备上缺乏屏幕空间意味着用于显示当前选定日期的日历项列表的空间有限。这为我们提供了一个很好的机会列表视图控件的日历控件,并使用它列出在特定日期上传和标记的所有照片。
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返回的强调色。
点击ListView中的一个项目,将转到该图像的图像详细信息页面,使用户能够快速轻松地查看图像和与之相关的元数据。