# FlexViewer Pane

Get started with FlexReport, a WinForms control, which is a fast-paced reporting engine that enables you to create, preview, export and print modern and dynamic reports for all your applications. See more in documentation here.

## Content

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.

![Snapshot of FlexViewerPane](https://cdn.mescius.io/document-site-files/images/96483bc4-d0db-40fa-a0e4-c5e6a4a56825/images/flexviewer-pane-only.png)

## 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](/componentone/api/wpf/online-flexreport/dotnet-framework-api/C1.WPF.FlexReport.4.6.2/C1.WPF.FlexReport.C1FlexReport.html), you can add the **C1FlexViewer** control to the XAML designer and bind the report to the control using [DocumentSource](/componentone/api/wpf/online-flexreport/dotnet-framework-api/C1.WPF.FlexViewer.4.6.2/C1.WPF.FlexViewer.C1FlexViewerPane.DocumentSource.html) property of [C1FlexViewerPane](/componentone/api/wpf/online-flexreport/dotnet-framework-api/C1.WPF.FlexViewer.4.6.2/C1.WPF.FlexViewer.C1FlexViewerPane.html) class.

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

```csharp
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](/componentone/api/wpf/online-flexreport/dotnet-framework-api/C1.WPF.FlexViewer.4.6.2/C1.WPF.FlexViewer.C1FlexViewerPane.html) provides the [ZoomFactor](/componentone/api/wpf/online-flexreport/dotnet-framework-api/C1.WPF.FlexViewer.4.6.2/C1.WPF.FlexViewer.C1FlexViewerPane.ZoomFactor.html) property to set the zoom level of the report displayed in the **FlexViewerPane** control. You can specify a float value for [ZoomFactor](/componentone/api/wpf/online-flexreport/dotnet-framework-api/C1.WPF.FlexViewer.4.6.2/C1.WPF.FlexViewer.C1FlexViewerPane.ZoomFactor.html) property to set the zoom level of the report. You can also set the [MinZoomFactor](/componentone/api/wpf/online-flexreport/dotnet-framework-api/C1.WPF.FlexViewer.4.6.2/C1.WPF.FlexViewer.C1FlexViewerPane.MinZoomFactor.html) and [MaxZoomFactor](/componentone/api/wpf/online-flexreport/dotnet-framework-api/C1.WPF.FlexViewer.4.6.2/C1.WPF.FlexViewer.C1FlexViewerPane.MaxZoomFactor.html) to limit the zoom level of the displayed report.

In addition, [C1FlexViewerPane](/componentone/api/wpf/online-flexreport/dotnet-framework-api/C1.WPF.FlexViewer.4.6.2/C1.WPF.FlexViewer.C1FlexViewerPane.html) 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](/componentone/api/wpf/online-flexreport/dotnet-framework-api/C1.WPF.FlexViewer.4.6.2/C1.WPF.FlexViewer.C1FlexViewerPane.ZoomMode.html) property. The [ZoomMode](/componentone/api/wpf/online-flexreport/dotnet-framework-api/C1.WPF.FlexViewer.4.6.2/C1.WPF.FlexViewer.C1FlexViewerPane.ZoomMode.html) property accepts the following values from the [FlexViewerZoomMode](/componentone/api/wpf/online-flexreport/dotnet-framework-api/C1.WPF.FlexViewer.4.6.2/C1.WPF.FlexViewer.FlexViewerZoomMode.html) 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)</c1:C1FlexViewerPane> tags in XAML:

```xml
<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](/componentone/api/wpf/online-flexreport/dotnet-framework-api/C1.WPF.FlexViewer.4.6.2/C1.WPF.FlexViewer.FlexViewerZoomMode.html) enum. The following code illustrates the use of **ZoomMode** property and **FlexViewerZoomMode** enum. This example uses the sample created in [FlexReport Quick Start](/componentone/docs/wpf/online-flexreport/quickstart).

```vbnet
ViewerPane.ZoomMode = FlexViewerZoomMode.WholePage
```

```csharp
ViewerPane.ZoomMode = FlexViewerZoomMode.WholePage;
```

![](https://cdn.mescius.io/document-site-files/images/96483bc4-d0db-40fa-a0e4-c5e6a4a56825/images/zoommodereportpreview.png)

## 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](/componentone/api/wpf/online-flexreport/dotnet-framework-api/C1.WPF.FlexViewer.4.6.2/C1.WPF.FlexViewer.C1FlexViewerPane.RotateView.html) property of [C1FlexViewerPane](/componentone/api/wpf/online-flexreport/dotnet-framework-api/C1.WPF.FlexViewer.4.6.2/C1.WPF.FlexViewer.C1FlexViewerPane.html) class. The [RotateView](/componentone/api/wpf/online-flexreport/dotnet-framework-api/C1.WPF.FlexViewer.4.6.2/C1.WPF.FlexViewer.C1FlexViewerPane.RotateView.html) property accepts the following values from the [FlexViewerRotateView](/componentone/api/wpf/online-flexreport/dotnet-framework-api/C1.WPF.FlexViewer.4.6.2/C1.WPF.FlexViewer.FlexViewerRotateView.html) 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](/componentone/api/wpf/online-flexreport/dotnet-framework-api/C1.WPF.FlexViewer.4.6.2/C1.WPF.FlexViewer.FlexViewerRotateView.html) enum for rotating the view of the report by 90 degree clockwise. This example uses sample created in [FlexReport Quick Start](/componentone/docs/wpf/online-flexreport/quickstart).

```vbnet
ViewerPane.RotateView = FlexViewerRotateView.Rotation90Clockwise
```

```csharp
ViewerPane.RotateView = FlexViewerRotateView.Rotation90Clockwise;
```

![](https://cdn.mescius.io/document-site-files/images/96483bc4-d0db-40fa-a0e4-c5e6a4a56825/images/rotatedview.png)

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.