Style Silverlight ScrollViewer With A New ControlTemplate

In an earlier post I showed you how to add ScrollViewer to Panels. In this post I will show you how to change the look of  the ScrollViewer using Expression Blend. I will work with the same example where I placed  ScrollViewer for a StackPanel. Here is the XAML I will use with a screenshot of its output.

<ScrollViewer>
  <StackPanel x:Name="LayoutRoot"
              Background="Honeydew">
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkBlue" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkRed" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkGoldenrod" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkSeaGreen" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DodgerBlue" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkGreen" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkMagenta" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkOrchid" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkTurquoise" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkViolet" />
  </StackPanel>
</ScrollViewer>

I will now show you how to modify the standard look of the ScrollViewer. Rather than killing myself by typing all the XAML required to achieve the goal, I will use Blend which makes doing this a breeze. In the Objects and Timeline I can see the hierarchy of Controls in my Page.

What I need to do now is change the default Control Template for ScrollViewer. This can be done by right clicking ScrollViewer in Objects and Timeline –> Edit Control Parts (Template) –> Edit a Copy.

My Objects and Timeline shows me the hierarchy of controls involved in a ScrollViewer. I now need to modify the template for VerticalScrollBar. This can be done by right clicking VierticalScrollBar –> Edit Control parts (Template) –> Edit a Copy.

In Objects and Timeline I now see this hierarchy.

To keep things simple, I will just change the background of my ScrollViewer. This can be done by applying a Radial gradient to the first Rectangle (highlighted above).

Screenshot below shows the changed background for ScrollViewer in Expression Blend.

Now when I run my application I can see that the background of my ScrollViewer has a Radial gradient applied to it.

Similarly we can changes other parts of the ScrollViewer such as top and bottom buttons and the thumb. Silverlight allows us to change look of controls significantly by editing Control Templates. You saw an example of this awesomeness in this article.