如何在C＃中使用Windows Metro風格應用程序的屏幕？

Question

我只是希望用戶能夠用某種指針在屏幕上繪圖。

我已經有代碼工作捕捉指針的位置，但我無法弄清楚如何將像素或形狀或任何東西放在屏幕上。

我發現這個有用的教程：
http://www.dotnetspeaks.com/DisplayArticle.aspx?ID=137

而且我在這裏的文件一直在尋找：
http://msdn.microsoft.com/en-us/library/windows/apps/hh465055(v=VS.85).aspx

至今沒有運氣。 =（這個教程是針對Windows Phone 7的，所以它有點不同。= \ Help，please？=）

這就是我到目前爲止所做的。

拱起部：

private void Image_PointerPressed(object sender, PointerEventArgs e) 
    { 
     Debug.WriteLine("Image_PointerPressed"); 
     isTracing = true; 
    } 

    private void Image_PointerReleased(object sender, PointerEventArgs e) 
    { 
     Debug.WriteLine("Image_PointerReleased"); 
     isTracing = false; 
    } 

    private void Image_PointerMoved(object sender, PointerEventArgs e) 
    { 
     Debug.WriteLine("Image_PointerMoved"); 
     Debug.WriteLine(e.GetCurrentPoint(this).Position); 
     if (isTracing) 
     { 
      Debug.WriteLine("isTracing"); 

      Point pos = e.GetCurrentPoint(this).Position; 
      Color color = Colors.Green; 
      Line line = new Line() { X1 = pos.X, X2 = pos.X + 1, Y1 = pos.Y, Y2 = pos.Y + 1 }; 
      line.Stroke = new SolidColorBrush(color); 
      line.StrokeThickness = 15; 
      //// So how do I draw this line onto the screen?? //// 

     } 

    } 

僅供參考，東西在代碼的其他地方：

 

    using System; 
    using System.Collections.Generic; 
    using System.Diagnostics; 
    using System.IO; 
    using System.Linq; 
    using System.Threading.Tasks; 
    using Multimedia.FFmpeg; 
    using Windows.Foundation; 
    using Windows.Storage; 
    using Windows.Storage.Pickers; 
    using Windows.Storage.Streams; 
    using Windows.UI.Xaml; 
    using Windows.UI.Xaml.Controls; 
    using Windows.UI.Xaml.Shapes; 
    using Windows.UI.Xaml.Media; 
    using Windows.UI.Xaml.Input; 
    using Windows.UI.Input; 

    bool isTracing = false; 

Answer 1

簡稱：

• 添加Line S和Rectangle秒至面板
• 操作Bitmap直接
• 使用在JavaScript/HTML項目的HTML5 Canvas元素
• 寫了整個事情在C++/DirectX中

Metro/XAML沒有辦法覆蓋OnRender()方法等。您的選擇是將現有的圖形元素（例如從Shapes namespace）添加到Canvas或其他面板，或者直接操作位圖中的像素並將該位圖推送到Image元素中。

Metro/C＃只有保留模式的圖形繪製，這意味着它將呈現的唯一東西是已添加到視圖層次結構中的對象。什麼你要找的是某種直接模式圖形繪製，例如

myCanvas.DrawLine(fromPoint, toPoint); 

這可以使用HTML5's Canvas object一個JavaScript/HTML項目來完成。不幸的是，我正在爲這樣一個項目傾斜。不幸的是，微軟並沒有爲XAML項目提供即時模式元素，但事實就是如此。 C++/DirectX也是進行自定義繪圖的選項，但需要對應用中正在執行的其他任何操作進行大量重新設計。

Answer 2

您應該添加行至UI元素，如畫布。

Answer 3

這是一個很好的代碼示例，介紹如何使用XAML形狀執行此操作。

http://www.codeproject.com/Articles/416878/Metro-Paint

Answer 4

在你的代碼的主要問題是，你不重視，行至任何XAML元素我建議你把它做一個Canvas元素，更像是這少：

newCanvas.Children.Add(line); 

另一種方法是使用Modern Components Drawing Library，它在WinRT上工作，使用.NET Graphics類如調用並直接在XAML Canvas上繪製，請注意，如果要將圖像保存爲位圖，則可能還需要使用WritableBitmapEx，因爲XAML Canvas無法呈現到位圖。

Answer 5

此示例項目具有代碼在C＃/ XAML在屏幕上繪製爲Win 8 Store應用程序：

http://code.msdn.microsoft.com/windowsapps/Drawing-on-a-Canvas-with-33510ae6

下面是相關C＃文件：

using System; 
using System.Collections.Generic; 
using System.IO; 
using System.Linq; 
using Windows.Devices.Input; 
using Windows.Foundation; 
using Windows.Foundation.Collections; 
using Windows.UI; 
using Windows.UI.Input; 
using Windows.UI.Input.Inking; //we need to add this name space in order to have many functions 
using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
using Windows.UI.Xaml.Controls.Primitives; 
using Windows.UI.Xaml.Data; 
using Windows.UI.Xaml.Input; 
using Windows.UI.Xaml.Media; 
using Windows.UI.Xaml.Navigation; 
using Windows.UI.Xaml.Shapes; 
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238 

