ActiveReports 6 Online Help Send comments on this topic.
Silverlight Viewer (Pro Edition)
See Also
ActiveReports 6 > ActiveReports User Guide > Samples and Walkthroughs > Walkthroughs > Silverlight Viewer (Pro Edition)

Glossary Item Box

This walkthrough introduces you to Silverlight in ActiveReports and will guide you through the process of creating a Silverlight application in Visual Studio and viewing a report in the ActiveReports Silverlight Viewer.

This walkthrough is split up into the following activities:

When you have completed this walkthrough, you will have a Web site that looks similar to the following:

To create a Silverlight application in Visual Studio 2010

  1. On the Visual Studio File menu, click New Project.
  2. In the New Project dialog that appears, select Silverlight Application in the list of templates.
  3. Specify the name and location of the project and then сlick the OK button.

    Click to EnlargeClick to Enlarge
  4. In the New Silverlight Application dialog, select a method for hosting your Silverlight application and then click the OK button.

    Click to EnlargeClick to Enlarge

To add the Silverlight Viewer control

  1. Open MainPage.xaml in Solution Explorer.
  2. From the Toolbox, drag the Viewer control to Design view of MainPage.xaml.
  3. Drag any corner of the control to enlarge the viewer.
  4. In the Properties window, rename the Viewer control to viewer1.

Note: Microsoft Silverlight 4 Tools is required for the proper functioning of the ActiveReports Silverlight Viewer.

To bind a report to the ActiveReports Silverlight Viewer

ShowTo bind a report stream (aspx page)

  1. In Solution Explorer, select the YourProject.Web directory.
  2. On the Visual Studio Project menu, click Add New item.
  3. From the basic list of templates, select ActiveReports 6 (code-based) File and create a report as decribed in the Basic Data Bound Reports walkthrough.
  4. On the Visual Studio Project menu, click Add New item.
  5. In the dialog that appears, select Web Form.
  6. Rename the file to GetReport.aspx and then click Add.
  7. Double-click the design view of GetReport.aspx to create an event-handling method for the Page_Load event.
  8. On GetReport.aspx.cs/vb that opens, add the following code:
    Paste to GetReport.aspx.cs to the Page_Load event Copy Code
    YourReportName my_rpt = new YourReportName();

my_rpt.Run();

System.IO.MemoryStream ms = new System.IO.MemoryStream();

my_rpt.Document.Save(ms);

Response.BinaryWrite(ms.ToArray());

Response.End();
  9. In Design view of MainPage.xaml, select the Viewer control.
  10. In the Properties window, go to the Events view.
  11. In the list of events, double-click the viewer1_Loaded event.
  12. On MainPage.xaml.cs/vb, add the following code to the viewer1_Loaded event:
    Paste to MainPage.xaml.cs to the viewer1_Loaded event Copy Code
                        
this.viewer1.ViewModel.ReportPath = "../GetReport.aspx";

ShowTo bind an RPX report handler

  1. In Solution Explorer, select the YourProject.Web directory.
  2. On the Visual Studio Project menu, click Add Existing item.
  3. In the dialog that appears, locate and select an RPX report and then click OK.
  4. On MainPage.xaml, add the following code to Design view:
    Paste to the UserControl section on the Design view of MainPage.xaml Copy Code
    xmlns:vvm="clr-namespace:DataDynamics.ActiveReports.ViewModel;assembly=ActiveReports.Silverlight"
  5. On MainPage.xaml, replace the code with the following one:
    Paste to the Design view of MainPage.xaml Copy Code
    d:DesignHeight="300" d:DesignWidth="400" xmlns:my="clr-namespace:DataDynamics.ActiveReports;assembly=ActiveReports.Silverlight"
Loaded="viewer1_Loaded">
  6. In the Properties window, go to the Events view.
  7. In the list of events, double-click the viewer1_Loaded event.
  8. On MainPage.xaml.cs/vb that opens, add the following code to the viewer1_Loaded event:
    Paste to MainPage.xaml.cs to the viewer1_Loaded event Copy Code
    var relPath = new Uri("../YourReportName.rpx?OutputFormat=Rdf3", UriKind.RelativeOrAbsolute);
    viewer1.ViewModel.LoadDocument.Execute(relPath);
  9. In Solution Explorer, open the Web.config file.
  10. Add the following code to the Web.config file to set an rpx handler. You can find more information on how to configure http handlers in Configure HTTPHandlers (Pro Edition) and Add Report Links to Web Forms (Pro Edition).
    XML code. Paste in the XML view of the Web.config file inside the system.web section. Copy Code
    <httpHandlers> 
       <add verb="*" path="*.rpx" type="DataDynamics.ActiveReports.Web.Handlers.RpxHandler, ActiveReports.Web, Version=6.0.865.0,
