Draw on image control in WPF

Question

I must create application, where it can be to load some image, apply some filters, draw few lines and save it. And I must do it using WPF. How I can draw on Image control in WPF? Or another control is better for it?

Answer 1

You can do this by adding InkCanvas to your page, add your image as Background Image of InkCanvas, and add save functionality.

1. Add InkCanvas to your WPF Form:
   1. Open the Toolbox (on the View menu, click Toolbox)
   2. Right-click the Toolbox, and then click Choose Items (Choose Toolbox Items dialog box opens)
   3. On the WPF Components tab of the Choose Toolbox Items dialog box, scroll down to InkCanvas and select it so that a check appears in the check box.
   4. Click OK to add the InkCanvas control to the Toolbox.
   5. Drag an InkCanvas control from the Toolbox to the design surface.
2. Add your image as a background of InkCanvas. You can do it either in properties window under Background or in XAML

3. Add "Save" button to your form and use following code to save it:

   string newImagePath = "your file path";
   var ms = new MemoryStream();             
   
   using (FileStream fs = new FileStream(newImagePath , FileMode.Create)
   {
       var rtb = new RenderTargetBitmap((int)inkImageCanvas.Width, (int)inkImageCanvas.Height, 96d, 96d, PixelFormats.Default);             
       rtb.Render(inkImageCanvas);             
       JpegBitmapEncoder encoder = new JpegBitmapEncoder();             
       encoder.Frames.Add(BitmapFrame.Create(rtb));              
       encoder.Save(fs);             
   }
   

newImagePath is the path to new file; inkImageCanvas is your InkCanvas control.

This will save content of your inkCanval to jpg file.