WPFViewer UI Customization using Expression Blend

Most third party developer components come with numerous features but one major feature that every developer wants is the flexibility to customize the control. ActiveReports 7 WPF Viewer is built keeping this in mind so as to give developers a freehand in customizing most WPF Viewer features.

WPF Viewer is built by using MVVM pattern which decouples the appearance and functionality and allows to easily tune the UI. Developers have access to the in-built template ‘DefaultWPFViewerTemplates.xaml that lets them customize components of Toolbars, Sidebar, Error Panel and Color Schemes at various levels. You can add, modify or remove the existing functionality, even change the look and feel; basically the customization of WPFViewer is limitless.

With Expression Blend, the customization becomes much easier. Let’s walk you through three examples to see how easily WPF Viewer can be customized with minimum effort.

1: To remove an existing toolbar button

Let’s say in an application we want to allow the user to view the report but restrict them from printing it. In such a case the Print button is not required and can be removed from the Viewer toolbar with a few simple steps.

• Add ‘DefaultWPFViewerTemplates.xaml’ in your Visual Studio project from the following location: “C:\Program Files (x86)\ComponentOne\ActiveReports Developer 7\Deployment\WPF\Templates\ DefaultWPFViewerTemplates.xaml”

• Add the following tags in the xaml code of MainWindow .xaml file or the .xaml file that has WPFViewer control to refer to ‘DefaultWPFViewerTemplates.xaml’

  <Window.Resources>  
  <ResourceDictionary Source="DefaultWPFViewerTemplates.xaml" />  
  </Window.Resources>
  

• In Expression Blend, open your project and view ‘DefaultWPFViewerTemplates.xaml’. The entire toolbar is available as individual smaller components in the ‘Resources’ tab on the right-pane.

• Right-click the ‘MainToolbar’ and choose ‘Edit Template’. In order to access the individual components, right-click the Toolbar and choose Edit Template->Edit Current.

• Select the ‘Print’ button and press Delete. This removes the image from the button. Pressing Delete once more will remove the button as well and you get the toolbar without the Print button.

2: To add a new Toolbar Button

Now, suppose in your application you want to let the user choose the reports to display in WPFViewer. In order to implement this you need an additional Open button in the Toolbar which displays the Open File Dialog. For adding a new toolbar button you have to simply

• Select the Toolbar in Blend and open the Items collection from Properties.
• Add a Button from ‘Add another item’ dropdown.

For adding code to open the report in WPFViewer, attach an event handler to the ‘Open’ button by making use of the VisualTreeHelper class in WPF.

private void window1_Loaded(object sender, RoutedEventArgs e)  
{  
  var toolbar = (VisualTreeHelper.GetChild(viewer1, 0) as Grid).FindName("Toolbar") as FrameworkElement;  
  var grid = VisualTreeHelper.GetChild(toolbar, 0) as ToolBarTray;  
  var openButton = (VisualTreeHelper.GetChild(grid, 0) as ToolBar).Items[1] as Button;  
  openButton.Click += (s, ec) =>  
  {  
    var dialog = new Microsoft.Win32.OpenFileDialog();  
    dialog.Filter = "All report Files (*.rpx,*.rdlx,*.rdf*.rdl)|*.rpx;*.rdlx;*.rdlx";  
    bool? result = dialog.ShowDialog();  
    viewer1.LoadDocument(dialog.FileName);  
  };  
}

3: To modify existing color themes in WPFViewer

Color customization can be done easily in Blend by selecting the respective components of the Viewer –Toolbar, Sidebar, ErrorPanel in the ‘DefaultWPFViewerTemplates.xaml’ components and changing their Brushes Background color property to a hexadecimal value in the Properties pane.