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.
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
