full fledged paint (drawing) application in metro style app

Question

I am developing paint like application for windows 8. I have tried but I can't even developed a line drawing tool. My application will have free hand tool, line, rectangle, ellipse, circle drawing tool, eraser, saving the canvas content as JPG. I am using canvas tool for drawing. I am confused among the various "pointer" events. I have checked some samples of paint like application in WPF, but I am not able to completely port those applications.

So please guide me with some coding, please provide me working code.

Here I am attaching the sample code for line drawing. but in that line is constantly drawn, as there is no provision for checking whether the left mouse button is pressed or not.

<!-- XAML CODE -->
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel Orientation="Horizontal" Margin="0,-700,0,0" Grid.Row="0">
            <Button x:Name="btnLine" Click="btnLine_Click" Height="50" Width="auto" Content="Line" Grid.Row="0"/>
            <Button x:Name="btnElipse" Click="btnElipse_Click" Height="50" Width="auto" Content="Elipse" Grid.Row="0"/>
            <Button x:Name="btnPencil" Click="btnPencil_Click" Height="50" Width="auto" Content="Pencil" Grid.Row="0"/>
        </StackPanel>
    <Canvas Name="canvas" Background="AntiqueWhite" Margin="0,65,0,0"/>

/* C# Code*/

void canvas_PointerEntered(object sender, PointerRoutedEventArgs e)
    {
        switch (DrawingTool)
        {
            case "Line":
                {
                    clickPoint = e.GetCurrentPoint(canvas).Position;
                    newLine = new Line();
                    newLine.Fill = new SolidColorBrush(Windows.UI.Colors.Black);
                    newLine.StrokeLineJoin = PenLineJoin.Bevel;
                    newLine.X1 = clickPoint.X;
                    newLine.Y1 = clickPoint.Y;
                    newLine.X2 = clickPoint.X + 10;
                    newLine.Y2 = clickPoint.Y + 10;
                    newLine.StrokeThickness = 2;
                    canvas.Children.Add(newLine);
                    int zindex = canvas.Children.Count;
                    Canvas.SetZIndex(newLine, zindex);
                }
                break;

            case "Pencil":
                {
                    startPoint = e.GetCurrentPoint(canvas).Position;
                    line = new Polyline();
                    line.Stroke = new SolidColorBrush(Windows.UI.Colors.Black);
                    line.StrokeThickness = 2.0;
                    canvas.Children.Add(line);
                }
                break;

            case "Ellipse":
                {
                    newEllipse = new Ellipse();
                    newEllipse.StrokeThickness = 2;
                    newEllipse.Stroke = new SolidColorBrush(Windows.UI.Colors.Black);
                    newEllipse.StrokeLineJoin = PenLineJoin.Bevel;
                    newEllipse.Width = clickPoint.X;
                    newEllipse.Height = clickPoint.Y;
                    canvas.Children.Add(newEllipse);
                }
                break;

            default:
                break;
        }
    }

    void canvas_PointerMoved(object sender, PointerRoutedEventArgs e)
    {
        switch (DrawingTool)
        {
            case "Pencil":
                {
                    if (true)
                    {
                        Point currentPoint = e.GetCurrentPoint(canvas).Position;
                        if (startPoint != currentPoint)
                        {
                            line.Points.Add(currentPoint);
                        }
                    }
                }
                break;

            case "Line":
                {
                    drawPoint = e.GetCurrentPoint(canvas).Position; ;
                    if (newLine != null)
                    {
                        newLine.X2 = drawPoint.X;
                        newLine.Y2 = drawPoint.Y;
                    }
                }
                break;

            default:
                break;
        }
    }

    void canvas_PointerReleased(object sender, PointerRoutedEventArgs e)
    {
        newLine = null;
    }

    string DrawingTool;
    Line newLine;
    Ellipse newEllipse;
    Point clickPoint;
    Point drawPoint;
    Point startPoint;
    Polyline line;

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

    private void btnPencil_Click(object sender, RoutedEventArgs e)
    {
        DrawingTool = "Pencil";
    }

    private void btnLine_Click(object sender, RoutedEventArgs e)
    {
        DrawingTool = "Line";
    }

    private void btnElipse_Click(object sender, RoutedEventArgs e)
    {
        DrawingTool = "Ellipse";
    }

score 3 · Answer 1 · answered Jul 20 '12 at 05:35

3

I am now successful in developing the basic metro style paint application. Suggestions are welcomed. You can download source form codeproject

answered Jul 20 '12 at 05:35

Xyroid

463
5
19

Dr. House · Answer 2 · 2012-06-26T13:59:42.747

1

In the canvas subscribe to the mousedown and mouseup event and draw a pixel in the mouse position beteween you receive the mousedown and you receive the mouseup.

edited Jun 26 '12 at 13:59

answered Jun 26 '12 at 13:41

Dr. House

27
4

i am developing for windows 8 metro style app, it doesn't have mouseup and down events – Xyroid Jun 27 '12 at 05:10
It MUST have some event for clicking. Search the correct name. – Dr. House Jun 28 '12 at 16:33
I have solved my question. Thanks for replying, but now I am facing some other issues there are given below http://stackoverflow.com/questions/11239980/saving-canvas-as-image-in-metro-style-app http://stackoverflow.com/questions/11227031/erasing-the-content-from-canvas-where-mouse-is-being-dragged – Xyroid Jun 29 '12 at 04:53

score 1 · Answer 3 · answered Nov 27 '12 at 15:43

1

canvas.PointerMoved += _canvas_PointerMoved;
canvas.PointerPressed += _canvas_PointerPressed;
canvas.PointerReleased += _canvas_PointerReleased;

Are the events you need for handling pointer input

answered Nov 27 '12 at 15:43

Real World

1,593
1
21
46

full fledged paint (drawing) application in metro style app

3 Answers3