# Customize the WPF Viewer

ActiveReports WPF Viewer is a custom control that allows you to view all report types. Learn about the extended customization options of the Viewer.

## Content

Let us see how we can customize different elements of [WPF Viewer](/activereportsnet/docs/v20.1/report-readers/desktop-viewers/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 20\\Deployment\\WPF\\Templates* folder (on a **64-bit Windows operating system**, this file is located in *C:\\Program Files (x86)\\MESCIUS\\ActiveReports 20\\Deployment\\WPF\\Templates*.
5. On MainWindow.xaml before the opening \<Grid> tag, add the following code.

```xml
<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"**.
<br>
    ![Modify Thumbnails in WPF Viewer](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/viewer/wpfnails_groupbox.png)
<br>
    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](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/viewer/wpf_sidebar_background.png)
6. Press **F5** to see the customized viewer sidebar.
    ![Customized WPF Viewer Sidebar](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/viewer/wpf_sidebar_customized.png)

### 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.

    ```vbnet
    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
    ```

    ```csharp
    using System.Windows.Input;
    using System.Windows;
    ```

    ```csharp
    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
    <ResourceDictionary>
     ...                     
    xmlns:YourProjectName="clr-namespace:YourProjectName">
    <YourProjectName:MyCommand x:Key="MyCommand" />
    ...                      
    </ResourceDictionary>
    ```

    ![Adding code to DefaultWpfViewerTemplates.xaml file](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/viewer/wlk_wpfviewer_template.png)
7. In the same file, add the following code to add a button.

    ```xml
    <Button Command="{StaticResource MyCommand}" Content="About Us" />
    ```

    ![Adding code to DefaultWpfViewerTemplates.xaml file](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/viewer/wlk_wpfviewer_addcustombutton.png)
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
<Button Command=... Visibility="Collapsed">
```

![Customized WPF Viewer About Us](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/wpf-customize_about-us.png)