How to export multiple WPF Charts using MVVM-Compatible?

4 mins read

This article provides a complete step-by-step tutorial on how to create multiple charts in WPF and export them as WPF charts that can be reused in WPF applications using MVVM patterns.

The WPF SfChart supports exporting charts various image formats.

Step 1: Refer to the following article for guidance on adding multiple charts.

How to export the multiple wpf charts

Step 2: In your XAML, bind the Command property of the export button to a command in your ViewModel and set the CommandParameter as showing in the following example.

[XAML]

  <Grid Margin="0, 10, 0, 0" x:Name="grid">
  
   . . .
 
   <Button Grid.Row="5" Content="Print" Width="150" Height="50" Command="{Binding ExportButtonCommand}" CommandParameter="{x:Reference grid}"/>
 
</Grid>

Step 3: In your ViewModel, implement the ExportButtonCommand to handle the export functionality. Use ExportCharts method to create a PDF document and draw the saved bitmap image of each chart into that PDF page, then save that document as shown in the following code sample.

[C#]

private ICommand exportButtonCommand;
 
public ICommand ExportButtonCommand
{
    get
    {
        return exportButtonCommand;
    }
    set
    {
        exportButtonCommand = value;
    }
}
 
public ViewModel()
{
    . . .
    ExportButtonCommand = new RelayCommand(ExportChart);
}  
 
public void ExportChart(object obj)
{
    var grid = obj as Grid;
    if (grid != null)
    {
        pdfDoc = new PdfDocument();
        pdfDoc.PageSettings.Size = PdfPageSize.A4;
        pdfDoc.PageSettings.Margins.All = 0;
        page1 = new PdfPage();
        page1 = pdfDoc.Pages.Add();
        float pageWidth = page1.Size.Width - spacing;
        float top = 50;
 
        for (int i = 0; i < grid.Children.Count - 1; i++)
        {
            var chart = (grid.Children[i] as StackPanel).Children[0] as SfChart;
            if (chart == null) return;
 
            MemoryStream outStream = new MemoryStream();
            chart.Save(outStream, new JpegBitmapEncoder());
            PdfBitmap pdfBitmap1 = new PdfBitmap(outStream);
            page1.Graphics.DrawImage(pdfBitmap1, new RectangleF(x, top + (i * (height + spacing)), pageWidth, height));
            outStream.Close();
        }
 
        SaveFileDialog dialog = new SaveFileDialog
        {
            Filter = "PDF document (*.pdf)|*.pdf"
        };
        Boolean? result = dialog.ShowDialog();
        string fileName = dialog.FileName;
        if ((bool)result)
        {
            pdfDoc.Save(fileName);
        }
        pdfDoc.Dispose();
    }
}

Executing the export command will generate a PDF document containing all the charts arranged vertically on a single page.

Exported Image:

Export multiple wpf sfchart to pdf using MVVMDescription automatically generated

View the sample from GitHub

How to export multiple WPF Charts using MVVM-Compatible?

Access denied