Styling A ScrollViewer/Scrollbar In WPF

A while back I was looking at the Infragistics WPf showcase,Tangerine and I was quite jealous about the scrollbars that they managed to use. I mean styling a Button is one thing, but the ScrollBar is made of lost of nasty different control parts, (Part_XXX elements). Incidently I wrote an article about Part_XXX elements in a WPF article over at codeproject right here if you are interested.

Anyways to cut a long story short I decided to try and have a go at Styling a bigger control such as ScrollViewer. And guess what I managed to do it. Hooray.

This is what it looks like

newstyle.png origstyle.png

My Styled ScrollViewer Original ScrollViewer

This blog entry outlines the steps I went through.

STEP 1

Lookup and copy the original ScrollViewer and ScrollBar Templates from MSDN, for example

http://msdn2.microsoft.com/en-us/library/aa970847(VS.85).aspx
http://msdn2.microsoft.com/en-us/library/ms742173(VS.85).aspx

Then I Pasted that code from MSDN into a Resources file in a WPF window.

STEP 2

I examined the control parts required for the full ScrollViewer/Scrollbar controls. This was fairly ok actually as the MSDN default Styles and pretty easy to follow.

From looking at the default styles it became clear that I needed to look at the following Style/Templates if I wished to re-style a ScrollViewer, as all of these were used in the default Style for the ScrollViewer somewhere

STEP 3

I then decided which parts I want to swap out. I chose to swap out the and proceeded to hack the default Style/Templates to acheive the look I was after.

Anyway the results ScrollViewer looks like the following image

  • RepeatButton
  • Thumb
  • ScrollBar
  • ScrollViewer

When you consider the following image, you can see why these are the Style/Templates that need to be altered

scroll.png

So basically after that, its just a question of cutting code. So withour further ado, here is the code

 


