How to make report viewer on WPF with FastReport Open Source. Part 1.

Since WPF technology works with the .Net Framework, it is logical to assume that you can also use FastReport.Net. Indeed, the delivery package FastReport.Net even has a demo that demonstrates how to create a report viewer in a WPF project. However, there is a more popular version of FastReport.Net - FastReport Open Source.

Here it is necessary to clarify that FastReport Open Source almost completely repeats the usual FastReport.Net, but there are still significant differences. The main difference is heavily curtailed exports in the open source version. Yes, FastReports spends a lot of time and effort on developing exports. It is logical that they were left in the paid version. However, we still have exports in different image formats and in HTML.

The demo project of the report viewer in WPF involves exporting the report to XAML format. Based on the limitations of FasrReport OpenSource, it is clear that using this demo project will not be available. Therefore, we will create our own.

So, in this article we will have a look at the way to create a report viewer in fpx format based on the WPF project and the FastReport Open Source library.

The report viewer should allow:

Open the report file in fpx format;
Scroll through the report pages, if the number generated is more than one;
Scale report (zoom in / out image).

To display the report, we will use the export in png format.

Let's create our application. We need a template for a regular WPF App:

We turn to the NuGet Package Manager to add the FastReport.OpenSource library and find the packages we need in the nuget.org repository.

Open the main form. Now it is empty. Add two controls to it: ToolBar and Image. Place the ToolBar at the top of the window, and the Image below it.

We need to add browser control buttons to the ToolBar:

Open report;
To the first page of the report;
One page back;
One page ahead;
To the last page;
Zoom in;
Zoom out.

You can also add a TextBox to enter the number of the desired page.

How to add buttons on a toolbar? We find the Items property in Properties:

And set a collection for it:

You can add images for buttons.

The result is this toolbar:

The Image component will be placed under the panel. Since we plan to implement the ability to scale the report, we need to add scroll bars for the picture (ScrollBar). Pay attention on the window at the bottom of the screen. Namely, on the XAML tab:

As you know, the entire form in WPF is encoded in the XAML markup language. So you can edit the form and all its elements right here. Find the tag. Enclose it in the <ScrollViewer> tag like this:

</ScrollViewer>

So we added scroll bars for the image. In the end, we get the form:

Let's implement the most important function of the developed application - the display of the report. But for this we first need to implement the loading report.

Click on the "Open" button on the toolbar. In the Property inspector switch to the Events tab and create an OnClick event:

private void Open_Click(object sender, RoutedEventArgs e)

{

OpenReportFile();

}

We add the function to open the report file:

void OpenReportFile()

{

OpenFileDialog myDialog = new OpenFileDialog();

myDialog.Filter = "Подготовленные отчёты(*.FPX)|*.fpx;";

myDialog.CheckFileExists = true;

myDialog.Multiselect = false;

if (myDialog.ShowDialog() == true)

{

LoadReport(myDialog.FileName);

}

We created a file open dialog in it, and set the file filtering by the fpx extension. Next, install the check for existing files and prohibit multiple selection of files. By successfully closing the dialog, that is, the selected file and clicking the Ok button, we load the report into the LoadReport function. To do this, we need the FastReport library, let’s add it to the “using”:

using FastReport;

To load a report, you need to create a report object:

private Report report;

public Report Report

{

get { return report; }

set { report = value; }

}

We implement the function of loading a report from a file into a Report object:

void LoadReport(string report_name)

{

Report rep = new Report();

rep.LoadPrepared(report_name);

Report = rep;

}

Here we have created a new report object and loaded a prepared report into it. The fpx format tells us that this is a prepared report. Then assign the report to the Report class variable.

To display the report in the Image object, we need to export it to PNG. To do this, create a variable of type export to image:private FastReport.Export.Image.ImageExport ex;

Now, let's update the set method for the Report object:

public Report Report

{

get { return report; }

set

{

ex = new FastReport.Export.Image.ImageExport();

ex.HasMultipleFiles = true;

report = value;

SetContent(report);

}

We have created an instance of the export object and set the property of multiple files for it. This property allows us to export report pages into separate files. In the last line, we call the SetContent method and pass a report to it. This method will load the exported png files into an Image object.

Since we assume a lot of export files, we need to save them to the list in order. Then we will be able to further implement switching between image files simply by loading the desired list item. Create a list:

public List<BitmapImage> pages = new List<BitmapImage>();

Now let's implement the SetContent method:

private void SetContent(Report report)

{

ex.ImageFormat = ImageExportFormat.Png;

ex.ResolutionX = 96;

ex.ResolutionY = 96;

ex.Export(report, Directory.GetCurrentDirectory() + "/test.png");

foreach (string file in ex.GeneratedFiles)

{

pages.Add(new BitmapImage(new Uri(file)));

}

im.Source = pages[0];

}

In this method we use the export object created earlier. We give it the PNG format and resolution. Then we export the report object and save it to the file test.png. Since we have the option of multiple files enabled, all subsequent files will have an additional index: test.2.png, test.3.png, etc. In the loop, run through all the generated files and save them to the list. After that, set the first image from the list to the Image object.

At this point we will stop. In the second part of the article, we will discuss how to implement switching between exported images, that is, switching between report pages. And also realize the scaling of the report.

How to make report viewer on WPF with FastReport Open Source. Part 2.