Telerik Reporting R1 2017

How to: Add report viewer to a Silverlight application

This article explains the steps needed to create an application which uses the Silverlight report viewer.

  1. First you need to create a Silverlight project. Once you do, add references to the following NoXaml assemblies in your Silverlight project:

    • Telerik.ReportViewer.Silverlight.dll (located in C:\Program Files\Telerik\Reporting R1 2017\Bin)

    • System.Windows.Controls.dll

    • Telerik.Windows.Controls.dll

    • Telerik.Windows.Controls.Input.dll

    • Telerik.Windows.Controls.Navigation.dll

    In case you are still not prepared to migrate to Implicit Styling you can use the binaries that include the xaml. However you will still have to add all the xaml files mentioned in the next step, otherwise the Report Viewer will not show up as it will have no style.

    In case you use Telerik UI for Silverlight only for the report viewer, you can use Telerik UI for Silverlight assemblies and XAML that we provide with the local demos. They are internally unlocked for the Silverlight ReportViewer but can only be used with the report viewer. The Telerik UI for Silverlight assemblies are located in C:\Program Files\Telerik\Reporting R1 2017\Examples\CSharp\SilverlightDemo\bin). The corresponding XAML resources can be found in C:\Program Files\Telerik\Reporting R1 2017\Silverlight\Themes.

    The Silverlight ReportViewer is build with the latest official release of Telerik UI for Silverlight. In this way we provide trouble free upgrade for most of the users. This means that you can use the latest version of Telerik UI for Silverlight in your project and report viewer.

    Note Note

    The files part of Telerik Reporting are the Telerik.ReportViewer.Silverlight.dll and Telerik.ReportViewer.Silverlight.xaml. The rest DLLs and XAML resources must be updated from Telerik UI for Silverlight product folder.

  2. Add the following xaml files, required for the implicit styling of the report viewer:

    • System.Windows.xaml

    • Telerik.Windows.Controls.xaml

    • Telerik.Windows.Controls.Input.xaml

    • Telerik.Windows.Controls.Navigation.xaml

    • Telerik.ReportViewer.Silverlight.xaml

    The Telerik UI for Silverlight xaml files are located in C:\Program Files\Telerik\Reporting R1 2017\Silverlight\Themes).

  3. The next step is to merge these ResourceDictionaries in the App.xaml file:

    XAML
     <Application x:Class="SilverlightApplication1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             >
      <Application.Resources>
        <ResourceDictionary>
          <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/SilverlightApplication1;component/Themes/System.Windows.xaml"/>
            <ResourceDictionary Source="/SilverlightApplication1;component/Themes/Telerik.Windows.Controls.xaml"/>
            <ResourceDictionary Source="/SilverlightApplication1;component/Themes/Telerik.Windows.Controls.Input.xaml"/>
            <ResourceDictionary Source="/SilverlightApplication1;component/Themes/Telerik.Windows.Controls.Navigation.xaml"/>
            <ResourceDictionary Source="/SilverlightApplication1;component/Themes/Telerik.ReportViewer.Silverlight.xaml"/>
          </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
      </Application.Resources>
    </Application>
  4. Add the ReportViewer to the MainPage.xaml from the ToolBox through Visual Studio or Expression Blend. You should skip points #5, #6 and #7 if you have done that, as they describe how to register the report viewer manually.

  5. Open MainPage.xaml

  6. Register the namespace in the following way: xmlns:<Name of namespace>= "<Name of assembly>" in our case xmlns:telerik="clr-namespace:Telerik.ReportViewer.Silverlight;assembly=Telerik.ReportViewer.Silverlight"

  7. Now you would be able to declare the ReportViewer control:

    XAML
    <telerik:ReportViewer></telerik:ReportViewer>
  8. Next we need to set the ReportServiceUri and Report properties of the viewer. The ReportViewerReportServiceUri should point to the Telerik Reporting WCF service:(ReportServiceUri="../ReportService.svc") and the ReportViewerReport should be set to the assembly qualified name of the report you want to show i.e.:(Report="Telerik.Reporting.Examples.CSharp.BarcodesReport, CSharp.ReportLibrary, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null"). Review How To: Use the Report Wizard to create a Band Report topic for information on creating a Telerik Report. The MainPage.xaml should look similar:

    <UserControl x:Class="Telerik.Reporting.CodeSnippets.SilverlightCS.API.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        xmlns:telerik="clr-namespace:Telerik.ReportViewer.Silverlight;assembly=Telerik.ReportViewer.Silverlight">
    
        <Grid x:Name="LayoutRoot">
                <telerik:ReportViewer  x:Name="ReportViewer1" Width="1000"
                  ReportServiceUri="../ReportService.svc"
                  Report="Telerik.Reporting.Examples.CSharp.BarcodesReport, CSharp.ReportLibrary, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null">
                </telerik:ReportViewer>
      </Grid>
    </UserControl>

See Also