Culture=neutral, PublicKeyToken=cc4967777c49a3ff" />
    </httpHandlers>

    Note: You should update the Version and PublicKeyToken values to reflect the current version of ActiveReports installed on your machine.

    You can find the Version and PublicKeyToken values in the Global Assembly Cache (GAC), C:\WINDOWS\ASSEMBLY.

ShowTo bind an RDF report

  1. In Solution Explorer, select the YourProject.Web directory.
  2. On the Visual Studio Project menu, click Add Existing item.
  3. In the dialog that appears, locate and select an RDF report and click OK. You can find sample RDF reports in the C:\My Documents\GrapeCity\ActiveReports 6\Samples\VB\RDFViewer\RDFs folder.
  4. On MainPage.xaml, add the following code to Design view:
    Paste to the UserControl section on the Design view of MainPage.xaml Copy Code
    xmlns:vvm="clr-namespace:DataDynamics.ActiveReports.ViewModel;assembly=ActiveReports.Silverlight"
  5. On MainPage.xaml, add the following code to the Grid section:
    Paste to the Design view of MainPage.xaml to the Grid section Copy Code
    <Grid x:Name="LayoutRoot" Background="White">
       
  <my:Viewer HorizontalAlignment="Left" Name="viewer1" VerticalAlignment="Top" Height="300" Width="400">
    
    <my:Viewer.ViewModel>
             
      <vvm:ViewerViewModel ReportPath="..\YourReportName.rdf" />
          
    </my:Viewer.ViewModel>
       
  </my:Viewer>
    </Grid>

ShowTo bind an RDF report by using the Viewer.ViewModel.ReportPath property

  1. In Solution Explorer, select the YourProject.Web directory.
  2. On the Visual Studio Project menu, click Add Existing item.
  3. In the dialog that appears, locate and select an RDF report and click OK. You can find sample RDF reports in the C:\My Documents\GrapeCity\ActiveReports 6\Samples\VB\RDFViewer\RDFs folder.
  4. In Design view of MainPage.xaml, select the Viewer control.
  5. In the Properties window, go to the Events view.
  6. In the list of events, double-click the viewer1_Loaded event.
  7. On MainPage.xaml.cs/vb that opens, add the following code to the viewer1_Loaded event:
    Paste to MainPage.xaml.cs to the viewer1_Loaded event Copy Code
     

      viewer1.ViewModel.ReportPath = "../YourReportName.rdf";

ShowTo bind an RDF report by using OpenFileDialog

  1. In Solution Explorer, select the YourProject.Web directory.
  2. On the Visual Studio Project menu, click Add Existing item.
  3. In the dialog that appears, locate and select an RDF report and click OK. You can find sample RDF reports in the C:\My Documents\GrapeCity\ActiveReports 6\Samples\VB\RDFViewer\RDFs folder.
  4. From the Toolbox, drag the Button control onto the Viewer control in Design view of MainPage.xaml.
  5. In the Properties window, rename the Button control to btnOpenReport.
  6. In the list of events, double-click the Click event.
  7. On MainPage.xaml.cs/vb that opens, add the following code to the btnOpenReport_Click event:
    Paste to MainPage.xaml.cs to the btnOpenReport_Click event Copy Code
    OpenFileDialog dialog = new OpenFileDialog();

//Show the dialog

bool? dialogResult = dialog.ShowDialog();

if (dialogResult != true) return;

using (Stream fs = (Stream)dialog.File.OpenRead())

{

   viewer1.ViewModel.LoadDocument.Execute(fs);

}

To preview a report

  1. Press F5 to run the project. The page with the Silverlight Viewer displaying a report, appears in your browser.

To print a report

  1. On the Silverlight Viewer toolbar, click Print.

  2. In the Print dialog that appears, select the printer settings and click Print.

See Also