Syleing a DocumentViewer to be like Teleriks controlls.

3 posts, 0 answers
  1. Scott
    Scott avatar
    6 posts
    Member since:
    Jan 2014

    Posted 19 Jun 2014 Link to this post

    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. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 23 Jun 2014 Link to this post

    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.
     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Dennis
    Dennis avatar
    1 posts
    Member since:
    Aug 2013

    Posted 14 Sep Link to this post

    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>

Back to Top