The first task is to show the scrolled area underneath the scrollbar. You have to change the structure of the ScrollViewer
control. By default it is a 2x2 Grid
so the horizontal scrollbar is under the scrolled area. Edit its template to put the scrolled area and the scrollbar in the same cell, vertically aligning the scrollbar to bottom.
The second part is to style the scrollbar itself. I don't believe this can't be done with rounded rectangles.
I usually extract the template to modify it using Blend, there is also a free ShowMeTheTemplate tool.