<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    x:Class="ScrollViewerTemplate.Window1"
    x:Name="Window"
    Title="Window1"
    Width="200" Height="200">

  <Window.Resources>

        <!-- All the following is required to Re-Style the ScrollViewer, see 
             http://msdn2.microsoft.com/en-us/library/aa970847(VS.85).aspx
             http://msdn2.microsoft.com/en-us/library/ms742173(VS.85).aspx
             for the default Stles that the ScrollViewer has out of the box
         -->

        <!-- Brushes used in Styling of ScrollViewer -->
        <SolidColorBrush x:Key="StandardBorderBrush" Color="#888" />
        <SolidColorBrush x:Key="StandardBackgroundBrush" Color="#FFF" />
        <SolidColorBrush x:Key="HoverBorderBrush" Color="#DDD" />
        <SolidColorBrush x:Key="SelectedBackgroundBrush" Color="Gray" />
        <SolidColorBrush x:Key="SelectedForegroundBrush" Color="White" />
        <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />
        <SolidColorBrush x:Key="NormalBrush" Color="#888" />
        <SolidColorBrush x:Key="NormalBorderBrush" Color="#888" />
        <SolidColorBrush x:Key="HorizontalNormalBrush" Color="#888" />
        <SolidColorBrush x:Key="HorizontalNormalBorderBrush" Color="#888" />
        <LinearGradientBrush x:Key="ListBoxBackgroundBrush"
            StartPoint="0,0" EndPoint="1,0.001">
            <GradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Color="White" Offset="0.0" />
                    <GradientStop Color="White" Offset="0.6" />
                    <GradientStop Color="#DDDDDD" Offset="1.2"/>
                </GradientStopCollection>
            </GradientBrush.GradientStops>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="StandardBrush"
            StartPoint="0,0" EndPoint="0,1">
            <GradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Color="#FFF" Offset="0.0"/>
                    <GradientStop Color="#CCC" Offset="1.0"/>
                </GradientStopCollection>
            </GradientBrush.GradientStops>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="GlyphBrush" Color="#444" />
        <LinearGradientBrush x:Key="PressedBrush"
            StartPoint="0,0" EndPoint="0,1">
            <GradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Color="#BBB" Offset="0.0"/>
                    <GradientStop Color="#EEE" Offset="0.1"/>
                    <GradientStop Color="#EEE" Offset="0.9"/>
                    <GradientStop Color="#FFF" Offset="1.0"/>
                </GradientStopCollection>
            </GradientBrush.GradientStops>
        </LinearGradientBrush>

        <!-- SrollViewer ScrollBar Repeat Buttons (at each end) -->
        <Style x:Key="ScrollBarLineButton" TargetType="{x:Type RepeatButton}">
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="Focusable" Value="false"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Border
          Name="Border"
          Margin="1"
          CornerRadius="2"
          Background="{StaticResource NormalBrush}"
          BorderBrush="{StaticResource NormalBorderBrush}"
          BorderThickness="1">
                            <Path
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Fill="{StaticResource GlyphBrush}"
            Data="{Binding Path=Content,
                RelativeSource={RelativeSource TemplatedParent}}" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter TargetName="Border" Property="Background"
                                Value="{StaticResource PressedBrush}" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground"
                                Value="{StaticResource DisabledForegroundBrush}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!-- SrollViewer ScrollBar Repeat Buttons (The part in the middle, 
             not the thumb the long area between the buttons ) -->
        <Style x:Key="ScrollBarPageButton" TargetType="{x:Type RepeatButton}">
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="IsTabStop" Value="false"/>
            <Setter Property="Focusable" Value="false"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Border Background="Transparent" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!-- ScrollViewer ScrollBar Thumb, that part that can be dragged
            up/down or left/right Buttons -->
        <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="IsTabStop" Value="false"/>
            <Setter Property="Focusable" Value="false"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Border
          CornerRadius="2"
          Background="{TemplateBinding Background}"
          BorderBrush="{TemplateBinding BorderBrush}"
          BorderThickness="1" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <ControlTemplate x:Key="VerticalScrollBar"
            TargetType="{x:Type ScrollBar}">
            <Grid >
                <Grid.RowDefinitions>
                    <RowDefinition MaxHeight="18"/>
                    <RowDefinition Height="0.00001*"/>
                    <RowDefinition MaxHeight="18"/>
                </Grid.RowDefinitions>
                <Border
      Grid.RowSpan="3"
      CornerRadius="2"
      Background="#F0F0F0" />
                <RepeatButton
      Grid.Row="0"
      Style="{StaticResource ScrollBarLineButton}"
      Height="18"
      Command="ScrollBar.LineUpCommand"
      Content="M 0 4 L 8 4 L 4 0 Z" />
                <Track
      Name="PART_Track"
      Grid.Row="1"
      IsDirectionReversed="true">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton
          Style="{StaticResource ScrollBarPageButton}"
          Command="ScrollBar.PageUpCommand" />
                    </Track.DecreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb
          Style="{StaticResource ScrollBarThumb}"
          Margin="1,0,1,0"
          Background="{StaticResource HorizontalNormalBrush}"
          BorderBrush="{StaticResource HorizontalNormalBorderBrush}" />
                    </Track.Thumb>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton
          Style="{StaticResource ScrollBarPageButton}"
          Command="ScrollBar.PageDownCommand" />
                    </Track.IncreaseRepeatButton>
                </Track>
                <RepeatButton
      Grid.Row="3"
      Style="{StaticResource ScrollBarLineButton}"
      Height="18"
      Command="ScrollBar.LineDownCommand"
      Content="M 0 0 L 4 4 L 8 0 Z"/>
            </Grid>
        </ControlTemplate>
        <!-- HorizontalScrollBar Template using the previously created Templates -->
        <ControlTemplate x:Key="HorizontalScrollBar"
            TargetType="{x:Type ScrollBar}">
            <Grid >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition MaxWidth="18"/>
                    <ColumnDefinition Width="0.00001*"/>
                    <ColumnDefinition MaxWidth="18"/>
                </Grid.ColumnDefinitions>
                <Border
      Grid.ColumnSpan="3"
      CornerRadius="2"
      Background="#F0F0F0" />
                <RepeatButton
      Grid.Column="0"
      Style="{StaticResource ScrollBarLineButton}"
      Width="18"
      Command="ScrollBar.LineLeftCommand"
      Content="M 4 0 L 4 8 L 0 4 Z" />
                <Track
      Name="PART_Track"
      Grid.Column="1"
      IsDirectionReversed="False">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton
          Style="{StaticResource ScrollBarPageButton}"
          Command="ScrollBar.PageLeftCommand" />
                    </Track.DecreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb
          Style="{StaticResource ScrollBarThumb}"
          Margin="0,1,0,1"
          Background="{StaticResource NormalBrush}"
          BorderBrush="{StaticResource NormalBorderBrush}" />
                    </Track.Thumb>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton
          Style="{StaticResource ScrollBarPageButton}"
          Command="ScrollBar.PageRightCommand" />
                    </Track.IncreaseRepeatButton>
                </Track>
                <RepeatButton
      Grid.Column="3"
      Style="{StaticResource ScrollBarLineButton}"
      Width="18"
      Command="ScrollBar.LineRightCommand"
      Content="M 0 0 L 4 4 L 0 8 Z"/>
            </Grid>
        </ControlTemplate>
        <!-- Style for overall  ScrollBar -->
        <Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Style.Triggers>
                <Trigger Property="Orientation" Value="Horizontal">
                    <Setter Property="Width" Value="Auto"/>
                    <Setter Property="Height" Value="18" />
                    <Setter Property="Template"
                        Value="{StaticResource HorizontalScrollBar}" />
                </Trigger>
                <Trigger Property="Orientation" Value="Vertical">
                    <Setter Property="Width" Value="18"/>
                    <Setter Property="Height" Value="Auto" />
                    <Setter Property="Template"
                        Value="{StaticResource VerticalScrollBar}" />
                </Trigger>
            </Style.Triggers>
        </Style>

        <!-- Style for overall  ScrollViewer -->
        <Style x:Key="FavsScrollViewer" TargetType="{x:Type ScrollViewer}">
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ScrollViewer}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>

                            <ScrollContentPresenter Grid.Column="1"/>

                            <ScrollBar Name="PART_VerticalScrollBar"
            Value="{TemplateBinding VerticalOffset}"
            Maximum="{TemplateBinding ScrollableHeight}"
            ViewportSize="{TemplateBinding ViewportHeight}"
            Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
                            <ScrollBar Name="PART_HorizontalScrollBar"
            Orientation="Horizontal"
            Grid.Row="1"
            Grid.Column="1"
            Value="{TemplateBinding HorizontalOffset}"
            Maximum="{TemplateBinding ScrollableWidth}"
            ViewportSize="{TemplateBinding ViewportWidth}"
            Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>

                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

  </Window.Resources>

    <Grid x:Name="LayoutRoot">
        <ScrollViewer     RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Stretch"
                        Margin="0,0,0,0"
                        Width="Auto" HorizontalScrollBarVisibility="Visible"
                        Style="{StaticResource FavsScrollViewer}">
         </ScrollViewer>
    </Grid>
