×
Namespaces

Variants
Actions

Telerik RadControls使用例子 DataBoundListBox和RadSlideView

From Nokia Developer Wiki
Jump to: navigation, search

诺基亚为我们提供了一个由保加利亚的Telerik公司开发的RadControls for Windows Phone 的控件库实际项目应用例子

WP Metro Icon UI.png
WP Metro Icon Tools.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
Article Metadata

兼容于
文章
leonard.jonah 在 29 Aug 2013 创建
最后由 hamishwillee 在 11 Sep 2013 编辑

Introduction

最近我们在开发一款壁纸类的应用,在这款应用中需要展示海量的图片(如图1所示)、需要给用户以柔和的交互(如图2所示) 、需要加入炫酷的动画效果(如图3所示)、需要像系统相册一样平滑流畅地浏览图片(如图4所示)。在开发过程中,我们使用Silverlight Controls Toolkit For Windows Phone 的Wrappanel 替换 listbox的itemspanel模板,但是因此就会导致listbox的虚拟化功能消失、内存暴涨、最后奔溃。后来我们也有通过更换数据绑定的方式来避免这个问题,但是listbox Item项的加载动画及下拉加载更多的功能都不太好处理。除此之外,大图的预览功能也让我们头疼,我们使用pivot来动态加载图片显示,不过限于pivot的特点在左右滑动时的用户体验非常的糟糕…这些问题的出现都让整个项目的开发陷入了困境。 File:Appdemo 2.jpg

庆幸的是诺基亚为我们提供了一个由保加利亚的Telerik公司开发的RadControls for Windows Phone 的控件库。Telerik是一家专门为微软主流开发平台提供高性能UI控件和组件的领先提供商。RadControls for Windows Phone是其中一款专门为Windows Phone 平台开发的控件库,里面包含了超过45款的高性能控件、超过50款的高质量设计模板。 在这里特别要提到就是DataBoundListBox和RadSlideView。 DataBoundListBox 提供了非常强大的数据绑定功能——除了保留Silverlight Controls Toolkit For Windows Phone 的Wrappanel 的功能外,还保留了原生listbox的虚拟化能力,无论怎样对UI进行布局、无论数据量有多大,DataBoundListBox都能近乎完美的展现我们想要的数据。DataBoundListBox还提供了很多酷炫的加载动画模版,这点在交互上做得非常好!在程序还在请求数据、数据加载时都能给用户良好的视觉体验。 RadSlideView则提供了像系统相册一般浏览图片的能力。左右滑动的平滑与顺畅、大小的自如缩放都能让用户体验提升到一个新的高度。

在我们的项目中使用了这个控件库之后,之前的问题都得到了很好得解决。特别是模仿系统相册的图片浏览功能,使用起来有种有过之而无不及的感觉。 这里我们主要简单介绍RadSlideView的使用。 首先在XAML页面进行如下布局

<telerikPrimitives:RadSlideView x:Name="slideView1" IsLoopingEnabled="False" TransitionMode="Slide" IsFilmstripModeEnabled="True" >
<telerikPrimitives:RadSlideView.ItemTemplate>
<DataTemplate>
<Grid Width="480" Height="800" >
<telerikPrimitivesSlideView:PanAndZoomImage Source="{Binding SmallImgUri}" />
<telerikPrimitivesSlideView:PanAndZoomImage Source="{Binding BigImgUri}" />
</Grid>
</DataTemplate>
</telerikPrimitives:RadSlideView.ItemTemplate>
</telerikPrimitives:RadSlideView>

PanAndZoomImage 是一个能进行缩放的图片控件,分别绑定的是小图片和大图片的地址。这里我们要让小图片在下,大图片在上,目的是为了在大图片还没加载完成之前先显示小图片。 在cs页面的构造函数中,我们要指定slideView1的绑定对象。

List<string> currentList = new List<string>();
public ViewPage()
{
InitializeComponent();
 
this.slideView.ItemsSource = currentList;
}

同时,在页面的Loaded事件中为currentList赋值

void ViewPage_Loaded(object sender, RoutedEventArgs e)
{
for (int i = 0; i < 10; i++)
{
currentList.Add("/Assets/images/" + i + ".jpg");
}
}

运行的效果如下图所示

(it seems i can not insert the image here :) can anyone help me?) [--hamishwillee : Yes, see how I did it above or add comment explaining problem]

Summary

以上只是我们使用Rad Controls的一个案例,其中还有非常多其他的例子和功能可以套用,我们在后续会做继续分享。各位可以根据我们提供的例子做一些举一反三或做一些探讨和反馈。

This page was last modified on 11 September 2013, at 06:33.
138 page views in the last 30 days.