WPFのInkCanvasを画像ファイルとして保存する方法

Ⅰ. はじめに

タイトルの通り「WPFのInkCanvasを画像ファイルとして保存する方法」です。

Ⅱ. やり方

1. サンプルプログラムを書く

MainWindow.xaml

<Window Height="150" Width="150">
  <Grid>
    <InkCanvas
      x:Name="inkCanvas1"
      Width="100"
      Height="100"
      Background="#B2B2B2"
      StrokeCollected="InkCanvas_StrokeCollected" />
  </Grid>
</Window>

MainWindow.xaml.cs

private void SaveImg(UIElement element, string path, BitmapEncoder encoder)
{
  var bounds = VisualTreeHelper.GetDescendantBounds(element);
  var width = (int)bounds.Width;
  var height = (int)bounds.Height;

  var rtb = new RenderTargetBitmap(width, height, 96d, 96d, PixelFormats.Pbgra32);

  var drawingVisual = new DrawingVisual();
  using (var ctx = drawingVisual.RenderOpen())
  {
    var vb = new VisualBrush(element);
    ctx.DrawRectangle(vb, null, new Rect(new Point(bounds.X, bounds.Y), new Point(width, height)));
  }

  rtb.Render(drawingVisual);
  encoder.Frames.Add(BitmapFrame.Create(rtb));
  using (var fs = File.Open(path, FileMode.OpenOrCreate))
  {
    encoder.Save(fs);
  }
}

private void InkCanvas_StrokeCollected(object sender, InkCanvasStrokeCollectedEventArgs e)
{
  SaveImg(inkCanvas1, "out.jpg", new JpegBitmapEncoder());
  SaveImg(inkCanvas1, "out.png", new PngBitmapEncoder());
  SaveImg(inkCanvas1, "out.bmp", new BmpBitmapEncoder());
}

実行結果