FlexReport for WPF
クイックスタート

Learn how to create a simple report application using the WPF FlexReport control. Follow the steps below to get started:

Note: The .NET Framework version for C1FlexReportDesigner.exe (64-bit platform) and C1FlexReportDesigner32.4.exe (32-bit platform) are located at C:\Program Files (x86)\ComponentOne\Apps\v4.5.2 on your computer. Likewise, the FlexReportDesigner for .NET version is located at C:\Program Files (x86)\ComponentOne\Apps\v6.0

Create a Report Definition

You can create report definitions using the FlexReport Designer application (with zero code) as well as programmatically. The easiest way to create a report definition using the FlexReportDesigner app, which is a stand-alone application similar to the report designer in Microsoft Access and Crystal Reports.

FlexReportDesigner provides the FlexReport Wizard, a report engine to create reports. With this wizard, you can choose a suitable data source, select fields, layouts and style etc.

To begin, complete the following steps:

  1. Run the C1FlexReportDesigner.exe file.
  2. Go to File menu in the menu bar and select the New command to create a new empty report definition file.
  3. Click New Report dropdown from the Reports tab located on the extreme left of designer and select Report Wizard.

    Select Report Wizard

    The FlexReport Wizard opens.

    Report Wizard

    Here, we have used 'OLEDB Data Provider' as the data provider. You can also choose any other data provider from the drop-down button.

    Add a DataSource to Report

    Using the FlexReport Wizard, complete the following steps to add a data source in the new report:

    1. Click the ellipsis button to bring up the standard connection string builder. The Data Link Properties dialog box opens.

      Small window with link provider for data

    2. Select the Provider tab and select a data provider from the list. For this example, select Microsoft Jet 4.0 OLE DB Provider.
    3. Click the Next button or select the Connection tab. Now, you must choose a data source.
    4. Click the ellipsis button to select a database. The Select Access Database dialog box appears. For this example, select the C1NWind.mdb located in the Common folder in the ComponentOne Samples directory (by default installed in the Documents folder). Note that this directory reflects the default installation path and its path may be different if you made changes to the installation path.

      Small window with option to provide database name

      You can test the connection and click OK.
    5. Click OK to close the Data Link Properties dialog box.
    6. Once you have selected your data source, you can select a table, view, or stored procedure to provide the actual data.Click Next.
    7. Select the Data source tab and select the Products table from the Tables list.
      Select the Data Source for the new report.

    Select Data Fields

    1. Select the fields you want to include in the report using the FlexReport Wizard.
      Small window with option to select fields
      This page in the Wizard contains a list of fields available from the recordset you selected, and the two lists that define the group and detail fields for the report. Group fields define how the data will be sorted and summarized, and Detail fields define what information you want to appear in the report.
      You can move fields from one list to another by dragging them with your mouse pointer. Drag fields into the Detail list to include them in the report, or drag within the list to change their order. Drag fields back into the Available list to remove them from the report. With your mouse pointer, select the CategoryID field and drag it into the Groups list.                                                   
    2. Press the >> button to move the remaining fields into the Detail list.
      Selecting Fields in FlexReport Wizard
      Click Next.                             

    Select Layout and Style

    1. Select the layout for the new report. FlexReport Wizard lets you select data layouts, page orientation and choose to adjust fields to fit the page. Keep the Outline layout.

      Selecting Layout in FlexReport Wizard

    2. Click Next.
    3. Select the style for the new report. The FlexReport Wizard lets you to select the fonts and colors that will be used in the new report.

      Selecting Style in FlexReport Wizard

    4. Click Next.

    Add Title and Preview the Report

    1. Select a title for the new report.
      Enter a title for the new report, Products Report, for example.

      Enter Title in FlexReport Wizard

    2. Choose Preview the report option and click Finish. You will immediately see the report in the preview pane of the Designer.

      Window that previews the report

Load and render the report

