Saving XAML custom control as a jpg/png file

Question

I have some objects at wpf window and I want to save one of them into a .png / jpg file. It is posible using wpf ? how to do it ?

UPDATE The object is a customControl, something like Printdialog.Printvisual but jus to save my control UI as an image file

Here is my XAML

<Window 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:OdontogramaUI="clr-namespace:Gramas.OdontogramaUI;assembly=Gramas" x:Class="Salud.Views.AtencionOdontologica"
        xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WPF45"        
        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
        xmlns:resources="clr-namespace:ModelSeguridad.Resources;assembly=ModelSeguridad"
        Title="{x:Static resources:Labels.SALUD_AtencionOdontologicaTitulo}" Height="600" Width="1200">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <OdontogramaUI:OdontogramaClasico7Partes Margin="10" Odontograma="{Binding OdontoGramaBase}" HorizontalAlignment="Left" VerticalAlignment="Top" Height="435" Width="807" TipoPiezaOdontograma="{Binding TipoPieza}"/>
        <Grid Grid.Column="1" Grid.RowSpan="2">
            <Grid.RowDefinitions>
                <RowDefinition Height="24"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="24"/>
            </Grid.RowDefinitions>
            <Grid Width="Auto">
                <Grid.RowDefinitions>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                </Grid.ColumnDefinitions>
                <CheckBox Content="Presente" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                <CheckBox Content="Por Realizar" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                <CheckBox Content="Iniciado" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                <CheckBox Content="Terminado" Grid.Column="3" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Grid>
            <Grid Height="Auto" Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="2*"/>
                    <ColumnDefinition Width="2*"/>
                </Grid.ColumnDefinitions>
                <DataGrid x:Name="SimbolosDisponibles" Grid.Row="1" Height="Auto" ItemsSource="{Binding Simbolos}" Margin="10" AutoGenerateColumns="False" GridLinesVisibility="None" SelectionMode="Single">
                    <DataGrid.Columns>
                        <DataGridTextColumn ClipboardContentBinding="{x:Null}" Header="{x:Static resources:Labels.SALUD_SimboloCaption}" Binding="{Binding StrNombre}"/>
                    </DataGrid.Columns>
                </DataGrid>
                <StackPanel Grid.Column="1" Margin="10">
                    <OdontogramaUI:PiezaUI x:Name="SelectorSuperficies"  Height="269" Width="Auto" VerticalAlignment="Center" Pieza="{Binding SelectorSuperficies}" Margin="0"/>
                    <Button Grid.Row="1"  Content="Agregar Simbolo" Height="23" Width="Auto" IsEnabled="{Binding OdontoGramaBase.PiezasSeleccionadas }">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="Click">
                                <cmd:EventToCommand Command="{Binding AgregarSimboloCommand}" CommandParameter="{Binding ElementName=SimbolosDisponibles,Path=SelectedItem}"/>
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </Button>
                </StackPanel>
            </Grid>
        </Grid>
    </Grid>
</Window>

I want to save

<OdontogramaUI:OdontogramaClasico7Partes Margin="10" Odontograma="{Binding OdontoGramaBase}" HorizontalAlignment="Left" VerticalAlignment="Top" Height="435" Width="807" TipoPiezaOdontograma="{Binding TipoPieza}"/>

as an image.

Answer 1

You can save a Framework element to PNG by using this function:

    public void ExportToPng(Uri path, FrameworkElement element)
    {
        if (path == null) return;

        // Save current canvas transform
        Transform transform = element.LayoutTransform;
        // reset current transform (in case it is scaled or rotated)
        element.LayoutTransform = null;

        // Get the size of canvas
        Size size = new Size(element.Width, element.Height);
        // Measure and arrange the surface
        // VERY IMPORTANT
        element.Measure(size);
        element.Arrange(new Rect(size));

        // Create a render bitmap and push the surface to it
        RenderTargetBitmap renderBitmap = new RenderTargetBitmap((int)size.Width, (int)size.Height, 96d, 96d, PixelFormats.Pbgra32);
        renderBitmap.Render(element);

        // Create a file stream for saving image
        using (FileStream outStream = new FileStream(path.LocalPath, FileMode.Create))
        {
            // Use png encoder for our data
            PngBitmapEncoder encoder = new PngBitmapEncoder();
            // push the rendered bitmap to it
            encoder.Frames.Add(BitmapFrame.Create(renderBitmap));
            // save the data to the stream
            encoder.Save(outStream);
        }

        // Restore previously saved layout
        element.LayoutTransform = transform;
    }

The function was described here and I changed it to take any framework element. You need to pass a path and your user control to it.

Answer 2

The article linked here provides detailed explanation. The idea is to render a Visual . Visual is a class, from which UI-visible controls derive. This excerpt should be of your interest:

public MemoryStream GenerateImage(Visual visual, int width, int height, ImageFormat format)
{
    BitmapEncoder encoder = null;

    switch (format)
    {
        case ImageFormat.JPG :
            encoder = new JpegBitmapEncoder();
            break;
        case ImageFormat.PNG:
            encoder = new PngBitmapEncoder();
            break;
        case ImageFormat.BMP:
            encoder = new BmpBitmapEncoder();
            break;
        case ImageFormat.GIF:
            encoder = new GifBitmapEncoder();
            break;
        case ImageFormat.TIF:
            encoder = new TiffBitmapEncoder();
            break;
    }

    if (encoder == null) return null;

    RenderTargetBitmap rtb = this.RenderVisaulToBitmap(visual, width, height);
    MemoryStream file = new MemoryStream();
    encoder.Frames.Add(BitmapFrame.Create(rtb));
    encoder.Save(file);

    return file;
}