FlexViewerPane control is a previewing control that can be used to view FlexReport and SSRS report. In addition, the FlexViewerPane allows you to set the zoom settings like actual size, page width, show thumbnails, specify the view rotation angle of a report, and show facing pages side by side. The FlexViewerPane control supports printing as well.

Binding FlexReport with FlexViewerPane

To bind the FlexReport with FlexViewerPane, you need to load the report first. Once the report definition has been created and loaded in C1FlexReport, you can add the C1FlexViewer control to the XAML designer and bind the report to the control using DocumentSource property of C1FlexViewerPane class.

To bind the FlexReport with FlexViewerPane, use the following code and set the name of C1FlexViewerPane control as ViewerPane:

C1FlexReport rep = new C1FlexReport();
//load report definition
rep.Load(@"..\..\Products Report.flxr", "Products Report");
//preview the report
ViewerPane.DocumentSource=rep;

Zooming the Report Preview

C1FlexViewerPane provides the ZoomFactor property to set the zoom level of the report displayed in the FlexViewerPane control. You can specify a float value for ZoomFactor property to set the zoom level of the report. You can also set the MinZoomFactor and MaxZoomFactor to limit the zoom level of the displayed report.

In addition, C1FlexViewerPane allows you to manage the zoom behavior of the previewed report in the FlexViewrPane control. To specify the preview zoom mode, you can use the ZoomMode property. The ZoomMode property accepts the following values from the FlexViewerZoomMode enum, which describes the zoom modes supported in the FlexViewerPane control:

• Actual Size: Shows the pages in their actual size.
• Custom: Sets the custom zoom mode.
• Page Width: Fits the page to the width of the preview window.
• Whole Page: Fits the whole page in the preview window.

The value of ZoomMode property can be set in the XAML as well as in code. To set the zoom mode, you can add the following code inside the <c1:C1FlexViewerPane></c1:C1FlexViewerPane> tags in XAML:

<c1:C1FlexViewerPane x:Name="ViewerPane" Grid.Row="1" ZoomMode="WholePage"/>

To set the preview zoom mode in code, you can use the ZoomMode property and FlexViewerZoomMode enum. The following code illustrates the use of ZoomMode property and FlexViewerZoomMode enum. This example uses the sample created in FlexReport Quick Start.

ViewerPane.ZoomMode = FlexViewerZoomMode.WholePage

ViewerPane.ZoomMode = FlexViewerZoomMode.WholePage;

Rotate Report Preview

FlexViewerPane provides you the flexibility to rotate the view of reports to different angles according to your requirements. To rotate view of a report to various degrees of rotation, you can set the RotateView property of C1FlexViewerPane class. The RotateView property accepts the following values from the FlexViewerRotateView enum describing the rotation angle of the view:

• NoRotation: Rotation is not applied to the view.
• Rotation180: Allows rotation of the view by 180 degrees.
• Rotation90Clockwise: Allows rotation of the view by 90 degrees in clockwise direction.
• Rotation90CounterClockwise: Allows rotation of the view by 90 degrees in counter-clockwise direction.

The following code uses of FlexViewerRotateView enum for rotating the view of the report by 90 degree clockwise. This example uses sample created in FlexReport Quick Start.

ViewerPane.RotateView = FlexViewerRotateView.Rotation90Clockwise

ViewerPane.RotateView = FlexViewerRotateView.Rotation90Clockwise;

Similarly, you can rotate the view of a report by 90 degrees in counter-clockwise direction and 180 degrees.

Scrolling the Report Preview

By default, FlexViewer Pane allows you to scroll the reports using scrollbars, mouse or touch gesture. It also lets you change the scrolling behavior and specify what to do while scrolling the document pages using the ScrollMode property of the FlexViewer class. The ScrollMode property uses the ScrollMode enumeration to set one of the following modes that define the scrolling behavior of the viewer:

• Single Page: Displays one page or the current page only at a time. 
• Continuous Page: Displays multiple pages continuously without page breaks. It lets you scroll through all the pages of the report continuously and smoothly without sudden transitions.
• Continuous Snap Page: Displays all the pages continuously and snap the page at the end while scrolling.