Speichern einer WPF-canvas als Bild

Ich weiß, das ist eine alte Frage, aber es dauerte eine Weile, des Suchens und versuchen, verschiedene Antworten zu kommen mit etwas, das arbeitet zuverlässig gut. So sparen einige Zeit für diejenigen, die in der Zukunft, hier ist ein kleiner service, entweder speichern Sie eine Leinwand in eine Datei oder senden eine Bildquelle für die Anzeige an anderer Stelle in Ihrer Anwendung.

Sollte es robuster werden, für eine Produktion, Anwendung, zusätzliche null-und Fehlerprüfung, etc..

public static class RenderVisualService
{
    private const double defaultDpi = 96.0;

    public static ImageSource RenderToPNGImageSource(Visual targetControl)
    {
        var renderTargetBitmap = GetRenderTargetBitmapFromControl(targetControl);

        var encoder = new PngBitmapEncoder();
        encoder.Frames.Add(BitmapFrame.Create(renderTargetBitmap));

        var result = new BitmapImage();

        using (var memoryStream = new MemoryStream())
        {
            encoder.Save(memoryStream);
            memoryStream.Seek(0, SeekOrigin.Begin);

            result.BeginInit();
            result.CacheOption = BitmapCacheOption.OnLoad;
            result.StreamSource = memoryStream;
            result.EndInit();
        }

        return result;
    }

    public static void RenderToPNGFile(Visual targetControl, string filename)
    {
        var renderTargetBitmap = GetRenderTargetBitmapFromControl(targetControl);

        var encoder = new PngBitmapEncoder();
        encoder.Frames.Add(BitmapFrame.Create(renderTargetBitmap));

        var result = new BitmapImage();

        try
        {
            using (var fileStream = new FileStream(filename, FileMode.Create))
            {
                encoder.Save(fileStream);
            }
        }
        catch (Exception ex)
        {
            System.Diagnostics.Debug.WriteLine($"There was an error saving the file: {ex.Message}");
        }
    }

    private static BitmapSource GetRenderTargetBitmapFromControl(Visual targetControl, double dpi = defaultDpi)
    {
        if (targetControl == null) return null;

        var bounds = VisualTreeHelper.GetDescendantBounds(targetControl);
        var renderTargetBitmap = new RenderTargetBitmap((int)(bounds.Width * dpi / 96.0),
                                                        (int)(bounds.Height * dpi / 96.0),
                                                        dpi,
                                                        dpi,
                                                        PixelFormats.Pbgra32);

        var drawingVisual = new DrawingVisual();

        using (var drawingContext = drawingVisual.RenderOpen())
        {
            var visualBrush = new VisualBrush(targetControl);
            drawingContext.DrawRectangle(visualBrush, null, new Rect(new Point(), bounds.Size));
        }

        renderTargetBitmap.Render(drawingVisual);
        return renderTargetBitmap;
    }
}

Und ein Beispiel WPF-Anwendung demonstrieren zu verwenden.

MainWindow.xaml

<Window x:Class="CanvasToBitmapDemo.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:CanvasToBitmapDemo"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>

    <StackPanel Grid.Row="0" Grid.ColumnSpan="2" Orientation="Horizontal" HorizontalAlignment="Center">
        <Button Click="Button_Click" Content="Capture Image" Width="100"/>
        <Button Click="Button_Click_1" Content="Save To Disk" Width="100"/>
    </StackPanel>

    <Canvas x:Name="PART_Canvas" Grid.Row="1" Grid.Column="0">
        <Ellipse Canvas.Top="50"
                 Canvas.Left="60"
                 Fill="Gold"
                 Width="250"
                 Height="250" />

        <Polyline Stroke="#FF853D00"
                  StrokeThickness="10"
                  StrokeEndLineCap="Round"
                  StrokeStartLineCap="Round"
                  Points="110,100 120,97 130,95 140,94 150,95 160,97 170,100" />

        <Ellipse Canvas.Top="115"
                 Canvas.Left="114"
                 Fill="#FF853D00"
                 Width="45"
                 Height="50" />

        <Polyline Stroke="#FF853D00"
                  StrokeThickness="10"
                  StrokeEndLineCap="Round"
                  StrokeStartLineCap="Round"
                  Points="205,120 215,117 225,115 235,114 245,115 255,117 265,120" />

        <Ellipse Canvas.Top="120"
                 Canvas.Left="208"
                 Fill="#FF853D00"
                 Width="45"
                 Height="50" />

        <Polyline Stroke="#FF853D00"
                  StrokeThickness="10"
                  StrokeEndLineCap="Round"
                  StrokeStartLineCap="Round"
                  Points="150,220 160,216 170,215 180,215 190,216 202,218 215,221" />

    </Canvas>

    <Image x:Name="PART_Image" Grid.Row="1" Grid.Column="1" Stretch="None"/>
</Grid>

Und der code-behind machen die Anrufe in der service.

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        PART_Image.Source = RenderVisualService.RenderToPNGImageSource(PART_Canvas);
    }

    private void Button_Click_1(object sender, RoutedEventArgs e)
    {
        RenderVisualService.RenderToPNGFile(PART_Canvas, "myawesomeimage.png");
    }
}

Sehen, ob diese Lösung funktioniert für Sie.

Size size = new Size(width, height);
canvas.Measure(size);
canvas.Arrange(new Rect(X, Y, width, height));

//Save Image
...  
...

//Revert old position
canvas.Measure(new Size());