</Window>

And if you want to try this for yourself, here is a VS2008 demo project scrollviewertemplate.zip


 
About these ads

45 thoughts on “Styling A ScrollViewer/Scrollbar In WPF

  1. B says:

    Hi Sacha, interesting article.

    Forgive my ignorance but I haven’t really worked with any WPF or XAML seriously right now as I get limited time due to a full time job but I do have an interest in the field, so this question may be obvious already to some.

    Were you required to write all that XAML manually or is there something in VS2008 that makes this process more time efficient (apart from intellisense)?

    Maybe it just looks like alot to me but for someone who knows what they’re doing it can be produced quite fast. It just seems that when done manually that one typo in “Quotes” could break the whole thing, but then I guess that can apply to anything :)

    However, thanks for taking the time to share this informative knowledge.

  2. sacha says:

    Hello Brendan

    Thanks for taking the time to write a comment.

    Me personally what I do is use VS2008, and for this excercise I copied and pasted the default Styles/Templates from MSDN. This accounts for most of what you see here, apart from the Brush stuff maybe.

    Then I modified it all by hand.

    There are several authoring tools for XAML most notable Expression Blend http://www.microsoft.com/expression/products/overview.aspx?key=blend with which you can indeed dispense with most hand coding solutions. However Blend creates some bulk that you would not get by hand coding.

    At the end of the day its a choice thing, I like Blend a lot, but for Styles/Templates I like to just try ideas in Blend and then hand code in VS2008.

    I hope this answers your query.

  3. sacha says:

    Ed,

    Wow if folk from Infragistics like this post, I must be doing something right.

    Truly awe struck, your people at Infragistics are like way good.

    Thanks a lot

  4. Great article. Helped me a lot in applying my own design to the scrollbar.

    I am more of a Designer, not much into Xaml at the moment. So my question is, did you overwrite the standard-styles of the Scrollbar, as it would be normally?

    Or is it a completely new control-template which functions as the new scrollbar?

    Because I have trouble adjusting the look and feel of those “hidden” standard controls. How do you go about that?

    Thanks a lot in advance.

  5. sacha says:

    Andrej

    Glad you like it.

    This is basically setting all the Styles/Templates that are required to totally re-style a ScrollViewer/Scrollbar.

    I basically started with the standard ones, and changed them to suit.

    Not sure what you mean by “Because I have trouble adjusting the look and feel of those “hidden” standard controls. How do you go about that?”

    What do you mean.

  6. Djo says:

    Hi Sacha,
    I try to learn how to make style for WPF and your (multiples) article always help me.
    Nevertheless, I’m quite disapointed with this one…
    Look at the bottom left of your scrollBars, there is a little grey square. it’s not a real problem with a window but what about a styled listBox (I made a ListBox style with a linearGradientBrush and rounded corners). Could this little square becomes transparent??

    Congratulations for all you wrote, that is very helpfull for beginners and thanks for taking time to read this post (with an ugly english.. I’m sorry)

    Djo

  7. sacha says:

    You know I am a developer, not a UI expert. So if you want rid of that box, set it to transparent.

    I am merely showing you what can be done with Styles/Templates.

    Its not up to me to fix certain issues here and there, thats your job.

    I am merely giving you the tools..How you use them is up to you.

    For me I prefer code…I do delve into design from time to time but mainly I code. So these sort of things dont worry me…but if it worries you then you can fix it.

    I dont mean any offence here, its just that I dont care that much about a little box in a blog post. If it was a production control sure if care…but it aint.

  8. Jon Andersen says:

    Hi Sacha!

    Great job, and thank you very much for this post! It saved me a bunch of time :-)

    Jon

  9. Mark says:

    Thank you for the example. Just one thing. I have been trying to modify this so the ControlTemplate will render the RepeatButtons differently based on which one is being rendered by dynamically changing the CornerRadius’s values (i.e. the top repeat button to have a curved upper right and corner, the bottom repeat button have a curved bottom right corner and so on). But I haven’t been able to figure out how to determine in the ControlTemplate which RepeatButton is currently being rendered. Or maybe there is a better way of accomplishing this. I’m a noob with WPF. Any suggestions?

    thanks

    mark

  10. sacha says:

    I think I see what you want, If I get you right you want the RepeatButtons to look different dependant on which one has mouse over.

    To do this, introduce a trigger to the ControlTemplate for the RepeatButton that is active on IsMousOver or similiar

    Have a look at Styles/Templates at MSDN and look for Triggers or try my own wpf for beginners (Part6) over at codeproject

  11. Mark says:

    Thanks for the quick reply. Actually I want the repeat buttons to look different just based on location. I have a window with rounded corners and wanted the repeat button to sort fit that look. On a vertical scroll bar I want the top repeat button’s top right corner to be rounded and the bottom repeat button’s bottom right corner rounded. So the control template needs to know which button is being drawn so that it can chage the Border.CornerRadius property correctly. For example:

    The Border.CornerRadius for the top repeat button would be “0,6,0,0″ and for the bottom it would be “0,0,6,0″.

    I attemped this with a Converter but needed to send a variable(Name property of RepeatButton) to the Converter through the ConverterParameter, but couldn’t figure out the syntax. Can a variable be sent with ConverterParameter? I’ve only seen static values in all the examples I’ve come across.

    Thanks again for helping. Sorry, it’s hard to describe exactly what I’m trying to do without a picture.

    mark

  12. Oh I get you.

    Right so what you need to do is just create 2 Styles for the RepeatButtons used in VerticalScrollBar and HorizontalScrollBar.

    So instead of just this one Style called ScrollBarPageButton that is used for all the repeat buttons (at present, look for this you will see 4 instance of RepeatButton. 2 for VerticalScrollBar and 2 for HorizontalScrollBar)

    <RepeatButton
    Style=”{StaticResource ScrollBarPageButton}”
    Command=”ScrollBar.PageUpCommand” />

    So all you need to do is create 4 individual Styles for the 4 repeat buttons.

    1 for left, 1 for right, 1 for up, 1 for down, and just make sure to change the Style within the VerticalScrollBar and HorizontalScrollBar Styles to point to your new Styles, instead of the ScrollBarPageButton as they do at present.

    Though having another look, I dont think its the RepeatButton thats causing the issue. I think its the Style for the Thumb, which is called “ScrollBarThumb”.

    The reason I think this is that the “ScrollBarPageButton” RepeatButton Style has a transparent color, so will not be seen, but the Thumb Style “ScrollBarThumb”, has a seeable Background.

    Still its the same idea, just create 4 seperate Thumb Styles and use these instead of the current “ScrollBarThumb” Styles used in the HorizontalScrollBar/VerticalScrollBar Styles.

    This is what you need to do.

  13. sacha says:

    The one with the scroll on the right is the default scrollviewer template, so just look at the links I mentioned at the top of this article, and then look at the default template.

    I wanted to show that you could change this to left using Styles/Templates

  14. Rahul says:

    Hi,
    I m using this scrollbar/scrollviewer at two places in my application.if i use this technique style is applying to both the scrollbars,I want this to be applied at only one place.Hope u can help me out.

  15. sacha says:

    Rahul

    Give the Style a x:Key=”myScroll” and simple use a “{StaticResource myScroll}” where you want to use the Style and nothing where you don’t

  16. Deos says:

    Hi Sacha,
    Great work, helping me a lot.
    Currently I need small help. I’m working on small application which needs ScrollViewer modification, so I’m trying to use your example as a reference. However, on one of my rows I have following situation:

    In StackPanel, in runtime, I add some buttons and I wish that my ScrollViewer appear on the right side of the column (this is column 0) and StackPanel.
    I’m confused because StackPanel is inside ScrollViewer. How to make arangement.
    Best regards.

  17. Deos says:

    following situation:
    “ScrollViewer Style=”{StaticResource FavsScrollViewer}”
    HorizontalScrollBarVisibility=”Disabled” Grid.Row=”1″ Grid.Column=”0″ VerticalScrollBarVisibility=”Auto”

    “StackPanel Name=”buttonHolder” /”
    “/ScrollViewer”

    Sorry for few posts

  18. sacha says:

    You just need to change the ScrollViewer style. Messing around with the Grid.Columns for the VerticalScrollBar

  19. Deos says:

    Hi Sacha,
    That was first thing I tried, but I’m able only to move ScrollBar inside “his” rows and columns not parent one (in this case StackPanel).
    Thanks for reply…

  20. Deos says:

    Hi Sacha,
    Just to inform other people who may have the same problem like I had, my solution was to remove Style atribute (Style=”{StaticResource FavsScrollViewer}”).
    Best regards.

  21. Sonali says:

    Hi Sacha,

    This was an awesome code snippet… All I had to do was to put this code in windows resources and that’s it.. I did modify the height of repeat button, width of vertical scroll bar and switched from horizontal to vertical scroll bar visibility for my app, but it works great…

    Thanks, your code saved the day for me!!
    Best Regards,
    Sonali

  22. Sonali says:

    Hi Sacha,

    I have a question kind of related to scroll bar…
    I have a listbox and I allow users to scroll through the contents of listbox.

    If I need to track the scroll bar movement in my app, to understand which items are currently being displayed in the listbox, could you tell me how to do that? Forgive my ignorance here, but I am pretty new to WPF…

    it would be great if you could just send me an email.. I will check your blog again tomorrow though…
    Thanks,
    Sonali

  23. Hello Sacha,
    I’ve wrote some markup tags.. [they are not visible]

    Possibility i thought

    listbox.resource
    style targettyp=scrollviewer baseon=dymres myscrollstyle

    Thanks,
    Pradeep

    • sacha says:

      No, unfortunately you need to get right into the Templates for the controls where you wish to apply it, or just have ALL scrollviewer looks the same

  24. Hello Sacha,

    Thanks Sacha, Temporarily defining under control resource is getting style applied. But thumb part is behaving strange. moving is hard when i down my cursor on to the thumb any idea?
    well when i apply style directly to scrollviewer it works

    Thank you,
    Pradeep MJK

  25. karthik says:

    Hi Guys,

    The above sample code works fine. I would like to put the ScrollBar on the right side; How can i do it?

    Please guide me. Thank you.

    • sachabarber says:

      Just change around the grid row and column values for the overall ScrollViewer style. It’s pretty self explanatory, just look at the style for ScrollViewer

  26. Thanks Sacha for this great post!

    One question here – I am not able to find the code with which I can make this scrollbar to align to default(right). Matt give a link but I am afraid it’s dead.

    Please help!

    • sachabarber says:

      You just need to change the Grid.Row and Grid.Column / Grid.RowSpan / Grid.ColumnSpan of the overall style for the ScrollViewer Style, for the HorizontalScrollViewer / VerticalScrollViewer parts, so something like this should work, if you swap out the style of the one in this blog post for the one shown below for the overall ScrollViewer style

      <Style x:Key="FavsScrollViewer" TargetType="{x:Type ScrollViewer}">
                  <Setter Property="OverridesDefaultStyle" Value="True"/>
                  <Setter Property="Template">
                      <Setter.Value>
                          <ControlTemplate TargetType="{x:Type ScrollViewer}">
                              <Grid>
                                  <Grid.ColumnDefinitions>
                                      <ColumnDefinition />
                                      <ColumnDefinition Width="Auto"/>
                                  </Grid.ColumnDefinitions>
                                  <Grid.RowDefinitions>
                                      <RowDefinition/>
                                      <RowDefinition Height="Auto"/>
                                  </Grid.RowDefinitions>
      
                                  <ScrollContentPresenter Grid.Column="0"/>
      
                                  <ScrollBar Name="PART_VerticalScrollBar"
                  				Value="{TemplateBinding VerticalOffset}"
                  				Maximum="{TemplateBinding ScrollableHeight}"
                  				ViewportSize="{TemplateBinding ViewportHeight}"
                  				Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
      				        Grid.Column="1"/>
                                  <ScrollBar Name="PART_HorizontalScrollBar"
                  				Orientation="Horizontal"
                  				Grid.Row="1"
                  				Grid.Column="0"
                  				Value="{TemplateBinding HorizontalOffset}"
                  				Maximum="{TemplateBinding ScrollableWidth}"
                  				ViewportSize="{TemplateBinding ViewportWidth}"
                  				Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
      
                              </Grid>
                          </ControlTemplate>
                      </Setter.Value>
                  </Setter>
              </Style>
      

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s