Click here to Skip to main content
11,566,149 members (49,860 online)
Click here to Skip to main content

Metro Paint

, 6 Nov 2013 CPOL 53.9K 5.3K 49
Rate this:
Please Sign up or sign in to vote.
A Metro style app for basic drawing feature.

Introduction

This Metro style application is for drawing basic shapes like line, rectangle, circle, ellipse, free hand shapes, eraser, and clear screen. It also provides a feature to choose stroke thickness, border color, fill color, and handwriting recognition. It allows to save the recognized text as a text file and only ink strokes can be saved as image. It is in the initial version so there are some limitations like saving a whole drawing as image, resizing and moving of the drawn components, etc. 

Using the Code

Basically, this app uses the Windows.UI.Xaml.Shapes namespace and pointer events as there are no mouse events. Here all the drawing features are done with the PointerMoved, PointerReleased, and PointerPressed events. All the drawing is done onto the canvas.

For selection of drawing tools I have used switch case. The tools are basically buttons and the icons used are just "Segoe UI Symbol" fonts. I have used a character map for getting the desired icons.

For drawing the components in the PointerPressed event the current co-ordinates are saved and then after the PointerMoved event, the second co-ordinates are saved. These co-ordinates can be directly used for line drawing but for another shape, I am getting the height and width by difference of the co-ordinates. The free hand drawing tool just adds the points coming in the path during the PointerPressed event. The metro app can't be closed programmatically so the close button will suspend the app and after some time the Task Manager will kill the app to free the resources.

The color combo box is filled programmatically. The code snippet is given below: 

var colors = typeof(Colors).GetTypeInfo().DeclaredProperties;
foreach (var item in colors)
{
    cbBorderColor.Items.Add(item);
    cbFillColor.Items.Add(item);
}

Since in WinRT there is no rendering method, it is not possible to save the drawn object as an image. Moreover, AdornerDecorator is also not available so component resizing and moving are not possible. I hope Microsoft will update WinRT with the missing features.

For handwriting recognition, I have used the Windows.UI.Input.Inking namespace. The basic concept is to use the InkManager class. It provides properties and methods to manage the input, manipulation, and processing (including handwriting recognition) of one or more InkStroke objects. When a user write something onto canvas, all the points covered in that path is saved as InkManager objects. The InkManager class provide an async method called RecognizeAsync(). The results of the recognition is a collection of InkRecognitionResult objects. To get the text components, I have used the GetTextCandidates() method of the InkRecognitionResult class and it retrieves the collection of strings identified as potential matches for handwriting recognition. The code snippet is given below: 

private async void btnRecognize_Click(object sender, RoutedEventArgs e)
{
    try
    {
        txtRecognizedText.Visibility = Windows.UI.Xaml.Visibility.Visible;
        btnSaveRecognizedText.Visibility = Windows.UI.Xaml.Visibility.Visible;
        canvas.SetValue(Grid.RowProperty, 3);
        canvas.SetValue(Grid.RowSpanProperty, 1);
        MyInkManager.Mode = InkManipulationMode.Inking;
        x = await MyInkManager.RecognizeAsync(InkRecognitionTarget.Recent);
        MyInkManager.UpdateRecognitionResults(x);
        foreach (InkRecognitionResult i in x)
        {
            RecognizedText = i.GetTextCandidates();
            FinalRecognizedText += " " + RecognizedText[0];
            txtRecognizedText.Text += FinalRecognizedText;
        }
        FinalRecognizedText = string.Empty;

    }
    catch (Exception)
    {
        if (canvas.Children.Count == 0)
        {
            var MsgDlg = new MessageDialog("Your screen has no handwriting. " + 
              "Please write something with pencil tool then click recognize.", 
              "Error while recognizing");
            MsgDlg.ShowAsync();
        }
        else
        {
            var MsgDlg = new MessageDialog("Please clear the screen then write " + 
              "something with pencil tool", "Error while recognizing");
            MsgDlg.ShowAsync();
        }
    }
}

Points of Interest

This application demonstrates how a user can draw shapes and how hand writing recognition is performed in a XAML/C# Metro style app. I request other developers to enhance my application with their comments and suggestions. I am very thankful to CodeProject, StackOverflow, and MSDN Forum for solving my problems. 

Copy-Paste apps from here in Windows store 

One day I was searching for a better paint app, and I found these two apps which are fully copy pasted from this article. I suggest Microsoft to not accept these kinds of spam apps. 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Farhan Ghumra
Software Developer (Senior) Simform Solutions Pvt. Ltd.
India India
Windows Metro Store Apps Developer having 1+ year of experience

Follow me on: My Blog on Windows 8 | Twitter | Facebook | LinkedIn

Check Out My Articles & Tips on CodeProject

You may also be interested in...

