CODEWITHSUNDEEP
wpfsilverlightxaml
Kanga
Kanga

Reputation: 125

Customize my ScrollViewer/Scrollbar in xaml/wpf

I am really bad when it comes to styling in XAML and I have a really big problem. I want to customize my scrollviewer in the ListBox that I have. I want to look something as simple as this

http://prntscr.com/ft1j1

I hope that someone can help me do this.

Thanks in advance.

Upvotes: 0

Views: 2149

Answers (2)

Chris W.
Chris W.

Reputation: 23280

If you're using Expression Blend this is pretty simple actually. First you need to get to your Control Template for your ScrollBar. You can do this by dropping a ScrollBar control on your Design Surface then right-click and choose "Edit Template -> Edit A Copy" which will present a box to enter the name of your new Style Template and whether you want to save it to a Resource Dictionary or to the file you're working in.

Once you have saved it you should see multiple Parts in your Objects & Timeline panel for the Vertical & Horizontal templates of your ScrollBar. You will be editing the properties of the Rectangles & Borders that create the visual of your Scrollbar within each Control Template for Horizontal & Vertical depending on which you choose to use.

To re-create your example should be relatively easy with finding the "VerticalThumbTemplate" or "HorizontalThumbTemplate" and editing the Border / Rectangles within them to get your oval as you display. You might also want to tinker with your VisualStateManager States while you're in there for MouseOver effects etc.

An example of a custom scrollbar can be found in a partial theme I created awhile back you can view here.

Once you have created your custom ScrollBars you can either make your new style template the default by changing the BasedOn Value for that TargetType, or applying it directly to the ScrollViewer built in to your ListView Template.

Hopefully this should be enough to get you started in the right direction. Cheers! :)

Upvotes: 1

Nicolas Voron
Nicolas Voron

Reputation: 2996

Scrollbar is one of the harder template to customize. If your are really bad at that, you maybe have to search at a custom controls librarie.

But if you really want to edit the scrollbar template, there is plenty of sites that will help you with a simple google search

Upvotes: 0

Related Questions