ActiveReports 18 .NET Edition
Developers / Create Designer and Viewer Applications / .NET Viewer Application / WPF Viewer / Customize the WPF Viewer
In This Topic
    Customize the WPF Viewer
    In This Topic

    Let us see how we can customize different elements of WPF Viewer.

    Add the Customization Template to the WPF Project

    The ActiveReports WPF Viewer is a customizable control. You can easily change the look of the WPF Viewer and its elements, such as the error panel, search panel, sidebar and toolbar by modifying properties in the default WPF Viewer template (DefaultWPFiewerTemplates.xaml).

    Once you copy the template, you can modify the default style and apply it to your viewer by creating the desired style and setting its Template property.

    Note that while modifying the template, do not remove the required template parts. The required parts are usually marked with the prefix "PART_".

    The template allows you to customize the appearance of viewer and take advantage of XAML-based styling.

    1. Open your WPF project.
    2. In Solution Explorer, select the YourProjectName node.
    3. On the Visual Studio Project menu, click Add Existing Item.
    4. In the dialog that appears, locate and select DefaultWPFViewerTemplates.xaml and click OK. You can find DefaultWPFViewerTemplates.xaml at C:\Program Files\MESCIUS\ActiveReports 18\Deployment\WPF\Templates folder (on a 64-bit Windows operating system, this file is located in C:\Program Files (x86)\MESCIUS\ActiveReports 18\Deployment\WPF\Templates.
    5. On MainWindow.xaml before the opening <Grid> tag, add the following code.
      Paste to the XAML view of MainWindow.xaml before the opening <Grid> tag
      Copy Code
      <Window.Resources>                               
      <ResourceDictionary Source="DefaultWPFViewerTemplates.xaml" />
      </Window.Resources>
      

    Customize the WPF Viewer Sidebar

    Modify Thumbnails

    1. In Solution Explorer, double-click DefaultWPFViewerTemplates.xaml.
    2. In the file that opens, search for "thumbnails tab".
    3. In the GroupBox Header property of <!-- thumbnails tab -->, remove "{Binding Sidebar.ThumbnailsPane.Text}" and type "THUMBNAILS".

      Modify Thumbnails in WPF Viewer          

      Modify Background Color of the Sidebar
    4. Search for "TabControl x:Name="Sidebar".
    5. Add Background="Yellow" after TabControl x:Name="Sidebar".
      Modify Sidebar Background Color in WPF Viewer
    6. Press F5 to see the customized viewer sidebar.
      Customized WPF Viewer Sidebar

    Add a customized button to the WPF Viewer toolbar

    1. In Solution Explorer, select the YourProjectName node.
    2. On the Visual Studio Project menu, select Add New Item.
    3. In the Add New Item dialog that appears, select Class, rename it to MyCommand and click Add.
    4. In the MyCommand.cs/vb that opens, add the following code to implement a command.
      Visual Basic.NET code. Add to MyCommand.vb
      Copy Code
      Implements ICommand
      Public Function CanExecute(ByVal parameter As Object) As Boolean Implements System.Windows.Input.ICommand.CanExecute
          Return True
      End Function
      Public Event CanExecuteChanged(ByVal sender As Object, ByVal e As System.EventArgs) Implements System.Windows.Input.ICommand.CanExecuteChanged
      
      Public Sub Execute(ByVal parameter As Object) Implements System.Windows.Input.ICommand.Execute
          MessageBox.Show("MESCIUS is the world's largest component vendor.", "About Us", MessageBoxButton.OK)
      End Sub
      

       

      C# code. Add after the statement using System.Text
      Copy Code
      using System.Windows.Input;
      using System.Windows;
      
      C# code. Add after the statement using System.Text
      Copy Code
      public class MyCommand : ICommand
          {
              public bool CanExecute(object parameter)
              {
                  return true;
              }
      
              public void Execute(object parameter)
              {
                  MessageBox.Show("MESCIUS is the world's largest component vendor.", "About Us", MessageBoxButton.OK);
              }
      
              public event EventHandler CanExecuteChanged;
          }
                              
      
    5. In Solution Explorer, double-click DefaultWpfViewerTemplates.xaml.
    6. In the file that opens, add the following code.
      XML code. Add to DefaultWpfViewerTemplates.xaml
      Copy Code
      <ResourceDictionary>
       ...                     
      xmlns:YourProjectName="clr-namespace:YourProjectName">
      <YourProjectName:MyCommand x:Key="MyCommand" />
      ...                      
      </ResourceDictionary>
      

      Adding code to DefaultWpfViewerTemplates.xaml file

    7. In the same file, add the following code to add a button.
      XML code. Add to DefaultWpfViewerTemplates.xaml before the closing Toolbar tag
      Copy Code
      <Button Command="{StaticResource MyCommand}" Content="About Us" />                       
      
      Adding code to DefaultWpfViewerTemplates.xaml file
    8. Press F5 to see the new customized button About Us in the Viewer toolbar.

    Remove the Refresh button from the WPF Viewer toolbar 

    1. In Solution Explorer, double-click DefaultWpfViewerTemplates.xaml.
    2. In the file that opens, search for "<!--Refresh btn-->".
    3. Replace the existing content in Visiblity="..." with the following.
      XML code. Add to DefaultWpfViewerTemplates.xaml
      Copy Code
      <Button Command=... Visibility="Collapsed">
      

       Customized WPF Viewer About Us