How to change the color/opacity of the UWP scroll bar without affecting the rest of a XF ScrollView

JohnHardmanJohnHardman GBUniversity mod
edited March 2018 in Xamarin.Forms

Has anybody managed to change the color and/or opacity of the scrollbar in a ScrollView on UWP (desktop), without affecting the Content of the ScrollView? If so, how did you do it?

Answers

  • JGoldbergerJGoldberger USMember, Forum Administrator, Xamarin Team, University Xamurai

    @JohnHardman

    You can set an application wide resource for the Scrollbar in the App.xaml file of the UWP project. For instance, adding the following in the <Application> element gives your scroll bar a half opacity blue background:

    <Application.Resources>
        <Style TargetType="ScrollBar">
            <Setter Property="Background" Value="#880000FF" />
        </Style>
    </Application.Resources>
    

    You an see the full list of properties in the API docs for the ScrollBar.

    Or get a complete copy of the style template for the scroll bar with modifications to change the bar color on hover and drag from this thread.

  • dinobdinob USUniversity ✭✭✭
    edited May 27

    @JohnHardman said:
    Has anybody managed to change the color and/or opacity of the scrollbar in a ScrollView on UWP (desktop), without affecting the Content of the ScrollView? If so, how did you do it?

    @JohnHardman Have you found solution to this?

    @JGoldberger Thanks, but that solution, although promising for such simple change, seem to work only on hover over the scroll-bar for the very first time, after that the color stays same and opacity is gone.

  • JohnHardmanJohnHardman GBUniversity mod

    @dinob said:
    @JohnHardman Have you found solution to this?

    Not a satisfactory one so far. Whilst the color is being changed ( as per https://forums.xamarin.com/discussion/comment/346540/#Comment_346540 ), the opacity of the rendered scroll bar is not what I was hoping for. I assume that a UI control that the scroll bar is nested in also has an opacity <> 1.0 . However, I haven't had time to locate the UI Control(s) that have an opacity <> 1.0, so haven't got a fix for this yet. It shouldn't be difficult, it's just a matter of when it bubbles to the top of my priority list.

  • dinobdinob USUniversity ✭✭✭

    @JohnHardman said:

    @dinob said:
    @JohnHardman Have you found solution to this?

    Not a satisfactory one so far. Whilst the color is being changed ( as per https://forums.xamarin.com/discussion/comment/346540/#Comment_346540 ), the opacity of the rendered scroll bar is not what I was hoping for. I assume that a UI control that the scroll bar is nested in also has an opacity <> 1.0 . However, I haven't had time to locate the UI Control(s) that have an opacity <> 1.0, so haven't got a fix for this yet. It shouldn't be difficult, it's just a matter of when it bubbles to the top of my priority list.

    In my case, when I try @JGoldberger 's suggerstion, the transparency of the scrollbar changes only when I hover mouse over it, then gets reset back when I move mouse away. If I hover mouse again over it, the transparency does not change any more. Basically, the suggestion is not working is what I ma saying.

Sign In or Register to comment.