How to draw on screen for Windows Metro Style Apps in C#?

Question

I simply want the user to be able to draw on the screen with some sort of pointer.

I already have the code working that captures the pointer's position, but I can't figure out how to place the pixels or shapes or whatever onto the screen.

I found this useful tutorial:
http://www.dotnetspeaks.com/DisplayArticle.aspx?ID=137

And I've been looking at the documentation here:
http://msdn.microsoft.com/en-us/library/windows/apps/hh465055(v=VS.85).aspx

No luck so far. =( The tutorial is for Windows Phone 7, so it's a little bit different. =\ Help, please? =)

And this is what I have so far.

The drawing part:

    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?? ////

        }

    }

For reference, stuff elsewhere in the code:

    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

Short form:

• Add Lines and Rectangles to a panel
• Manipulate a bitmap directly
• Use an HTML5 Canvas element in a JavaScript/HTML project
• Write the whole thing in C++/DirectX

There is no way in Metro/XAML to override an OnRender() method or the like. Your options are to add existing graphical elements (eg from the Shapes namespace) to a Canvas or other Panel, or to directly manipulate the pixels in a bitmap and push that bitmap into an Image element.

Metro/C# only has retained-mode graphics drawing, which means the only thing it will render is objects that have been added to the view hierarchy. What you're looking for is some kind of immediate-mode graphics drawing, eg

myCanvas.DrawLine( fromPoint, toPoint );

This can be done in a JavaScript/HTML project using HTML5's Canvas object. Which, sadly, is the way I'm leaning for such a project. It's unfortunate that Microsoft is not providing an immediate-mode element for XAML projects but that's the way it is. C++/DirectX is also an option for doing custom drawing but requires a substantial reworking of everything else that you're doing in the app.