Comments and Discussions

 
QuestionErasing drawn line point by point Pin
Rajendra Bhandari26-Jan-15 23:23
memberRajendra Bhandari26-Jan-15 23:23 
QuestionReg: Eraser is painting off on image background Pin
V.N.Sudheer Kumar18-Dec-14 23:19
memberV.N.Sudheer Kumar18-Dec-14 23:19 
AnswerRe: Reg: Eraser is painting off on image background Pin
Rajendra Bhandari26-Jan-15 23:26
memberRajendra Bhandari26-Jan-15 23:26 
QuestionAbout thickness of Pencil tool Pin
Pavan Srivathsa18-Jan-14 19:53
memberPavan Srivathsa18-Jan-14 19:53 
QuestionImage unchanged after using Eraser Pin
yugandhar111-Dec-13 23:48
memberyugandhar111-Dec-13 23:48 
GeneralImage drawn is not cleared after pressing clear button Pin
yugandhar114-Nov-13 1:25
memberyugandhar114-Nov-13 1:25 
GeneralRe: Image drawn is not cleared after pressing clear button Pin
Farhan Ghumra5-Nov-13 23:42
memberFarhan Ghumra5-Nov-13 23:42 
GeneralRe: Image drawn is not cleared after pressing clear button Pin
yugandhar116-Nov-13 2:23
memberyugandhar116-Nov-13 2:23 
GeneralRe: Image drawn is not cleared after pressing clear button Pin
Farhan Ghumra6-Nov-13 2:25
memberFarhan Ghumra6-Nov-13 2:25 
QuestionSymmetry and Quadrant (mirror drawing) Pin
Manjunath T - Mysore19-Oct-13 18:35
memberManjunath T - Mysore19-Oct-13 18:35 
GeneralMy vote of 5 Pin
lspfc23-Sep-13 7:15
memberlspfc23-Sep-13 7:15 
QuestionUpload only parts of source code Pin
Amol Kakhandki25-Jul-13 0:40
memberAmol Kakhandki25-Jul-13 0:40 
QuestionImage Pin
Tshering Lama Moktan5-Jun-13 17:18
memberTshering Lama Moktan5-Jun-13 17:18 
AnswerRe: Image Pin
Farhan Ghumra5-Nov-13 23:39
memberFarhan Ghumra5-Nov-13 23:39 
QuestionNullReferenceException while using multi-touch Pin
Member 993852224-Mar-13 13:05
memberMember 993852224-Mar-13 13:05 
AnswerRe: NullReferenceException while using multi-touch Pin
Farhan Ghumra24-Mar-13 20:00
memberFarhan Ghumra24-Mar-13 20:00 
QuestionCanvas Pin
Khaled Jemni10-Mar-13 1:24
memberKhaled Jemni10-Mar-13 1:24 
AnswerRe: Canvas Pin
Farhan Ghumra10-Mar-13 20:54
memberFarhan Ghumra10-Mar-13 20:54 
GeneralMy vote of 5 Pin
Vietdungiitb19-Feb-13 22:33
mvpVietdungiitb19-Feb-13 22:33 
GeneralRe: My vote of 5 Pin
Farhan Ghumra20-Feb-13 2:39
memberFarhan Ghumra20-Feb-13 2:39 
GeneralNice article Pin
Simon Jackson17-Dec-12 3:30
memberSimon Jackson17-Dec-12 3:30 
GeneralRe: Nice article Pin
Farhan Ghumra17-Dec-12 18:58
memberFarhan Ghumra17-Dec-12 18:58 
GeneralMy vote of 5 Pin
Mihai MOGA14-Dec-12 5:45
memberMihai MOGA14-Dec-12 5:45 
GeneralRe: My vote of 5 Pin
Farhan Ghumra14-Dec-12 6:39
memberFarhan Ghumra14-Dec-12 6:39 
QuestionGood attempt Pin
nicks70728-Oct-12 18:52
membernicks70728-Oct-12 18:52 
AnswerRe: Good attempt Pin
Farhan Ghumra29-Oct-12 19:10
memberFarhan Ghumra29-Oct-12 19:10 
GeneralRe: Good attempt Pin
Stephen Larravide7-Nov-12 13:56
memberStephen Larravide7-Nov-12 13:56 
QuestionEraser erases out of canvas Pin
Vivek Deshmukh9-Oct-12 0:36
memberVivek Deshmukh9-Oct-12 0:36 
GeneralRe: Eraser erases out of canvas Pin
yugandhar115-Nov-13 1:30
memberyugandhar115-Nov-13 1:30 
QuestionNo points. Pin
Member 941255624-Sep-12 12:42
memberMember 941255624-Sep-12 12:42 
QuestionShapes are not being saved. Pin
muralimahendra27-Jul-12 1:43
membermuralimahendra27-Jul-12 1:43 
AnswerRe: Shapes are not being saved. Pin
Farhan Ghumra27-Jul-12 1:47
memberFarhan Ghumra27-Jul-12 1:47 
QuestionProject doesn't build Pin
Member 927977019-Jul-12 12:33
memberMember 927977019-Jul-12 12:33 
AnswerRe: Project doesn't build Pin
Farhan Ghumra19-Jul-12 19:02
memberFarhan Ghumra19-Jul-12 19:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150624.2 | Last Updated 6 Nov 2013
Article Copyright 2012 by Farhan Ghumra
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid