Drawing tool story: Drawing a simple line.

Hi I am going to write a drawing tool for one of my client in phases, I thought I can share some of the learning with the community as this is a far different project that I always did. All my projects and expertise some how related to data centric and data visualization.

However, now I have chance to explorer some of the WPF animation, drawing and other interesting things like 2d, and 3d objects. In this short post I would share few line of code from my actual project where I have done a demo on drawing a line on a  canvas.

In above example I have created a window to draw line upon the button clicks. Fairly simple and easy. Bellow the xaml definition is given.

Just a simple drawing surface named “DrawingPanel” which is a canvas. Bellow the c# code is given.

using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Shapes;

namespace Tool_Panel_Example
{
    public partial class MainWindow
    {
        private double x1 = 10;
        private double x2 = 200;
        private double y1 = 10;
        private double y2 = 200;
        public MainWindow()
        {
            InitializeComponent();
        }

        private void ButtonClick(object sender, RoutedEventArgs e)
        {
            x1 = x1 + 10;
            x2 = x2 - 10;

            var element = new Line { Stroke = new SolidColorBrush(Colors.White), 
            X1 = x1, Y1 = y1, X2 = x2, Y2 = y2, StrokeThickness = 2 };

            DrawingPanel.Children.Add(element);
        }
    }
}

Here I have first created a line element and then set its properties, here stroke and position and border thickness property is been set. Finally added in the drawing panel. Note that the position is been changed each time as we don’t want to keep the same object in same location.

I would continue to add more feature in the project and hopefully learn many things, and would definitely share with the community.