namespace DrawingOnCanvasWithInkPen 
{ 
/// <summary> 
/// An empty page that can be used on its own or navigated to within a Frame. 
/// </summary> 
public sealed partial class MainPage : Page 
{ 
    InkManager _inkKhaled = new Windows.UI.Input.Inking.InkManager(); 
    private uint _penID; 
    private uint _touchID; 
    private Point _previousContactPt; 
    private Point currentContactPt; 
    private double x1; 
    private double y1; 
    private double x2; 
    private double y2; 


    public MainPage() 
    { 
     this.InitializeComponent(); 

     MyCanvas.PointerPressed += new PointerEventHandler(MyCanvas_PointerPressed); 
     MyCanvas.PointerMoved += new PointerEventHandler(MyCanvas_PointerMoved); 
     MyCanvas.PointerReleased += new PointerEventHandler(MyCanvas_PointerReleased); 
     MyCanvas.PointerExited += new PointerEventHandler(MyCanvas_PointerReleased); 
    } 


    #region PointerEvents 
    private void MyCanvas_PointerReleased(object sender, PointerRoutedEventArgs e) 
    { 
     if (e.Pointer.PointerId == _penID) 
     { 
      Windows.UI.Input.PointerPoint pt = e.GetCurrentPoint(MyCanvas); 

      // Pass the pointer information to the InkManager. 
      _inkKhaled.ProcessPointerUp(pt); 
     } 

     else if (e.Pointer.PointerId == _touchID) 
     { 
      // Process touch input 
     } 

     _touchID = 0; 
     _penID = 0; 

     // Call an application-defined function to render the ink strokes. 


     e.Handled = true; 
    } 

    private void MyCanvas_PointerMoved(object sender, PointerRoutedEventArgs e) 
    { 
     if (e.Pointer.PointerId == _penID) 
     { 
      PointerPoint pt = e.GetCurrentPoint(MyCanvas); 

      // Render a red line on the canvas as the pointer moves. 
      // Distance() is an application-defined function that tests 
      // whether the pointer has moved far enough to justify 
      // drawing a new line. 
      currentContactPt = pt.Position; 
      x1 = _previousContactPt.X; 
      y1 = _previousContactPt.Y; 
      x2 = currentContactPt.X; 
      y2 = currentContactPt.Y; 

      if (Distance(x1, y1, x2, y2) > 2.0) // We need to developp this method now 
      { 
       Line line = new Line() 
       { 
        X1 = x1, 
        Y1 = y1, 
        X2 = x2, 
        Y2 = y2, 
        StrokeThickness = 4.0, 
        Stroke = new SolidColorBrush(Colors.Green) 
       }; 

       _previousContactPt = currentContactPt; 

       // Draw the line on the canvas by adding the Line object as 
       // a child of the Canvas object. 
       MyCanvas.Children.Add(line); 

       // Pass the pointer information to the InkManager. 
       _inkKhaled.ProcessPointerUpdate(pt); 
      } 
     } 

     else if (e.Pointer.PointerId == _touchID) 
     { 
      // Process touch input 
     } 

    } 

    private double Distance(double x1, double y1, double x2, double y2) 
    { 
     double d = 0; 
     d = Math.Sqrt(Math.Pow((x2 - x1), 2) + Math.Pow((y2 - y1), 2)); 
     return d; 
    } 

    private void MyCanvas_PointerPressed(object sender, PointerRoutedEventArgs e) 
    { 
     // Get information about the pointer location. 
     PointerPoint pt = e.GetCurrentPoint(MyCanvas); 
     _previousContactPt = pt.Position; 

     // Accept input only from a pen or mouse with the left button pressed. 
     PointerDeviceType pointerDevType = e.Pointer.PointerDeviceType; 
     if (pointerDevType == PointerDeviceType.Pen || 
       pointerDevType == PointerDeviceType.Mouse && 
       pt.Properties.IsLeftButtonPressed) 
     { 
      // Pass the pointer information to the InkManager. 
      _inkKhaled.ProcessPointerDown(pt); 
      _penID = pt.PointerId; 

      e.Handled = true; 
     } 

     else if (pointerDevType == PointerDeviceType.Touch) 
     { 
      // Process touch input 
     } 
    } 

    #endregion 

    /// <summary> 
    /// Invoked when this page is about to be displayed in a Frame. 
    /// </summary> 
    /// <param name="e">Event data that describes how this page was reached. The Parameter 
    /// property is typically used to configure the page.</param> 
    protected override void OnNavigatedTo(NavigationEventArgs e) 
    { 
    } 
} 

}

和XAML文件：

<Page 

x:Class="DrawingOnCanvasWithInkPen.MainPage" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="using:DrawingOnCanvasWithInkPen" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d"> 

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> 
    <Canvas Name="MyCanvas" Background="White" HorizontalAlignment="Left" Height="513" Margin="83,102,0,0" VerticalAlignment="Top" Width="1056"/> 

</Grid> 

在目前的狀態下，它只處理筆或鼠標輸入 - 但我也只是稍作修改就可以使用它。