Create Custom Ribbon scrollviewer

Question

Ok so what I want to be able to do is to create a custom scrollview that will encompass my ribbon that adds has the a scroll right button to the ribbon and hides the scroll bar. An example of what I want to do:

I my thoughts are to wrap the ribbon control in a scrollviewer and then to style it like the following...

<UserControl.Resources>
            <Style x:Key="PlanogramOrganiser_RibbonHomeTabStyle"
               TargetType="ScrollViewer">
                <Setter Property="VerticalScrollBarVisibility"  Value="Hidden"/>
                <Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
            </Style>
</UserControl.Resources>

Can anyone suggest how to go about moving the buttons to the right and left of the control/hiding the scroll-bar but showing the buttons I would go about this?

Answer 1

While the template of the Ribbon control is very complicated, this is still do able, but with a LOT of effort.

You are better off starting with Blend in a Blank WPF project, throw a Ribbon on the main view, right click it to edit a copy of it's template. Blend will auto generate you a copy of the template source code.

From there, you can find the main buttons area panel which you will want to wrap into a ScrollViewer.

Of course your ScrollViewer's template needs to be customized too. The default ScrollViewer's template is basically a Grid that has the horizontal scroll bar in the 2nd row at the bottom and the vertical bar in the 2nd column to the right.

The easiest way to customize the ScrollViewer's template is, IMO, to get rid of the vertical scroll bar first, then overlay the content area on top of the horizontal scroll bar so that they have the same height. The content area should have a left and right margin the same width as the 2 arrow buttons so that you can still see them.

Then you just need to re-style the scroll bar buttons to look like the ones in your image.

As I said, this is doable but requires a lot of efforts.