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

最新推荐文章于 2024-08-13 20:32:39 发布

dearsj001

最新推荐文章于 2024-08-13 20:32:39 发布

阅读量351

点赞数 2

文章标签： windows phone blend silverlight object express application

本文链接：https://blog.csdn.net/dearsj001/article/details/6118721

版权

写在最前

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

有关Windows Phone 7的控件

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

导入元素，生成控件

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

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

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

打开Visual Studio 2010 Express for Windows Phone，新建项目，选择Windows Phone Application，如下图所示：

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

修改代码，实现逻辑

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

 
     01namespace WPMind.WP7.Controls 
 
     02{ 
 
     03    public partial class BubbleControl : UserControl 
 
     04    { 
 
     05        public BubbleControl() 
 
     06        { 
 
     07            // 为初始化变量所必需 
 
     08            InitializeComponent(); 
 
     09        } 
 
     10  
 
     11        //更新气泡的位置 
 
     12        public void UpdatePosition(Point currentTransform) 
 
     13        { 
 
     14            var top = Canvas.GetTop(this); 
 
     15            var left = Canvas.GetLeft(this); 
 
     16  
 
     17            Canvas.SetTop(this, top - 5.0d + (currentTransform.Y * 0.1d)); 
 
     18            Canvas.SetLeft(this, left + (currentTransform.X * 0.1d)); 
 
     19        } 
 
     20  
 
     21        //判断气泡是否超出Canvas 
 
     22        public bool IsOutOfBounds(double width, double height) 
 
     23        { 
 
     24            var left = Canvas.GetLeft(this); 
 
     25            var top = Canvas.GetTop(this); 
 
     26  
 
     27            if (left < -ActualWidth) 
 
     28                return true; 
 
     29  
 
     30            if (left > width + ActualWidth) 
 
     31                return true; 
 
     32  
 
     33            if (top < -ActualHeight) 
 
     34                return true; 
 
     35  
 
     36            return false; 
 
     37        } 
 
     38    } 
 
     39}

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

 
    01public MainPage() 
 
    02{ 
 
    03    InitializeComponent(); 
 
    04 
 
    05    Loaded += OnLoaded; 
 
    06    timer.Tick += OnTimerTicker; 
 
    07} 
 
    08 
 
    09private void OnLoaded(object sender, RoutedEventArgs e) 
 
    10{ 
 
    11    CreateInitialBubbles(); 
 
    12 
 
    13    timer.Start(); 
 
    14} 
 
    15 
 
    16//生成初始的气泡 
 
    17private void CreateInitialBubbles() 
 
    18{ 
 
    19    for (int i = 0; i < 25; i++) 
 
    20    { 
 
    21        var left = random.NextDouble() * ContentCanvas.ActualWidth; 
 
    22        var top = random.NextDouble() * ContentCanvas.ActualHeight; 
 
    23        var size = random.Next(10, 50); 
 
    24 
 
    25        CreateBubble(left, top, size); 
 
    26    } 
 
    27} 
 
    28 
 
    29private void CreateBubble(double left, double top, double size) 
 
    30{ 
 
    31    var bubblecontrol = new BubbleControl 
 
    32    { 
 
    33        Width = size, 
 
    34        Height = size 
 
    35    }; 
 
    36 
 
    37    Canvas.SetLeft(bubblecontrol, left); 
 
    38    Canvas.SetTop(bubblecontrol, top); 
 
    39 
 
    40    ContentCanvas.Children.Add(bubblecontrol); 
 
    41}

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

 
    01private void OnTimerTicker(object sender, EventArgs e) 
 
    02{ 
 
    03    var bubblecontrols = ContentCanvas.Children.OfType<BUBBLECONTROL>().ToList(); 
 
    04 
 
    05    foreach (var bubblecontrol in bubblecontrols) 
 
    06    { 
 
    07        bubblecontrol.UpdatePosition(currentTransform); 
 
    08 
 
    09        if (bubblecontrol.IsOutOfBounds(ActualWidth, ActualHeight)) 
 
    10        { 
 
    11            ContentCanvas.Children.Remove(bubblecontrol); 
 
    12            AddNewbubblecontrol(); 
 
    13        } 
 
    14 
 
    15        currentTransform.X = currentTransform.X * 0.999d; 
 
    16        currentTransform.Y = currentTransform.Y * 0.999d; 
 
    17    } 
 
    18} 
 
    19 
 
    20private void AddNewbubblecontrol() 
 
    21{ 
 
    22    var left = random.NextDouble() * ContentCanvas.ActualWidth; 
 
    23    var size = random.Next(10, 50); 
 
    24 
 
    25    CreateBubble(left, ContentCanvas.ActualHeight, size); 
 
    26}

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

 
    1protected void OnManipulationDelta(object sender, ManipulationDeltaEventArgs e) 
 
    2{ 
 
    3    currentTransform = e.CumulativeManipulation.Translation; 
 
    4}