Apply to be a Chitika Publisher!
csharplanguageontips.blogspot.com-Google pagerank and Worth

Map

Chitika

Friday, January 13

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>

          1 comment: