Matthias Shapiro

I need fewer hobbies

Styling the ScrollViewer

I recently got a comment asking if I could do something on creating a Blend-type ScollViewer styling. The only problem is that the ScrollViewer is a multi-post affair, which I’ll try to get completed in the next month or so. I’m going to go ahead and put up the basics here, much like my Styling the ComboBox and Styling the ListView posts.

In the meantime, I’m making available for download a Resource Dictionary with the Blend ScrollViewer style as I’ve approximated it. (You may have to right-click “Save As…” on that file since IE will do its darndest to open it up.) Just load the resource dictionary into your project and set

<ScrollViewer Template=”{DynamicResource BlendScrollTemplate}” />

Note: This is not the “real” Blend styles… just my rendition/approximation.

In the meantime, here’s the overview for the ScrollViewer. When you look at a template of the ScrollViewer (right-click on the ScrollViewer, got to “Edit Control Parts (Template) -> Edit a Copy…“) you should see something like this:

clip_image001[7]

If you want to change something about the main content area (highlighted below), you’re probably going after the PART_ScrollContentPresenter

clip_image001[11]

If you want to style the corner (highlighted below), look at changing the Corner Rectangle.

clip_image001[15]

If you want to style the HorizontalScrollBar and/or the VerticalScrollBar (highlighted below), you should right-click on either the PART_VerticalScrollBar or the PART_HorizontalScrollBar and go to “Edit Control Parts (Template) -> Edit a Copy…

clip_image001[13]

A point of note: Because of the way Blend works, it can be difficult to visually style a Vertical and Horizontal ScrollBar in the same Template. Don’t create another template. It’s a waste of time and will make your resources a pain to navigate. I’ll go over exactly what to do in a little bit.

The ScrollBar template should look something like this:

clip_image001[9]

If you want to style the ScrollBar thumbs (the bars you would drag to scroll, highlighted below), you’ll need to change the template for the “Thumb” in the PART_Track. Note: Unless you’re doing something really complex, you should only need to style the Thumb control one time. You don’t need different styles for the vertical and the horizontal.

clip_image001[17]

If you want to style the directional buttons (highlighted below), you will need to change the templates for the first and last “RepeatButton” controls (the ones that aren’t in the PART_Track) using the right-click -> Edit Control Parts (Template) -> Edit Template. (This template should already be copied into your resources.) Again, unless you’re doing something complex, you should only need to style this button one time.

clip_image001[19]

If you want to style the empty area that allows for fast scrolling, you will need to change the style for the two RepeatButtons in the PART_Track (DecreaseRepeatButton and IncreaseRepeatButton)using the right-click -> Edit Control Parts (Template) -> Edit Template. You should only need to do this one time and then apply that style/template across the all the instances of this button.

clip_image001[21]

Over the next couple weeks, I’ll try to put up posts going over how to style all of these into the Blend style. I’ll update this post pointing to the more in-depth tutorials as I go along. Until I get around to doing that, feel free to download the ResourceDictionary with the Blend styles in them.

0 Responses to Styling the ScrollViewer

  1. Mattias,

    I finally got around to using the XAML resource dictionary you blogged about. I had to make a small change – removed the StringFormat={x:Null} from the Value of the PART_VerticalScrollBar and PART_HorizontalScrollBar. StringFormat is a new property in SP1 (I guess you were using Beta when you prepared the template) and I haven’t yet installed SP1 on my main development VM yet.

    Thanks again for sharing the wonderful insight.
    indy

  2. indyfromoz

    Mattias,

    I can help but thank you enough! Although I didn’t get an e-mail about the new post, my RSS reader got me your post. I am very happy to see the post explaining in all detail the way one can customize the appearance of the ScrollViewer.

    I wish you have more time to share your excellent knowledge about WPF with people like us. This is my third weekend with WPF. I have worked through “Pro WPF in C# 2008” over the last two weekends (except for the 3D section which I will do separately with Petzold’s book) and this weekend I will sit through all your posts and work my way with the code.

    Thanks once again!
    Cheers,
    indyfromoz