Appearance customization

Let’s see how to customize appearance taking ViewerGridItem as a sample. Suppose it is necessary to change thumbnails borders and page numbers.

Default element style is described below:

 
  1. <Style TargetType="customItems:ViewerGridItem">
  2.         <Setter Property="Template">
  3.             <Setter.Value>
  4.                 <ControlTemplate TargetType="customItems:ViewerGridItem">
  5.                     <Border BorderBrush="{StaticResource ToolTipBorderThemeBrush}"
  6.                             BorderThickness="1">
  7.                         <Grid Background="White">
  8.                             <Image                          
  9.                                 Width="{TemplateBinding ImageWidth}"
  10.                                 Height="{TemplateBinding ImageHeight}"
  11.                                 Margin="5"                                
  12.                                 Source="{Binding _Source}"
  13.                                 Stretch="UniformToFill"
  14.                                 HorizontalAlignment="Center"
  15.                             />
  16.                              <Border Background="#A5000000"
  17.                                     Height="25"
  18.                                     VerticalAlignment="Bottom">
  19.                                 <TextBlock
  20.                                      HorizontalAlignment="Right"
  21.                                      Text="{Binding PageNumber}"
  22.                                      FontFamily="Segoe UI"
  23.                                      FontSize="14"
  24.                                      Padding="5"
  25.                                     Foreground="#CCFFFFFF"/>
  26.                             </Border>
  27.                         </Grid>
  28.                     </Border>
  29.                 </ControlTemplate>
  30.             </Setter.Value>
  31.         </Setter>
  32.     </Style>
 


Let’s make slight changes to the XAML code:

 
  1. <Style TargetType="customItems:ViewerGridItem">
  2.         <Setter Property="Template">
  3.             <Setter.Value>
  4.                 <ControlTemplate TargetType="customItems:ViewerGridItem">
  5.                     <Border BorderBrush="{StaticResource ToolTipBorderThemeBrush}"
  6.                              BorderThickness="3">
  7.                         <Grid Background="White">
  8.                              <Image                          
  9.                                  Width="{TemplateBinding ImageWidth}"
  10.                                  Height="{TemplateBinding ImageHeight}"
  11.                                  Margin="5"                                  
  12.                                  Source="{Binding _Source}"
  13.                                  Stretch="UniformToFill"
  14.                                  HorizontalAlignment="Center"
  15.                             />
  16.                              <Border Background="#A57F3300"
  17.                                      Height="40"
  18.                                      VerticalAlignment="Bottom">
  19.                                  <TextBlock
  20.                                      HorizontalAlignment="Center"
  21.                                      Text="{Binding PageNumber}"
  22.                                      FontFamily="Segoe UI"
  23.                                      FontSize="18"
  24.                                      Padding="5"
  25.                                      Foreground="#CCFFFFFF"/>
  26.                             </Border>
  27.                         </Grid>
  28.                     </Border>
  29.                 </ControlTemplate>
  30.             </Setter.Value>
  31.         </Setter>
  32.     </Style>
 

After the changes have been made you will be able to see that the control appearance is different:


 

Changing application theme

ReportViewer gets fill colors from the theme that the application uses. 

You can change application theme from both XAML:

 
  1. <Application
  2.     ..
  3.     RequestedTheme="Light">
 

And code:

 
  1. public App()
  2. {
  3.     this.InitializeComponent();
  4.     App.Current.RequestedTheme = ApplicationTheme.Light;
  5. }
 

ReportViewer in LightTheme looks as follows:


Add Feedback