0

I try to style a ScrollViewer so that the width of the ScrollBar element is changed on a MouseOver. I can style the ScrollViewer and give it an initial width, and it is also possible to change properties on a MouseOver, like the Opacity or Visibility. But I can't change the Width, that property is not changed.

I use this code as an example:

<Style x:Key="myScrollBarStyle" TargetType="{x:Type ScrollBar}">
<Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Opacity" Value="0.9" />
    </Trigger>
    <Trigger Property="IsMouseOver" Value="False">
        <Setter Property="Opacity" Value="0.4" />
    </Trigger>
</Style.Triggers>
</Style>

<Style x:Key="myStyle" TargetType="{x:Type ScrollViewer}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type ScrollViewer}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <ScrollContentPresenter Grid.ColumnSpan="2" Grid.RowSpan="2"/>
                <ScrollBar
                    Style="{StaticResource myScrollBarStyle}"
                    Name="PART_VerticalScrollBar"
                    Grid.Column="1"
                    Value="{TemplateBinding VerticalOffset}"
                    Maximum="{TemplateBinding ScrollableHeight}"
                    ViewportSize="{TemplateBinding ViewportHeight}"
                    Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" />
                <ScrollBar 
                    Style="{StaticResource myScrollBarStyle}"
                    Name="PART_HorizontalScrollBar"
                    Orientation="Horizontal"
                    Grid.Row="1"
                    Value="{TemplateBinding HorizontalOffset}"
                    Maximum="{TemplateBinding ScrollableWidth}"
                    ViewportSize="{TemplateBinding ViewportWidth}"
                    Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" />
            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>
</Style>

Opacity is changed on a MouseOver but if I add a Width, it is ignored. If I look at ControlTemplate.Triggers then I can change the width on MouseOver but that is the width of the complete ScrollViewer, not the ScrollBar element. Even if I point to the element with the targetname PART_VerticalScrollBar.

Searching the internet only results in solutions to change the visibility or opacity, not the width. I could not find any solution.

Is there a solution to do this in a style?

Anton Huizinga
  • 1
  • 1
  • Check the accepted answer of this question. It may help https://stackoverflow.com/questions/1321247/how-to-increase-scrollbar-width-in-wpf-scrollviewer – Aakanksha Oct 10 '19 at 11:45
  • That is to set the initial width. I need to change it in a MouseOver event. – Anton Huizinga Oct 10 '19 at 13:07
  • I copied your XAML into a new project and added the following setter to the first trigger: `` It worked just fine. If you're saying that doesn't work, then there is either some difference between your actual XAML and what you put in your question, or there is something else in your project (some other style or code) that is interfering with the trigger. – Keith Stein Oct 11 '19 at 02:48
  • It is weird! If I add this to a new Window, then it works! I'll have a look further to other styles. – Anton Huizinga Oct 11 '19 at 14:18
  • Ok, I found out it was caused by not setting the minwidth and the maxwidth. If I set these to 4 and 16 (which I want to be min and max state), then it works! Thanks! – Anton Huizinga Oct 11 '19 at 14:32

0 Answers0