Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Telerik RadControls使用例子 DataBoundListBox和RadSlideView

From 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 03:33.
325 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×