創建Windows Phone 7自定義控件

作者: 施炯來源: 博客園發布時間: 2011-01-07 10:20 閱讀: 1746 次推薦: 0 原文鏈接 [收藏]

　　寫在最前

前段時間報名參加了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用來判斷氣泡是否已經超越了屏幕。

namespace WPMind.WP7.Controls
{
	public partial class BubbleControl : UserControl
	{
		public BubbleControl()
		{
			// 為初始化變量所必需
			InitializeComponent();
		}

        //更新氣泡的位置
        public void UpdatePosition(Point currentTransform)
        {
            var top = Canvas.GetTop(this);
            var left = Canvas.GetLeft(this);

            Canvas.SetTop(this, top - 5.0d + (currentTransform.Y * 0.1d));
            Canvas.SetLeft(this, left + (currentTransform.X * 0.1d));
        }

        //判斷氣泡是否超出Canvas
        public bool IsOutOfBounds(double width, double height)
        {
            var left = Canvas.GetLeft(this);
            var top = Canvas.GetTop(this);

            if (left < -ActualWidth)
                return true;

            if (left > width + ActualWidth)
                return true;

            if (top < -ActualHeight)
                return true;

            return false;
        }
	}
}

在Demo頁面中，我們首先生成25個位置隨機、大小隨機的氣泡，然后開啟定時器，溢出時間是50ms：

        public MainPage()
        {
            InitializeComponent();

            Loaded += OnLoaded;
            timer.Tick += OnTimerTicker;
        }

        private void OnLoaded(object sender, RoutedEventArgs e)
        {
            CreateInitialBubbles();

            timer.Start();
        }

        //生成初始的氣泡
        private void CreateInitialBubbles()
        {
            for (int i = 0; i < 25; i++)
            {
                var left = random.NextDouble() * ContentCanvas.ActualWidth;
                var top = random.NextDouble() * ContentCanvas.ActualHeight;
                var size = random.Next(10, 50);

                CreateBubble(left, top, size);
            }
        }

        private void CreateBubble(double left, double top, double size)
        {
            var bubblecontrol = new BubbleControl
            {
                Width = size,
                Height = size
            };

            Canvas.SetLeft(bubblecontrol, left);
            Canvas.SetTop(bubblecontrol, top);

            ContentCanvas.Children.Add(bubblecontrol);
        }

在定時器超時處理中，遍歷所有氣泡，更新其位置。然后判斷它是否越界，如果越界就移除，并添加一個新的氣泡進來。

        private void OnTimerTicker(object sender, EventArgs e)
        {
            var bubblecontrols = ContentCanvas.Children.OfType().ToList();

            foreach (var bubblecontrol in bubblecontrols)
            {
                bubblecontrol.UpdatePosition(currentTransform);

                if (bubblecontrol.IsOutOfBounds(ActualWidth, ActualHeight))
                {
                    ContentCanvas.Children.Remove(bubblecontrol);
                    AddNewbubblecontrol();
                }

                currentTransform.X = currentTransform.X * 0.999d;
                currentTransform.Y = currentTransform.Y * 0.999d;
            }
        }

        private void AddNewbubblecontrol()
        {
            var left = random.NextDouble() * ContentCanvas.ActualWidth;
            var size = random.Next(10, 50);

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

這里設氣泡的浮力是個常數值，水流方向受用戶控制，即用戶手指拖拽的方向，就是水流的方向。根據這個需求，我們可以使用Manipulation 事件，每個UI包含三個事件：ManipulationStarted、 ManipulationDelta 和 ManipulationCompleted，這里考慮到應用程序只需要對用戶的拖拽做出反應，我們就選擇ManipulationDelta。

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

最后，給出程序的截屏：