1

I'm trying to change the width of the scroll bar of a WebBrowser control.

I tried following this answer to change its ScrollViewer like this:

<WebBrowser Grid.Row="0" Grid.RowSpan="5" Grid.Column="0" Height="1993" Margin="3,3,0,3">
    <ScrollViewer>
        <ScrollViewer.Resources>
            <sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">100</sys:Double>
        </ScrollViewer.Resources>
    </ScrollViewer>
</WebBrowser>

But I'm getting The type 'WebBrowser' does not support direct content error.

I know that the WebBrowser of WPF is just a wrapper around WinForm's so I'm guessing this is why I'm getting this error.

I don't want to use external components such as CefSharp or other browsers.

Is it possible using the native WebBrowser?

Thanks

Community
  • 1
  • 1
La bla bla
  • 8,558
  • 13
  • 60
  • 109
  • Which scrollbars do you want to customize? The scrollbars of the page belong to the page and the only way to change them is using CSS. – Reza Aghaei Jul 27 '16 at 12:03
  • I'm using the browser to show a PDF using adobe reader, but the scroll bar are of the web browser – La bla bla Jul 27 '16 at 13:54

1 Answers1

0

The WPF WebBrowser control actually wraps the native WebBrowser ActiveX control inside it. That doesn't really change the answer but it's good to know.

As Reza Aghaei already commented, the scrollbars are not WPF controls and cannot be modified like other scrollbars in WPF applications. However, I don't think that you can change the width of the IE scrollbars using CSS, because the styling is only limited to coloring:

scrollbar-base-color: #C0C0C0;
scrollbar-base-color: #C0C0C0;
scrollbar-3dlight-color: #C0C0C0;
scrollbar-highlight-color: #C0C0C0;
/* etc */

Two possibilities come to mind. Either you use one of the jQuery scrollbar libraries that let you customize the scrollbar, or you use the native WPF ScrollBar instead.

Using jQuery scrollbars would force you to inject javascript on each page the user visits and it might get really dirty when the website already has custom jQuery scrollbars in use. This could be worth looking into, but I doubt it would work well enough in practice.

Here's what I would try

  1. Hide the scrollbar by giving overflow:hidden style to the body of each page. You could also host the Windows Forms WebBrowser inside the WindowsFormsHost control so you would get access to the ScrollBarsEnabled property (which unfortunately isn't available on the WPF control).
  2. Add the WPF ScrollBar next to your WebBrowser control and style it the way you want to. This could actually be a UserControl to ensure future reusability.
  3. Set the WPF ScrollBar's maximum value to the ScrollHeight of the HTML page.
  4. Subscribe to the scroll event of WPF ScrollBar. Send the scroll events to the HTML page. You would also need to do it the other way to keep the WPF ScrollBar synced with scroll that happens using touch, mouse wheel or keyboard buttons.

I'm not on a computer right now so can't help with the numbers 3 and 4 but it should certainly be possible. Again you could run into pages that use some custom scrolling (jQuery) but hopefully this gets you started.

Timo Salomäki
  • 7,099
  • 3
  • 25
  • 40
  • Really appreciate your answer. I'll look into it tomorrow. I don't now if it will work though since I won't be showing any HTML. It's used only as a PDF viewer using Acrobat Reader – La bla bla Jul 27 '16 at 16:51