WPF ScrollBar opacity based on Thumb visibility

Question

I can't figure it out how to change ScrollBar Opactity when its thumb is no longer needed.

In other words: I want to have ScrollViewer's property VerticalScrollBarVisibility like Auto, but the ScrollViewer's content should preserve its size. I have to take into account that ScrollBar's style have to be applied to 3rd party controls with inner ScrollViewers.

Here is my code. I tried to react on Thumb's IsVisible trigger but without success.

<Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type Thumb}">
            <Border x:Name="ScrollBarThumbBorder" CornerRadius="4" />
        </ControlTemplate>
    </Setter.Value>
</Setter>
<!--<Style.Triggers>
    <Trigger Property="IsVisible" Value="False">
        <Setter Property="Opacity" Value="0.3" />
    </Trigger>
</Style.Triggers>-->

<ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
<Border CornerRadius="4">
    <Track
        Name="PART_Track"
        IsDirectionReversed="true">
        <Track.DecreaseRepeatButton>
            <RepeatButton 
                Style="{StaticResource ScrollBarPageButton}"
                Command="ScrollBar.PageUpCommand" />
        </Track.DecreaseRepeatButton>
        <Track.Thumb>
            <Thumb Style="{StaticResource ScrollBarThumb}" />
        </Track.Thumb>
        <Track.IncreaseRepeatButton>
            <RepeatButton 
                Style="{StaticResource ScrollBarPageButton}"
                Command="ScrollBar.PageDownCommand" />
                    </Track.IncreaseRepeatButton>
    </Track>
</Border>

<Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Style.Triggers>
    <Trigger Property="Orientation" Value="Vertical">
        <Setter Property="Width" Value="10"/>
        <Setter Property="Height" Value="Auto" />
        <Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />
    </Trigger>
</Style.Triggers>

Kuba Kuba · Accepted Answer · 2012-06-23T14:49:47

I did it :)

The trick was to use SourceName in ControlTemplate Trigger.

Now ControlTemplate for ScrollBar looks like this:

    <ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
    <Border
        Background="{StaticResource ScrollBarBackgroundBrush}"
        CornerRadius="4">
        <Track
            Name="PART_Track"
            IsDirectionReversed="true">
            <Track.DecreaseRepeatButton>
                <RepeatButton 
                    Style="{StaticResource ScrollBarPageButton}"
                    Command="ScrollBar.PageUpCommand" />
            </Track.DecreaseRepeatButton>
            <Track.Thumb>
                <Thumb Name="Thumb" Style="{StaticResource ScrollBarThumb}" />
            </Track.Thumb>
            <Track.IncreaseRepeatButton>
                <RepeatButton 
                    Style="{StaticResource ScrollBarPageButton}"
                    Command="ScrollBar.PageDownCommand" />
                        </Track.IncreaseRepeatButton>
        </Track>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger SourceName="Thumb" Property="IsVisible" Value="False">
            <Setter Property="Opacity" Value="0" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

WPF ScrollBar opacity based on Thumb visibility

1 Answers