Paint Application in WPF (XAML) and C# Code

Hello guys, today i'm gonna show you how to make a simple paint application in wpf application using XAML for its GUI and c# for its back end coding, this application is equipped with Buttons, labels and InkCanvas,
so lets start it, first of all open MS visual Studio C# 2010, open a new project (WPF application), you will be shown a window, in the designer window we will make GUI of application, here is the screenshot, you have to follow these steps to make this application.

• Divide your main Grid into two columns by writing this code

        <Grid.ColumnDefinitions >

            <ColumnDefinition Width="100*" />

            <ColumnDefinition Width="425*" />

        </Grid.ColumnDefinitions>

Asterisk ( * ) sign shows that it'll have minimum width 100 and 425 respectively, on changing width and height of window it will adjust itself automatically.

• I have defined InkCanvas in the 2 Column and in the column 1 i have defined Stackpanel. Stackpanel is Vertically oriented by default, if you add buttons or something into it, it will add contents to one above the other. 
• In the column 1 there are 6 buttons, each two buttons are added into another Stackpanel whose orientation is defined Horizontally. <StackPanel Orientation="Horizontal" >
• I have not given contents to the coloured button, because if you give content then it is likely a button with something written on it, like Hello, Click here.
• I have only given the background to the buttons width and height are set equal and margin is defined as per your requirement. here width = 25, height = 25 and margin = 5.
• In the Main Stackpanel i have set its background to Gray, its nothing hard, you only need to set its Background  = "Gray",
• In this screenshot you will be viewing coordinates of the mouse, in the xaml code, i have put two labels named Xcoord, Ycoord.
• To give Columns of your layout control you only have to use Grid.Column = "0", or Grid.Column = "1".

Design code is completed, now come to the c# code. 

• In the C# code, you only need to change the colour of your pen tool, and get MousePosition.
• to change the color of pen Tool, you have to set the 

icanvas.DefaultDrawingAttributes.Color = Colors.Green;

Icanvas is the Name you gave to your Inkcanvas Control layout.

• you have to add click events on the buttons which are having Background (Yellow, Green etc).
• to get the locaion of Mouse, you will have to use Mouse class, and its static method GetPosition, this method takes InputElement, InputElement is your layout control here its Icanvas. 
• Add MouseMove event in the InkCanvas and in the c# code, write these lines.

            Point position = e.GetPosition(this);

            XCoord.Content = position.X;

            YCoord.Content = position.Y;

Feel free to ask anything. I'm Providing you with XAML and C# code of this paint Application, Enjoy and Have a good day folks. 

C# Code

namespace WpfApplication1

{

    /// <summary>

    /// Interaction logic for MainWindow.xaml

    /// </summary>

    public partial class MainWindow : Window

    {

        public MainWindow()

        {

            InitializeComponent();

            //XYCoord.Content = Mouse.GetPosition(icanvas);

        }

        private void icanvas_MouseMove(object sender, MouseEventArgs e)

        {

            Point position = e.GetPosition(this);

            XCoord.Content = position.X;

            YCoord.Content = position.Y;

        }

        private void Black_Click(object sender, RoutedEventArgs e)

        {

            icanvas.DefaultDrawingAttributes.Color = Colors.Black;

        }

        private void White_Click(object sender, RoutedEventArgs e)

        {

            icanvas.DefaultDrawingAttributes.Color = Colors.White;

        }

        private void Red_Click(object sender, RoutedEventArgs e)

        {

            icanvas.DefaultDrawingAttributes.Color = Colors.Red;

        }

        private void Yellow_Click(object sender, RoutedEventArgs e)

        {

            icanvas.DefaultDrawingAttributes.Color = Colors.Yellow;

        }

        private void Orange_Click(object sender, RoutedEventArgs e)

        {

            icanvas.DefaultDrawingAttributes.Color = Colors.Orange;

        }

        private void Green_Click(object sender, RoutedEventArgs e)

        {

            icanvas.DefaultDrawingAttributes.Color = Colors.Green;

        }

        

    }

}

XAML Code

<Grid>

        <Grid.ColumnDefinitions >

            <ColumnDefinition Width="100*" />

            <ColumnDefinition Width="425*" />

        </Grid.ColumnDefinitions>

        <InkCanvas Grid.Column="1" Width="Auto" Name="icanvas" MouseMove="icanvas_MouseMove"/>

        <StackPanel Grid.Column="0" Background="Gray">

            <StackPanel Orientation="Horizontal" Width="70" >

                <Button Name="Black" Background="Black" Width="25" Height="25" Margin="5" Click="Black_Click"/>

                <Button Name="White" Background="White" Width="25" Height="25" Margin="5" Click="White_Click"/>

            </StackPanel>

            <StackPanel Orientation="Horizontal" Width="70">

                <Button Name="Red" Background="Red" Width="25" Height="25" Margin="5" Click="Red_Click"/>

                <Button Name="Yellow" Background="Yellow" Width="25" Height="25" Margin="5" Click="Yellow_Click" />

            </StackPanel>

            <StackPanel Orientation="Horizontal" Width="70">

                <Button Name="Orange" Background="Orange" Width="25" Height="25" Margin="5" Click="Orange_Click"/>

                <Button Name="Green" Background="Green" Width="25" Height="25" Margin="5" Click="Green_Click" />

            </StackPanel>

            <Label Name="XCoord" />

            <Label Name="YCoord" />

        </StackPanel>

    </Grid>