Question

I’m trying to skin a ScrollViewer in WPF using XAML but have been faced with a challenge. Normally my ScrollBars are hidden, but when the user start panning the screen they become visible. I have implemented this feature using ScrollChanged as follows:

<!-- Storyboards -->
<Storyboard x:Key="uiStoryboardFader">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1.0" />
        <EasingDoubleKeyFrame KeyTime="0:0:2.0" Value="1.0" />
        <EasingDoubleKeyFrame KeyTime="0:0:2.3" Value="0.0" />
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

<!-- Style Declaration -->
<!-- Control Template -->

<ScrollBar x:Name="PART_VerticalScrollBar"   Opacity="0.0" />
<ScrollBar x:Name="PART_HorizontalScrollBar" Opacity="0.0" />

<!-- Control Template Triggers -->

<EventTrigger RoutedEvent="ScrollViewer.ScrollChanged">
    <BeginStoryboard Storyboard="{StaticResource uiStoryboardFader}"
                     Storyboard.TargetName="PART_VerticalScrollBar" />
    <BeginStoryboard Storyboard="{StaticResource uiStoryboardFader}"
                     Storyboard.TargetName="PART_HorizontalScrollBar" />
</EventTrigger>

<!-- Closing -->

What this does is change the opacity of the entire ScrollViewer, even though I set the TargetName to “PART_VerticalScrollBar” and “PART_HorizontalScrollBar”. However when I manually set the TargetName inside the Storyboard declaration, everything works as expected. Is there anyway I can make this work by assigning the TargetName inside BeginStoryboard?

Answer 1

I take it you just do not want to copy-paste the animation? What you try to do will probably never work out, the value of that property is not inherited and you need two storyboards anyway, you cannot start the same storyboard twice (let alone on different controls).

This is how you can at least retain one instance of the animation:

<DoubleAnimationUsingKeyFrames x:Key="Animation"
        Storyboard.TargetProperty="(UIElement.Opacity)">
    <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1.0" />
    <EasingDoubleKeyFrame KeyTime="0:0:2.0" Value="1.0" />
    <EasingDoubleKeyFrame KeyTime="0:0:2.3" Value="0.0" />
</DoubleAnimationUsingKeyFrames>
<!-- ... -->
<EventTrigger RoutedEvent="ScrollViewer.ScrollChanged">
    <BeginStoryboard>
        <Storyboard Storyboard.TargetName="PART_VerticalScrollBar">
            <StaticResourceExtension ResourceKey="Animation" />
        </Storyboard>
    </BeginStoryboard>
    <BeginStoryboard>
        <Storyboard Storyboard.TargetName="PART_HorizontalScrollBar">
            <StaticResourceExtension ResourceKey="Animation" />
        </Storyboard>
    </BeginStoryboard>
</EventTrigger>