How to increase size of scrollbar on hover using XAML - wpf

Question

How to expand the width of the vertical/horizontal scroll when the user hovers over it, and then shrink it when it is not over it using WPF for VB.Net?
This way, it's easy to grab when it's needed, but doesn't take up too much space when it's not needed. I'm not quite aware about how to do it.
<Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="1.2" />
<Setter Property="Height" Value="50"/> //Trying to set height of scrollbar here
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Opacity" Value="0.4" />
</Trigger>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Width" Value="Auto"/>
<Setter Property="Height" Value="10" />
<Setter Property="Template"
Value="{StaticResource HorizontalScrollBar}" />
</Trigger>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="Width" Value="10"/>
<Setter Property="Height" Value="Auto" />
<Setter Property="Template"
Value="{StaticResource VerticalScrollBar}" />
</Trigger>
</Style.Triggers>
</Style>

Answer 1

You must use a MultiTrigger and trigger on IsMouseOver based on orientation. The example sets width/height to 8 and 18 on mouse over:
<Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
<Setter Property="UseLayoutRounding" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Orientation" Value="Horizontal" />
<Condition Property="IsMouseOver" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="Width" Value="Auto" />
<Setter Property="Height" Value="8" />
<Setter Property="Template" Value="{StaticResource HorizontalScrollBar}" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Orientation" Value="Horizontal" />
<Condition Property="IsMouseOver" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Width" Value="Auto" />
<Setter Property="Height" Value="18" />
<Setter Property="Template" Value="{StaticResource HorizontalScrollBar}" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Orientation" Value="Vertical" />
<Condition Property="IsMouseOver" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="Height" Value="Auto" />
<Setter Property="Width" Value="8" />
<Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Orientation" Value="Vertical" />
<Condition Property="IsMouseOver" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Height" Value="Auto" />
<Setter Property="Width" Value="18" />
<Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />
</MultiTrigger>
</Style.Triggers>
</Style>