Styling ScrollBar's Thumb in ScrollViewer

[milkywayfarer]

Using this code below:

<Style Selector="Thumb /template/ Border">
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Background" Value="Orange"/>
        <Setter Property="CornerRadius" Value="5"/>
      </Style>

only Cursor property sets correctly, anything other gets ignored. Same with using Selector="Thumb" only. How can I customize Thumb's appearance?

[maxkatz6]

Typical rule of thumb when some setter is no applied is following:

• this property is either overridden after by another style
• or this property has value of higher priority than style-priority (Local value and Animations are higher priority)
• or you haven't defined styles for additional pseudoclasses (pointerover, pressed, disabled...).

I don't know which theme you are using (Default, Fluent or any other custom), but here are the sources for ScrollBar:
https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Themes.Default/ScrollBar.xaml
https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Themes.Fluent/Controls/ScrollBar.xaml

And with Avalonia DevTools (F12) you can see what's current value and what's priority is there. Also, in devtools you can see all styles that are applied but might be in lower priority. In some cases, when control template has hardcoded value with local priority, you can't change this value with styles, so you need to replace whole template. Which makes sense anyway for such simple control as Thumb/

Nothing specific in my answer, but I hope it will help.

[milkywayfarer]

Thanks for the help! All this time I was looking at the default theme ScrollBar style and thus nothing worked.
For anyone wondering, this code did the job for me:

<Style Selector="ScrollBar /template/ RepeatButton">
    <Setter Property="IsVisible" Value="False"/>
  </Style>
  <Style Selector="ScrollBar[IsExpanded=true] /template/ Border">
    <Setter Property="Width" Value="5"/>
    <Setter Property="Margin" Value="10"/>
    <Setter Property="ClipToBounds" Value="True"/>
    <Setter Property="CornerRadius" Value="2"/>
  </Style>
  <Style Selector="ScrollBar[IsExpanded=true] /template/ Rectangle">
    <Setter Property="Fill" Value="#d8ceb9"/>
  </Style>
  <Style Selector="ScrollBar[IsExpanded=true] /template/ Thumb">
    <Setter Property="Background" Value="#fd7300"/>
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="CornerRadius" Value="3"/>
  </Style>
  <Style Selector="ScrollBar[IsExpanded=true] /template/ Thumb /template/ Border">
    <Setter Property="ClipToBounds" Value="True"/>
    <Setter Property="CornerRadius" Value="2"/>
    <Setter Property="Width" Value="5"/>
  </Style>

Let me know if I can make it more readable and beautiful.