Creating a Custom Scroll Viewer Template in XAML using Expression Blend

In this post I will demonstrate how to Create a Custom Scroll Viewer Template for a Silverlight or WPF application in XAML using Expression Blend.

First, Create a WPF application, your Solution Explorer will look like this,

Select Scroll Viewer from Tool Bar and drag it into Grid

In the Objects and Timeline panel, click the [ScrollViewer] item to select it and edit a copy of Scroll Viewer by selecting “Edit a Copy”.

Click OK to Create Style Resource

Now Objects and Timeline panel look like this,


In Objects and Timeline panel, click VerticalScrollBar and edit it by selecting “Edit a Copy”.



Click OK to Create Style Resource

After creating Style Resource your Objects and Timeline panel look like this

Select first items [Rectangle] from Objects and Timeline panel and then go to Properties panel by clicking on its tab in the Solution Explorer and change BackGround of the [Rectangle] to Grey.
After changing properties Scroll Viewer will look like this,

VerticalRoot item have 7 children. We have to edit these children to make changes in Vertical Scroll Viewer Template.

First select VerticalSmallDecrease items from Objects and Timeline panel and select edit template by selecting “Edit Template”

Then delete all items from Objects and Timeline panel except [Path] ,

After deleting, select [Path] and change background from Properties panel by clicking on its tab in the Solution Explorer.

You can change the behavior of [Path] on different state like MouseOver, Pressed and Normal from States Panel.

Come back to VerticalSmallDecrese items using this tab which is on top of your screen,

And do the same for VerticalSmallIncrease.



Now we will change VerticalThumb and edit it by selecting “Edit Template” from Objects and Timeline panel and delete all items except Background like this,

After deleting items your Vertical Scroll Bar look like this,

Now change the background and other properties like Margin, Thickness of the [Background] from Properties panel by clicking on its tab in the Solution Explorer.

Finally your Vertical Scroll Viewer looks like this.

I hope this will help you in building your own beautiful and fancy Custom Scroll Viewer Templates.

Thanks
Shrey Chouhan