Windows Phone 7 小畫家

  • 3723
  • 0

Windows Phone 7 小畫家

在Windows Phone 7 可以使用下列程式碼在 InkPresenter 上收集並顯示資料做一簡單的小畫家,下面範例當然也可做一個拍照後塗鴨應用程式。可以參考InkPresenter (Silverlight)

1.Visual Studio 2010 –> New Project –> Silverlight for Windows Phone –> Windows Phone Application

image

2. InkPresenter 項目提供用來支援筆墨功能的繪圖介面。InkPresenter 衍生自 Canvas,可以顯示一個或多個 UIElement 物件和一個 StrokeCollection。每個 Stroke 都對應至手寫筆下移、手寫筆移動和手寫筆上移的順序。Stroke 可以是點、直線或曲線。每個 Stroke 都包含 StylusPointCollection 物件,其中包含個別 StylusPoint 物件。當手寫筆處於與數位板連線狀態而移動時,會收集 StylusPoint 物件。Stroke 也具有特性,例如高度、寬度、色彩和外框色彩,所有這些都包含在 DrawingAttributes 類別中。首先在MainPage Class加入下面三個公共變數。

       InkPresenter ink;
       Stroke stroke;
       Color color = Colors.Black;

3.在MainPage()初始化函式加入下列變數初始值

           ink = new InkPresenter();
           ink.MouseMove += new MouseEventHandler(ink_MouseMove);
           ink.MouseLeftButtonUp += new MouseButtonEventHandler(ink_MouseLeftButtonUp);
           ink.LostMouseCapture += new MouseEventHandler(ink_LostMouseCapture);
           ink.Background = new System.Windows.Media.SolidColorBrush(Colors.White);
           this.ContentPanel.Children.Add(ink);

4. ink變數加入三個事件來處理收集到筆墨及顯示筆墨,當 InkPresenter 項目收到 MouseLeftButtonDown 事件時,會建立新的 Stroke 物件並加入至 InkPresenter 項目的 StrokeCollection 物件。當手寫筆處於與螢幕連線狀態而移動時,會呼叫 MouseMove 事件,並收集 StylusPoint 物件且加入至該 Stroke。當 LostMouseCapture 事件引發時,建立的 Stroke 就會完成。

       void ink_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
      {
          ink.CaptureMouse();
          StylusPointCollection MyStylusPointCollection = new StylusPointCollection();
          MyStylusPointCollection.Add(e.StylusDevice.GetStylusPoints(ink));
         stroke = new Stroke(MyStylusPointCollection);
         stroke.DrawingAttributes.Color = color;
         ink.Strokes.Add(stroke);
      }
      void ink_MouseMove(object sender, MouseEventArgs e)
      {
          if (stroke != null)
              stroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(ink));

      }

void ink_LostMouseCapture(object sender, MouseEventArgs e)
      {
          stroke = null;
      }

5.加入二個ApplicationBarIconButton第一個為還原將剛才所畫的筆墨清楚,第二個為清除整個筆墨

private void ApplicationBarIconButton_Click(object sender, EventArgs e)
        {
            if (ink.Strokes.Count >0)
            ink.Strokes.RemoveAt(ink.Strokes.Count - 1);

        }

        private void ApplicationBarIconButton_Click_1(object sender, EventArgs e)
        {
            ink.Strokes.Clear();
        }

6.在MainPage界面設計畫面加入四個ApplicationBarMenuItem,打上四個顏色名稱在把每個Item事件指向ApplicationBarMenuItem_Click,來指定筆墨使用什麼樣顏色

private void ApplicationBarMenuItem_Click(object sender, EventArgs e)
        {
            switch ((sender as ApplicationBarMenuItem).Text)
            {
                case "黑色":
                    color = Colors.Black;
                    break;
                case "藍色":
                    color = Colors.Blue;
                    break;
                case "紅色":
                    color = Colors.Red;
                    break;
                case "黃色":
                    color = Colors.Yellow;
                    break;
            }
        }

7.執行此範例如下:

image image image

 

程式碼下載