您的位置：首页 > 其它

How-to: 创建Windows Phone 7自定义控件

2011-01-05 20:01 288 查看

写在最前

前段时间报名参加了WPMind发起的一个针对WindowsPhone7的开源项目“WPMindWindowsPhone7Framework”，最近抽空研究了一个实现比较简单的控件-BubbleControl。本人以前做WindowsMobile平台比较多，WP7平台上Silverlight是两个主流技术之一，因此也是现学现用，文章中有不对的地方还请大家指正。当然，不管难以与否，写这篇文章的目的就是为了和大家分享WindowsPhone7控件的制作心得，下面切入正题。

有关WindowsPhone7的控件

提到WindowsPhone7的控件，大家最熟悉的应该就是SilverlightforWindowsPhone7，它为我们提供了丰富的控件，包括AutoCompleteBox、ListPicker、LongListSelector、PageTransitions、GestureListener、ContextMenu、DatePicker、TimePicker、ToggleSwitch、WrapPanel等等，在金山崟霸的BLog中已经给予了详细的介绍，这里就不再赘述了。那么我们自己如何来动手制作控件呢？目前来讲，有两种途径，一种是在VisualStudio下面，一种是在ExpressionBlend下面。在VisualStudio中，我们可以通过项目右键添加控件，选择WindowsPhoneUserControl，如下图所示：

导入元素，生成控件

在ExpressionBlend下面，我们可以自己画控件的UI，也可以直接利用现有的成果，比如说是Photoshop的文件或者是Illustrator文件，通过ExpressionBlend直接导入，如下图所示：

在文件导入后，选中一个需要的资源，在其右键中选择“构成UserControl”，如下图所示：

将资源的名称命名为“BubbleControl”，这样，就在解决方案中生成了“BubbleControl.xaml”和“BubbleControl.xaml.cs”这两个文件，如下图所示：

打开VisualStudio2010ExpressforWindowsPhone，新建项目，选择WindowsPhoneApplication，如下图所示：

将ExpressionBlend项目下的BubbleControl.xaml”和“BubbleControl.xaml.cs”文件拷贝到VisualStudio2010项目下，并且添加到项目中，如下图所示：

修改代码，实现逻辑

在“BubbleControl.xaml.cs”文件中，我们添加两个方法：UpdatePosition和IsOutOfBounds。UpdatePosition方法根据气泡的浮力和水流方向，更新界面。IsOutOfBounds用来判断气泡是否已经超越了屏幕。

viewsource

print?

01	namespace WPMind.WP7.Controls

03	public partial class BubbleControl:UserControl

05	public BubbleControl()

07	//为初始化变量所必需

08	InitializeComponent();

//更新气泡的位置

12	public void UpdatePosition(PointcurrentTransform)

14	vartop=Canvas.GetTop( this );

15	varleft=Canvas.GetLeft( this );

17	Canvas.SetTop( this ,top-5.0d+(currentTransform.Y*0.1d));

18	Canvas.SetLeft( this ,left+(currentTransform.X*0.1d));

21	//判断气泡是否超出Canvas

22	public bool IsOutOfBounds( double width, double height)

24	varleft=Canvas.GetLeft( this );

25	vartop=Canvas.GetTop( this );

27	if (left<-ActualWidth)

28	return true ;

30	if (left>width+ActualWidth)

31	return true ;

33	if (top<-ActualHeight)

34	return true ;

36	return false ;

在Demo页面中，我们首先生成25个位置随机、大小随机的气泡，然后开启定时器，溢出时间是50ms：

viewsource

print?

01	public MainPage()

03	InitializeComponent();

05	Loaded+=OnLoaded;

06	timer.Tick+=OnTimerTicker;

09	private void OnLoaded( object sender,RoutedEventArgse)

11	CreateInitialBubbles();

13	timer.Start();

//生成初始的气泡

17	private void CreateInitialBubbles()

19	for ( int i=0;i<25;i++)

21	varleft=random.NextDouble()*ContentCanvas.ActualWidth;

22	vartop=random.NextDouble()*ContentCanvas.ActualHeight;

23	varsize=random.Next(10,50);

25	CreateBubble(left,top,size);

29	private void CreateBubble( double left, double top, double size)

31	varbubblecontrol= new BubbleControl

33	Width=size,

34	Height=size

};

37	Canvas.SetLeft(bubblecontrol,left);

38	Canvas.SetTop(bubblecontrol,top);

40	ContentCanvas.Children.Add(bubblecontrol);

在定时器超时处理中，遍历所有气泡，更新其位置。然后判断它是否越界，如果越界就移除，并添加一个新的气泡进来。

viewsource

print?

01	private void OnTimerTicker( object sender,EventArgse)

03	varbubblecontrols=ContentCanvas.Children.OfType<BUBBLECONTROL>().ToList();

05	foreach (varbubblecontrol in bubblecontrols)

07	bubblecontrol.UpdatePosition(currentTransform);

09	if (bubblecontrol.IsOutOfBounds(ActualWidth,ActualHeight))

11	ContentCanvas.Children.Remove(bubblecontrol);

12	AddNewbubblecontrol();

15	currentTransform.X=currentTransform.X*0.999d;

16	currentTransform.Y=currentTransform.Y*0.999d;

20	private void AddNewbubblecontrol()

22	varleft=random.NextDouble()*ContentCanvas.ActualWidth;

23	varsize=random.Next(10,50);

25	CreateBubble(left,ContentCanvas.ActualHeight,size);

这里设气泡的浮力是个常数值，水流方向受用户控制，即用户手指拖拽的方向，就是水流的方向。根据这个需求，我们可以使用Manipulation事件，每个UI包含三个事件：ManipulationStarted、ManipulationDelta和ManipulationCompleted，这里考虑到应用程序只需要对用户的拖拽做出反应，我们就选择ManipulationDelta。

viewsource

print?

1	protected void OnManipulationDelta( object sender,ManipulationDeltaEventArgse)

3	currentTransform=e.CumulativeManipulation.Translation;

最后，给出程序的截屏：

程序源代码下载:BubbleDemo.rar

程序运行效果视频：http://v.youku.com/v_show/id_XMjM0Nzg5MzUy.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航