Adding Exporting Functionality to WPF Viewer

BACKGROUND

ActiveReports 8 provides different types of viewers which can easily be used by the developers to quickly display reports on different platforms. The WebViewer, Windows Viewer, WPF, Silverlight and the HTML5 viewers shipped with ActiveReports nearly covers all the platforms which a developer might be working with. When it comes to designing and deploying reports, a very important aspect is to export the report to different formats so that the user can save them locally and view them at a later point of time. We already have a couple of blogs on different types of viewers but nothing has been written related to the WPF Viewer. By default the WPF viewer does not provide exporting functionality. Though a user may add external buttons to export the report but a more professional approach would be to include the export options within the viewer itself. So in this blog we will learn how we can add the exporting functionality to the WPF viewer. This will be achieved by adding export buttons to the viewer's toolbar.

GETTING STARTED

Before we see the steps to add export buttons to the WPF viewer, let us first get a glimpse of the final output which we are trying to achieve. So in this example, we have added an "Export to PDF" and an "Export to Excel" button to add support for two export types. You can add more buttons as per your requirements.

IMPLEMENTATION

Let us now see the steps which we need to follow in order to customize the WPF viewer.

• Adding the Customization Template For your ease, ActiveReports 8 provides a default template ("DefaultWPFViewerTemplates.xaml") which can be used to make customizations to the toolbar. This is located at C:__\Program Files\ComponentOne\ActiveReports 8\Deployment\WPF\Templates folder

Add this template to the project and on MainWindow.xaml before the opening tag, add the following code:

<Window.Resources>  
   <ResourceDictionary Source="DefaultWPFViewerTemplates.xaml" />  
</Window.Resources>

• Adding Custom Export Buttons to the Toolbar In order to add buttons to the toolbar, we need to follow these steps:

• We need to add separate command classes which will handle the click of the export buttons. Since in this example we are adding PDF and Excel Export buttons, let us name them as "PdfCommand.cs" and "ExcelCommand.cs".

• Add the following code to the "PdfCommand.cs" file:

      public class PdfCommand : ICommand  
      {  
          public bool CanExecute(object parameter)  
          {  
              return true;  
          }  
  
          public void Execute(object parameter)  
          {  
              GrapeCity.ActiveReports.Export.Pdf.Section.PdfExport _exporter = new GrapeCity.ActiveReports.Export.Pdf.Section.PdfExport();  
              _exporter.Export(MainWindow.reportDocument, "..\\\..\\\Test.pdf");  
              MessageBox.Show("Exporting of Report to PDF Complete!!");  
          }  
  
          public event EventHandler CanExecuteChanged;  
      }
  

• Add the following code to "ExcelCommand.cs" file:

      class ExcelCommand: ICommand  
      {  
          public bool CanExecute(object parameter)  
          {  
              return true;  
          }  
  
          public void Execute(object parameter)  
          {  
              GrapeCity.ActiveReports.Export.Excel.Section.XlsExport _exporter = new GrapeCity.ActiveReports.Export.Excel.Section.XlsExport();  
              _exporter.FileFormat = GrapeCity.ActiveReports.Export.Excel.Section.FileFormat.Xlsx;  
              _exporter.Export(MainWindow.reportDocument, "..\\\..\\\Test.xlsx");  
              MessageBox.Show("Exporting of Report to Excel Complete!!");  
          }  
  
          public event EventHandler CanExecuteChanged;  
      }
  

• Open the "DefaultWpfViewerTemplates.xaml" file and add the following entries right at the top:

  <ResourceDictionary ... xmlns:YourProjectName="clr-namespace:YourProjectName">  
     <YourProjectName:PdfCommand x:Key="PdfCommand" />  
     <YourProjectName:ExcelCommand x:Key="ExcelCommand" />  
  ...  
  ...  
  </ResourceDictionary>
  

• In the same file, add the following code to add the exporting buttons to the toolbar:

  <Button Command="{StaticResource PdfCommand}" ToolTip="Export to PDF" >  
     <StackPanel>  
        <Image Source="Image\\pdf.gif" />  
     </StackPanel>  
  </Button>  
  <Button Command="{StaticResource ExcelCommand}" ToolTip="Export to Excel" >  
     <StackPanel>  
        <Image Source="Image\\Excel.png" />  
     </StackPanel>  
  </Button>
  

So this completes the implementation process. Upon running the sample, the WPF viewer toolbar will now contain two buttons for exporting the report to PDF and Excel. A sample application with the implementation can be downloaded using the icon below.