This is a migrated thread and some comments may be shown as answers.

Syleing a DocumentViewer to be like Teleriks controlls.

2 Answers 56 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Scott
Top achievements
Rank 1
Scott asked on 19 Jun 2014, 04:27 PM
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?

2 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 23 Jun 2014, 11:33 AM
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
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Dennis
Top achievements
Rank 1
answered on 14 Sep 2016, 08:32 AM

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>

Tags
General Discussions
Asked by
Scott
Top achievements
Rank 1
Answers by
Yana
Telerik team
Dennis
Top achievements
Rank 1
Share this question
or