Syleing a DocumentViewer to be like Teleriks controlls.

[Scott]

I have a DocumentViewer that is displaying XPS content, I also use Telerik's controls for showing a report content. What I am attempting to do is get my XPS and report to have the same look, and I have everything matching except the scroll bars.

I have the style defined of the report as follows

<Style TargetType="telerikReporting:ReportViewer">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="telerikReporting:ReportViewer">
        <Grid x:Name="LayoutRoot">
          <Border BorderBrush="{StaticResource OuterControlBorderBrush}"
              BorderThickness="1"
              CornerRadius="6">
            <Border
              Margin="0"
              Padding="6"
              Background="{StaticResource ControlBackgroundBrush}"
              BorderBrush="{StaticResource InnerControlBorderBrush}"
              BorderThickness="1"
              CornerRadius="5">
              <Grid>
                <Grid.RowDefinitions>
                  <RowDefinition Height="auto" />
                  <RowDefinition Height="*" />
                  <RowDefinition Height="2" />
                  <RowDefinition Height="auto" />
                </Grid.RowDefinitions>

                <!-- Toolbar -->
                <telerik:RadToolBar Grid.Row="0"  >
                  <!-- Cut out to make the post shorter-->
                </telerik:RadToolBar>

                <Grid Grid.Row="1" >
                  <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                  </Grid.ColumnDefinitions>

                  <!-- Viewer Area -->
                  <Border Grid.Column="2"
                    CornerRadius="4"
                    BorderThickness="1"
                    BorderBrush="{StaticResource OuterViewerAreaBorderBrush}">
                    <Border BorderThickness="1"
                      Margin="0"
                      CornerRadius="3"
                      Background="{StaticResource InnerViewerAreaBackground}"
                      BorderBrush="{StaticResource InnerViewerAreaBorderBrush}">
                      <Grid>
                        <ScrollViewer x:Name="PageScrollViewer"
                          Visibility="Visible"
                          BorderThickness="0"
                          HorizontalScrollBarVisibility="Auto"
                          VerticalScrollBarVisibility="Visible">
                          <telerik:StyleManager.Theme>
                            <telerik:Office_SilverTheme/>
                          </telerik:StyleManager.Theme>
                          <ContentControl x:Name="PageContainer">
                            <ContentControl.Resources>
                              <ControlTemplate x:Key="PrintPreviewTemplate">
                                <Border x:Name="PageBorder"
                                  Background="{StaticResource PageBorderBackground}"
                                  BorderBrush="{StaticResource PageBorderBorderBrush}"
                                  BorderThickness="1"
                                  Margin="10"
                                  VerticalAlignment="Center"
                                  HorizontalAlignment="Center">
                                  <telerik:LayoutTransformControl
                                x:Name="PageContainer"
                                LayoutTransform="{Binding PageTransform}"
                                Content="{Binding PageRoot}" />
                                </Border>
                              </ControlTemplate>
                              <ControlTemplate x:Key="InteractiveTemplate">
                                <ContentPresenter Margin="10"
                                        HorizontalAlignment="Left"
                                        VerticalAlignment="Top">
                                  <ContentPresenter.Content>
                                    <telerik:LayoutTransformControl
                                    x:Name="PageContainer"
                                    LayoutTransform="{Binding PageTransform}"
                                    Content="{Binding PageRoot}" />
                                  </ContentPresenter.Content>
                                </ContentPresenter>
                              </ControlTemplate>
                            </ContentControl.Resources>
                          </ContentControl>
                        </ScrollViewer>

                        <!-- Progress -->
                        <telerikReporting:DialogBox x:Name="ViewerProgressMessage">
                          <!-- Cut out to make the post shorter-->
                        </telerikReporting:DialogBox>

                        <!-- Error message -->
                        <TextBox x:Name="ViewerError">
                            <!-- Cut out to make the post shorter-->
                        </TextBox>

                        <!-- Export dialog -->
                        <telerikReporting:DialogBox x:Name="ExportDialog">
                          <!-- Cut out to make the post shorter-->
                        </telerikReporting:DialogBox>
                      </Grid>
                    </Border>
                  </Border>
                </Grid>

                <!-- Status Area -->
                <Grid  Grid.Row="4">
                  <!-- Cut out to make the post shorter-->
                </Grid>
              </Grid>
            </Border>
          </Border>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

I extrated the style of the DocumentViewer using Blend and attempted to override the ScrollViewer's style to use the same theme

<!-- Office_SilverTheme -->
<SolidColorBrush x:Key="OuterControlBorderBrush" Color="#3FFFFFFF" />
<SolidColorBrush x:Key="InnerControlBorderBrush" Color="#FF7E7E95" />
<LinearGradientBrush x:Key="ControlBackgroundBrush" EndPoint="0.5,1" StartPoint="0.5,0">
  <GradientStop Color="#FFF0F0F9"/>
  <GradientStop Color="#FF9F9FBB" Offset="0.1"/>
  <GradientStop Color="#FFE1E1EA" Offset="1"/>
</LinearGradientBrush>

