Embedding Beautiful Reporting into Your WPF Applications

栏目: IT技术 · 发布时间: 4年前

内容简介:Here’s what you need to do to implement the Telerik Report Viewer in WPF applications and connect it to Telerik Reporting REST service. Learn more.In this step-by-step tutorial, I will demonstrate how to use the Telerik Report Viewer in the WPF application

Here’s what you need to do to implement the Telerik Report Viewer in WPF applications and connect it to Telerik Reporting REST service. Learn more.

In this step-by-step tutorial, I will demonstrate how to use the Telerik Report Viewer in the WPF application. This tutorial covers the following topics:

  • What is the Telerik Report Viewer?
  • How can it be integrated with the app?
  • How to implement the Report Viewer in a WPF application and connect it to an existing Telerik Reporting REST service
  • Report Viewer toolbar

What is the Telerik Report Viewer?

The Telerik WPF Report Viewer is suitable for WPF and WinForms projects. The viewer is built with Telerik UI for WPF controls providing better look and feel, and functionality. It can operate with an embedded reporting engine or as a client of Telerik Reporting REST Service or Telerik Report Server

. It allows developers to deliver reports to any rich application developed with the Windows Presentation Foundation (WPF).

The purpose of the WPF Report Viewer control is to display Telerik reports and allow the user to interact with them. Reports are processed and rendered on the client machine. The report in the viewer is rendered as standard XAML elements, like Canvas and TextBlock, through Telerik Reporting XAML for WPF rendering mechanism.

Save Your Seat: Reporting In-Depth—How to Streamline Reporting with Ease

How Can it Be Integrated with the App?

To integrate the Telerik Report Viewer in a WPF application, the following are the prerequisites to use:

System Requirement

  • Visual Studio 2010 or later
  • .NET Framework 4 or above
  • If the WPF Report Viewer will connect to a Telerik Reporting REST service, make sure the service is up and running
  • A running Telerik Reporting REST Service endpoint to use in a WPF application (find more infohere)
  • Install the Telerik Report Viewer Window item template (find more infohere)

How to Implement the Report Viewer in a WPF Application

The WPF ReportViewer control is a composite of Telerik UI for WPF controls, and the viewer’s functionality resides in Telerik.ReportViewer.Wpf.dll and the viewer’s UI in Telerik.ReportViewer.Wpf.xaml. Following are the steps to use this in WPF:

Step 1:Create a new WPF application project in Visual Studio.

Step 2:Next, right-click on the project and select Add , then select New Item from the menu. It will open the Add New Item window, as below screenshot:

Embedding Beautiful Reporting into Your WPF Applications

Step 3:Select WPF from the left side menu, and then you will see a list of WPF controls or templates and select Telerik Report Viewer Window R2 2020 .

Embedding Beautiful Reporting into Your WPF Applications

Step 4:Provide the name for it, then click the Add button. It will open the Add new Report Viewer page. Select REST service from the left side and provide your reporting REST service path as below:

Embedding Beautiful Reporting into Your WPF Applications

Step 5:Click on Next button, and it will open the next page to configure the report source. Select the first option for report definition and provide the .trdp file path as below:

Embedding Beautiful Reporting into Your WPF Applications

Step 6:Click the Next button, and it will open the last page for Configure Report Viewer . Tick the checkbox for Enable accessibility .

Embedding Beautiful Reporting into Your WPF Applications

Step 7:Click the Finish button. It will show the static HTML log page with a message and detailed summary as below:

Embedding Beautiful Reporting into Your WPF Applications

It will update the App.xaml file with ResourceDictionaries as below code:

App.xaml

<Application
  x:Class="wpf_report_viewer.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:wpf_report_viewer"
  StartupUri="MainWindow.xaml">
  <Application.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary

         Source="/Telerik.ReportViewer.Wpf.Themes;component/Themes/Material/System.Windows.xaml" />
        <ResourceDictionary
          Source="/Telerik.ReportViewer.Wpf.Themes;component/Themes/Material/Telerik.Windows.Controls.xaml" />
        <ResourceDictionary
          Source="/Telerik.ReportViewer.Wpf.Themes;component/Themes/Material/Telerik.Windows.Controls.Input.xaml" />
        <ResourceDictionary
          Source="/Telerik.ReportViewer.Wpf.Themes;component/Themes/Material/Telerik.Windows.Controls.Navigation.xaml" />
        <ResourceDictionary
          Source="/Telerik.ReportViewer.Wpf.Themes;component/Themes/Material/Telerik.ReportViewer.Wpf.xaml" />
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Application.Resources>
</Application>

It will add the Telerik references as below:

Embedding Beautiful Reporting into Your WPF Applications

Step 8:In the previous steps we have added one .xaml file as the code below:

newly-added.xaml

<Window x:Class="wpf_report_viewer.TelerikReportViewer"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:wpf_report_viewer"
    xmlns:tr="http://schemas.telerik.com/wpf"
    xmlns:telerikReporting="clr-namespace:Telerik.Reporting;assembly=Telerik.Reporting"
    Title="Report Viewer Window">
    <Grid x:Name="LayoutRoot">
        <Grid Margin="20" >
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <tr:ReportViewer Grid.Row="0" x:Name="ReportViewer1" 
                             HorizontalAlignment="Stretch" EnableAccessibility="True"
                             ReportEngineConnection="engine=RestService;uri=http://localhost:12345/api/reports">
              <tr:ReportViewer.ReportSource>
                <telerikReporting:UriReportSource 
                    Uri="path\Reports\Product Catalog.trdp" />
              </tr:ReportViewer.ReportSource>
            </tr:ReportViewer>
        </Grid>
    </Grid>
</Window>

Design

Embedding Beautiful Reporting into Your WPF Applications

Step 9:Lastly, in the App.xaml file, we need to replace the StartupUri of the Application tag as below:

From

<Application
  x:Class="wpf_report_viewer.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:wpf_report_viewer"
  StartupUri="MainWindow.xaml"/>

To

<Application
  x:Class="wpf_report_viewer.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:wpf_report_viewer"
  StartupUri="newly-added.xaml"/>

The value we have changed is so that when the application starts it will open the recently added Telerik Report Viewer XAML file; otherwise it would show the MainWindow XAML.

Step 10:At this point, we’re all set. Start the application, and it should display the WPF window with the rendered report in it as shown below:

Embedding Beautiful Reporting into Your WPF Applications

In case the report is not displayed, please make sure the Reporting REST service is running, following the suggestions in this Knowledge Base article .

The Report Viewer is divided into three main parts: the first part on top for the toolbar, the second part on the left with the toolbar for the filter, and the third part beside the filter for showing the data.

Report Viewer Toolbar

The toolbar of the WPF Report Viewer provides basic functionality for interacting with the currently loaded report:

Embedding Beautiful Reporting into Your WPF Applications

  • Navigate back in history
  • Navigate forward in history
  • Refresh
  • Go to the first page
  • Go to the previous page
  • Go to a specific page
  • Total number of pages
  • Go to next page
  • Go to the last page
  • Print preview: switches between Logical and Physical page renderer
  • Print
  • Export: seeRendering Extensions for available export formats.
  • Show/Hide document map
  • Show/Hide parameters area
  • Zooming

Filter- In the output screenshot, we have seen the Language drop-down is there above the rest of the filters. Based on the filter selection of the language selection, the report data is shown for the catalog in that language. The default language selection is English . When we change it to another language, like French , it will show the French catalog results:

Embedding Beautiful Reporting into Your WPF Applications

You can download this example from GitHub .

Grab the eBook: A Quick Guide to Expert .NET Reporting Tools

Conclusion

In this article, we discussed what the Telerik Report Viewer is, its prerequisites, how to use or work with it in a WPF application, and the Report Viewer toolbar for users. If you have any suggestions or queries regarding this article, please leave a comment.

“Learn It, Share it.”

Tried Telerik DevCraft?

You can chooseTelerik Reportingand Telerik Report Server as individual products or enjoy them as part of the great Telerik DevCraft bundles.

Try Telerik DevCraft

Telerik DevCraft is the finest software developer tools collection across .NET and JavaScript technologies, which includes modern, feature-rich and professionally designed UI components for web, desktop and mobile applications, reporting and report management solutions, document processing libraries, automated testing and mocking tools from the Telerik and Kendo UI suites. DevCraft will arm you with everything you need to deliver outstanding applications in less time and with less effort. With the backing of our legendary support team, which consists of the developers who build the products, and a ton of resources and trainings you can rest assured that you have a stable partner to rely on for your everyday challenges along your software development journey.


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

编写可读代码的艺术

编写可读代码的艺术

Boswell, D.、Foucher, T. / 尹哲、郑秀雯 / 机械工业出版社 / 2012-7-10 / 59.00元

细节决定成败,思路清晰、言简意赅的代码让程序员一目了然;而格式凌乱、拖沓冗长的代码让程序员一头雾水。除了可以正确运行以外,优秀的代码必须具备良好的可读性,编写的代码要使其他人能在最短的时间内理解才行。本书旨在强调代码对人的友好性和可读性。 本书关注编码的细节,总结了很多提高代码可读性的小技巧,看似都微不足道,但是对于整个软件系统的开发而言,它们与宏观的架构决策、设计思想、指导原则同样重要。编......一起来看看 《编写可读代码的艺术》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码