4

I am using the Uno platform and trying to override the default UWP scrollbar and end up with something like this (a static, always visible scrollbar with increased width and different color):

UWP scrollbar screenshot

I've tried playing around with the ScrollBar's Style properties, but so far I haven't gotten anywhere:

<Style TargetType="ScrollBar">
<Setter Property="Visibility" Value="Visible"></Setter>
<Setter Property="BorderBrush" Value="Blue" />
<Setter Property="BorderThickness" Value="2" />
<Setter Property="Background" Value="Blue" />
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="ScrollBar">

            <!-- not sure what properties I need to override -->

        </ControlTemplate>
    </Setter.Value>
</Setter>

<ScrollViewer Height="800" 
              Visibility="Visible">
    <ListView>
    <ListViewItem>Reboot</ListViewItem>
    <ListViewItem>Refresh Data</ListViewItem>
    <ListViewItem>Update Configs</ListViewItem>
        ...
    </ListView>
</ScrollViewer>

And the results from the above XAML:

blue thin scrollbar

purple thick scrollbar

Oleg Valter is with Ukraine
  • 9,619
  • 8
  • 37
  • 59
Tomy
  • 439
  • 1
  • 5
  • 13
  • Using the lightweight styling resources, I wasn't able to achieve the effect, you can take a look at the style here: https://github.com/microsoft/microsoft-ui-xaml/blob/master/dev/ScrollBar/ScrollBar_themeresources.xaml If you only need to modify the vertical scrollbar, pretty much anything you need to modify should be at the bottom (search for "VerticalRoot"). You will still need to copy the whole template though :/ – chingucoding Dec 28 '20 at 10:37

0 Answers0