c# - 将 XAML 自定义控件保存为 jpg/png 文件

Question

我在 wpf 窗口中有一些对象，我想将其中一个保存到 .png/jpg 文件中。可以使用 wpf 吗？怎么做？

更新该对象是一个自定义控件，类似于 Printdialog.Printvisual，但只是将我的控件 UI 保存为图像文件

这是我的 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>

我要保存

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

作为图像。

Answer 1

您可以使用此函数将框架元素保存为 PNG:

    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;
    }

功能描述here我将其更改为采用任何框架元素。您需要将路径和您的用户控件传递给它。