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 Background Color of the Sidebar
4. Search for "TabControl x:Name="Sidebar".
5. Add Background="Yellow" after TabControl x:Name="Sidebar".
   
6. Press F5 to see the customized 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>

   

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" />

   
8. Press F5 to see the new customized button About Us in the Viewer toolbar.

Remove the Refresh button from the WPF Viewer toolbar