To load a report definition from a file at design time, complete one of the following tasks:

  • Right-click the C1FlexReport component and select the Load Report menu option.

    OR

  • Click the smart tag (snapshot of smart tag) above the C1FlexReport component and select Load Report from the C1FlexReport Tasks menu.

Using the Load Report dialog box, select the report you want and complete the following tasks:

  1. Click the ellipsis button. The Open dialog box appears.
  2. Browse to the location that you just saved your Products Report.flxr file, select it, and click Open.
  3. The available report definitions are listed in the Report drop-down box. Select the Products Report definition to load.
  4. Click Load and OK to close the dialog box.
    Loading report in the C1FlexReport Component.

The output will be as shown below:

Display report in FlexViewer.

FlexReport for WPFを使用して簡単なWPFアプリケーションを作成するには、次の手順に従います。
  1. 手順 1:レポート定義の作成
  2. 手順 2:レポートのロード
  3. 手順 3:レポートのレンダリング

手順 1:レポート定義の作成

FlexReport ウィザードを使用して、FlexReportDesignerアプリケーションで新しいレポート定義を作成します。 レポート定義を作成するには、次の手順を実行します。

  1. 32 ビット版のレポートデザイナーアプリを実行します。ファイルメニューから新規を選択します。
  2. デザイナーの左端にある「レポート」タブの「新規レポート」ドロップダウンをクリックし、[レポートウィザード]を選択します。
  3. データプロバイダドロップダウンメニューからOLEDBデータプロバイダを選択し、接続文字列のテキストボックスの横にある省略符(...)ボタンをクリックして、プロバイダタブ内のMicrosoft Jet 4.0 OLE DBプロバイダと接続タブ内のC1Nwind.mdbデータベースを選択します。
    C1Nwind.mdbデータベースは、ドキュメント¥ComponentOne Samples¥Commonフォルダに見つけることができます。
  4. 「データソース」タブからテーブルを選択し、「次へ」をクリックします。この例では、「Products」テーブルを選択しています。
  5. レポートをデータソースに接続した後、レポートのフィールド、レイアウト、およびスタイルを選択します。レポートに適切なタイトルを付けて、「完了」をクリックします。
先頭に戻る

手順 2:レポートのロード

ファイルからレポート定義をロードするには、次の手順を実行します。

  1. Visual Studioで新しいWPFアプリケーションを作成します。
  2. XAML デザインに Button コントロールと C1FlexViewer コントロールを追加します。 C1FlexViewerコントロールの名前をViewerに設定します。
  3. 手順 1:レポート定義の作成」でデザイナを使用してプロジェクトに作成したレポート定義ファイルを追加します。 ここでは、というProducts Report という名前のレポートを使用しています。
  4. アプリケーションにC1.WPF.FlexReport.4.dllへの参照を追加します。
  5. コードに次の名前空間を追加します。
    • C1.WPF.FlexReport
  6. コードビューでは、Button_Clickイベント内に次のコードを追加して、レポートをロードします。
    FlexReport flexReport = new FlexReport();
    flexReport.Load(@"../../Resources/FlexDataBinding.flxr", "SimpleData");
    DataSource ds1 = new DataSource();
    ds1.Name = "Main";
    ds1.DataProvider = DataProvider.OLEDB;
    
先頭に戻る

手順 3:レポートのレンダリング

レポート定義を作成してC1FlexReport にロードしたら、レポートをFlexViewer コントロールにレンダリングできます。 レポートをレンダリングするには、コードビューでWindow_Loaded イベントに次のコードを追加します。

ds1.ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=Resources\\C1NWind.mdb;Persist Security Info=False";
ds1.RecordSource = "Products";
ds1.RecordSourceType = RecordSourceType.TableDirect;
flexReport.DataSources.Add(ds1);
flexViewer.DocumentSource = flexReport;

FlexViewer にレンダリングされて表示されたレポートを次に示します。

Snapshot of report after rendering

先頭に戻る