Geek Answers Handbook

How to draw on screen for Metro Metro apps in C #?

I just want the user to be able to draw on the screen with some kind of pointer.

I already have code that fixes the position of the pointer, but I can’t figure out how to place pixels or shapes or something else on the screen.

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

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

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

And that is what I still have.

Part of the drawing:

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, material 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;
+7
source share
5 answers

Short form:

  • Add Line and Rectangle to the panel
  • Manipulate a bitmap directly
  • Use the HTML5 Canvas Element in a JavaScript / HTML Project
  • Write everything in C ++ / DirectX

There is no way in Metro / XAML to override the OnRender() method or the like. Your options are to add existing graphic elements (for example, from the Shapes namespace ) to the canvas or another panel or directly manipulate the pixels in the bitmap and click on that bitmap in the image element.

Metro / C # has a graphic drawing in saved mode, which means that the only thing it will display is objects that have been added to the view hierarchy. What you are looking for is an instant mode graphic, for example

 myCanvas.DrawLine( fromPoint, toPoint );

This can be done in a JavaScript / HTML project using the HTML5 Canvas object . Unfortunately, this is how I lean toward such a project. Unfortunately, Microsoft does not provide an immediate mode element for XAML projects, but as it is. C ++ / DirectX is also an option for creating a custom drawing, but requires a substantial alteration of everything else that you do in the application.

+6
source

Here is a great code example on how to do this using XAML forms.

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

+2
source

You must add a Line to a user interface element, such as a canvas.

0
source

The main problem in your code is that you are not attaching a string to any XAML element, I suggest you do it with a Canvas element that is less like this:

 newCanvas.Children.Add(line);

An alternative is to use a library of modern components , it works on WinRT, uses the .NET Graphics class, for example, calls, and draws directly on the XAML Canvas, note that if you want to save the image as a bitmap, you may also need WritableBitmapEx , since XAML Canvas cannot be mapped to bitmaps.

0
source

This example project has code for drawing on the screen for applications that support Win 8 in C # / XAML:

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

Here is the corresponding C # file:

 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) { } }

}

and xaml file:

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

In the current state, it only handles input for a pen or mouse, but I also got it to work when touched with only minor changes.

0
source

More articles:


All Articles