<SolidColorBrush x:Key="OuterViewerAreaBorderBrush" Color="#66FFFFFF" />
<SolidColorBrush x:Key="InnerViewerAreaBorderBrush" Color="#FF7E7E95" />
<SolidColorBrush x:Key="InnerViewerAreaBackground" Color="White" />
<SolidColorBrush x:Key="ForegroundBrush" Color="Black" />
<SolidColorBrush x:Key="PageBorderBackground" Color="White" />
<SolidColorBrush x:Key="PageBorderBorderBrush" Color="DarkGray" />
<SolidColorBrush x:Key="ErrorMessageForeground" Color="Gray" />
<!-- Office_SilverTheme -->

<Style x:Key="TelerikDocumentStyle" BasedOn="{x:Null}" TargetType="{x:Type DocumentViewer}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type DocumentViewer}">
        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Focusable="False">
          <Grid Background="{TemplateBinding Background}" KeyboardNavigation.TabNavigation="Local">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="*"/>
              <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <ContentControl Grid.Column="0" Focusable="{TemplateBinding Focusable}" Grid.Row="0" Style="{DynamicResource {ComponentResourceKey ResourceId=PUIDocumentViewerToolBarStyleKey, TypeInTargetAssembly={x:Type Documents:PresentationUIStyleResources}}}" TabIndex="0"/>
            <ScrollViewer x:Name="PART_ContentHost" CanContentScroll="true" Grid.Column="0" Focusable="{TemplateBinding Focusable}" HorizontalScrollBarVisibility="Auto" IsTabStop="true" Grid.Row="1" TabIndex="1">
              <telerik:StyleManager.Theme>
                <telerik:Office_SilverTheme/>
              </telerik:StyleManager.Theme>
            </ScrollViewer>
            <DockPanel Grid.Row="1">
              <FrameworkElement DockPanel.Dock="Right" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
              <Rectangle Height="10" Visibility="Visible" VerticalAlignment="top">
                <Rectangle.Fill>
                  <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                    <LinearGradientBrush.GradientStops>
                      <GradientStopCollection>
                        <GradientStop Color="#66000000" Offset="0"/>
                        <GradientStop Color="Transparent" Offset="1"/>
                      </GradientStopCollection>
                    </LinearGradientBrush.GradientStops>
                  </LinearGradientBrush>
                </Rectangle.Fill>
              </Rectangle>
            </DockPanel>
            <ContentControl x:Name="PART_FindToolBarHost" Grid.Column="0" Focusable="{TemplateBinding Focusable}" Grid.Row="2" TabIndex="2"/>
          </Grid>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

However when I try it the scroll arrows are missing and the three dashes are missing from the middle of the bars. What do I need to do to correctly style a DocumentViewer to have the same scroll bar style as the Report controll?

[Yana]

Hi Scott,

Please check this help topic where it is explained how to set a theme to the MS controls (including ScrollViewer).

I hope this will help.

Regards,
Yana
Telerik

 

 

[Dennis]

Hi,

 

we used a style similar to the one of Scott. It worked perfect. Now we updated our Reporting-dlls to Version 2016 R2.

The report crashes when the contentcontrol inside the viewer area.

 

                  <!--Viewer Area-->
                  <Border Grid.Column="2" Background="{DynamicResource GiraColorCenterFrameBackground}">
                    <Grid>
                      <ScrollViewer x:Name="PageScrollViewer" 
                                    Visibility="Visible"
                                    BorderThickness="0"
                                    HorizontalScrollBarVisibility="Auto" 
                                    VerticalScrollBarVisibility="Visible">
                        <!--TODO The Problem with the crash lies here-->
                        <!--<ContentControl x:Name="PageContainer">
                          <ContentControl.Resources>
                            <ControlTemplate x:Key="PrintPreviewTemplate">
                              <Border x:Name="PageBorder"
                                      Background="{DynamicResource GiraColorReportViewerPageBackground}"                                  
                                      BorderThickness="0 0 0 1"
                                      Margin="10"
                                      VerticalAlignment="Center"
                                      HorizontalAlignment="Center">

                                <telerikPrimitives:LayoutTransformControl x:Name="PageContainer" 
                                                                          LayoutTransform="{Binding PageTransform}"
                                                                          Content="{Binding PageRoot}" />
                              </Border>
                            </ControlTemplate>
                            <ControlTemplate x:Key="InteractiveTemplate">
                              <Border x:Name="PageBorder"
                                      Background="{DynamicResource GiraColorReportViewerPageBackground}"                          
                                      BorderThickness="0 0 0 1"
                                      Margin="10"
                                      Padding="0"
                                      VerticalAlignment="Top"
                                      HorizontalAlignment="Center">
                                <telerikPrimitives:LayoutTransformControl x:Name="PageContainer" 
                                                                          LayoutTransform="{Binding PageTransform}"
                                                                          Content="{Binding PageRoot}"
                                                                          Margin="20,10,20,10"
                                                                          Padding="20,10,20,10"/>
                              </Border>
                            </ControlTemplate>
                          </ContentControl.Resources>
                        </ContentControl>-->
                      </ScrollViewer>