Problem of saving images in WPF (RenderTargetBitmap)

To save a visual to an image file need to use RenderTargetBitmap, detail is reference to Save and read images in WPF.

But sometimes you will find the output image was shifted or left blank. This is because that RenderTargetBitmap render the visual object based on cordinate of its parent object. Margin of itself, Padding or BorderThickness of its parent will all affect the rendered image. Although I think this is a bug of WPF, it seems the feature is by design as reference to RenderTargetBitmap layout offset influence.

There are three ways to fix the problem,

Solution	Description
Add a Border	Simple, but the visual logical tree is changed.
Use a VisualBrush	Maintain the original visaul logical tree, but need to do more process.
Temporary change the reative postion by Measure() and Arrange()	Need to change back after rendering, and the two function is automatically called while repainting by WPF, so the real process is hard to tell.

The first solution is simplist. RenderTargetBitmap is only shifted by the distance between visaul and its parent object, so you just need to add a fake parent and move the margin to the parent object.

If the original visual logical tree is like

<Grid>
<Canvas Margin="20" />
</Grid>

changed to

<Grid>
<Border Margin="20">
<Canvas />
</Border>
</Grid>

and just call the method of SaveTo as Save and read images in WPF.

private void SaveTo(Visual v, string f)
{
/// get bound of the visual
Rect b = VisualTreeHelper.GetDescendantBounds(v);

/// new a RenderTargetBitmap with actual size of c
RenderTargetBitmap r = new RenderTargetBitmap(
(int)b.Width, (int)b.Height,
96, 96, PixelFormats.Pbgra32);

/// render visual
r.Render(v);

/// new a JpegBitmapEncoder and add r into it
JpegBitmapEncoder e = new JpegBitmapEncoder();
e.Frames.Add(BitmapFrame.Create(r));

/// new a FileStream to write the image file
FileStream s = new FileStream(f,
FileMode.OpenOrCreate, FileAccess.Write);
e.Save(s);
s.Close();
}

Second solution is draw the visaul to a DrawingVisual object, and pass the object to the SaveTo function.

private DrawingVisual ModifyToDrawingVisual(Visual v)
{
/// new a drawing visual and get its context
DrawingVisual dv = new DrawingVisual();
DrawingContext dc = dv.RenderOpen();

/// generate a visual brush by input, and paint
VisualBrush vb = new VisualBrush(v);
dc.DrawRectangle(vb, null, b);
dc.Close();

return dv;
}

PS. The context will act after calling Close(). You can use the using statement to block the region. And the SaveTo method should be modified as

/// render visual
r.Render(ModifyToDrawingVisual(v));


The third solution is to temporarily change the reative postion by Measure and Arrange before Render,

private void ModifyPosition(FrameworkElement fe)
{
/// get the size of the visual with margin
Size fs = new Size(
fe.ActualWidth +
fe.Margin.Left + fe.Margin.Right,
fe.ActualHeight +
fe.Margin.Top + fe.Margin.Bottom);

/// measure the visual with new size
fe.Measure(fs);

/// arrange the visual to align parent with (0,0)
fe.Arrange(new Rect(
-fe.Margin.Left, -fe.Margin.Top,
fs.Width, fs.Height));
}

PS. The solution is only suitable for UIElement, and need to change the position back after rendering.

private void ModifyPositionBack(FrameworkElement fe)
{
/// remeasure a size smaller than need, wpf will
/// rearrange it to the original position
fe.Measure(new Size());
}

Because the size to be measured is smaller then the real size, WPF will rearrange the layout and align the position back. And the render part is modified as

/// render visual
ModifyPosition(v as FrameworkElement);
r.Render(v);
ModifyPositionBack(v as FrameworkElement);

About Measure() and Arrange(), detail is reference to UIElement.Measure Method

--
Reference
RenderTargetBitmap layout offset influence
RenderTargetBitmap tips
RenderTargetBitmap and XamChart - Broken, Redux

Save and read images in WPF

To save WPF objects as an image, you need to render them first, encode the rendered image, and then save to a file through a filestream.

private void SaveTo(Visual v, string f)
{
/// get bound of the visual
Rect b = VisualTreeHelper.GetDescendantBounds(v);

/// new a RenderTargetBitmap with actual size
RenderTargetBitmap r = new RenderTargetBitmap(
(int)b.Width, (int)b.Height,
96, 96, PixelFormats.Pbgra32);

/// render visual
r.Render(v);

/// new a JpegBitmapEncoder and add r into it
JpegBitmapEncoder e = new JpegBitmapEncoder();
e.Frames.Add(BitmapFrame.Create(r));

/// new a FileStream to write the image file
FileStream s = new FileStream(f,
FileMode.OpenOrCreate, FileAccess.Write);
e.Save(s);
s.Close();
}

Remember the output control need to align its parent control, detail is reference to Problem of saving images in WPF (RenderTargetBitmap).

On the other hand, when you want to read an image and show it in WPF, just open the file through a filestream, decode it, and put it into Canvas.

private void LoadFrom(Canvas c, string f)
{
/// new a FileStream to write the image file
FileStream s = new FileStream(f,
FileMode.OpenOrCreate, FileAccess.Read);

/// new a decoder to decode image
BitmapDecoder d = BitmapDecoder.Create(s,
BitmapCreateOptions.None,
BitmapCacheOption.None);

/// new an image with decoded image
Image i = new Image();
i.Source = d.Frames[0];

/// add the image into canvas
c.Children.Add(i);
}

PS. If you close the FileStream during showing, there will cause an exception. So the close action need to be down after the image is no longer to be shown.

Drawing in WPF

The concept of drawing in WPF is quite different with that in .net form. There is no Graphics object to handle the drawing process, you need to new Shape objects (Line, Ellipse, Rectangle, ...) into a Canvas as follow,

1. New a Canvas

In XAML file

<Canvas Margin="0,0,0,0" Name="c"/>

or in C# source file

Canvas c = new Canvas();
this.Content = c;

2. New Shape objects and put them into Canvas

private void DrawLine(Canvas c, Point s, Point e)
{
/// new a line geometry
LineGeometry l = new LineGeometry(s, e);

/// new a path and set its data as the geometry
System.Windows.Shapes.Path p =
new System.Windows.Shapes.Path();
p.Data = l;

/// add the line as a child of canvas
c.Children.Add(p);
}

LineGeometry above can also be replaced with EllipseGeometry or RectangleGeometry to draw an ellipse or a retangle. Besides, WPF will redraw automatically, so just add the objects. And all objects in Canvas is still programalbe.

--
Reference
WPF幾何繪圖
WPF中，如何使用圖像API進行繪製