WPF Styles, BasedOn, & Storyboards

Question

I am trying to create a simple style that highlights the focused UI Element (Textbox,combo,etc) while it has focus, and goes away when lost focus.

I came up with this: `

    <Style TargetType="{x:Type FrameworkElement}" x:Key="OnFocus">
        <Setter Property="Effect">
            <Setter.Value>
                <DropShadowEffect Color="Red" 
                        BlurRadius="0" 
                        ShadowDepth='0' />
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <EventTrigger RoutedEvent="UIElement.GotFocus">
                    <BeginStoryboard  Name="highlight">
                        <Storyboard>
                            <DoubleAnimation  
              Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)" 
                           To="8" 
                           Duration="0:0:0.5" />
                        </Storyboard>
                    </BeginStoryboard>

                </EventTrigger>
            <EventTrigger RoutedEvent="UIElement.LostFocus">
                <RemoveStoryboard  BeginStoryboardName="highlight"></RemoveStoryboard>
            </EventTrigger>

        </Style.Triggers>


    </Style>`

But if I try and create simple BasedOn styles, it cannot find the BeginStoryboardName="highlight", so each of the elements ends up having the whole Style.Triggers.

Is there a better way of doing this?

Answer 1

Because the styles are not inherited like OO inheritance, the nested style can't find the storyboard in his scope.

The easiest way to accomplish the highlighting is to add a second storyboard which reverses the highlighting.

<Storyboard x:Key="startHighlight" >
            <DoubleAnimation
                Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)"
                To="8"
                Duration="0:0:0.5" />
        </Storyboard>
        <Storyboard x:Key="reverseHighlight"  >
            <DoubleAnimation
                Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)"
                To="0"
                Duration="0:0:0.2" />
        </Storyboard>

        <Style TargetType="{x:Type FrameworkElement}">
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect Color="Red"
                                      BlurRadius="0"
                                      ShadowDepth="0" />
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="UIElement.GotFocus">
                    <BeginStoryboard  Storyboard="{StaticResource startHighlight}">
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="UIElement.LostFocus">
                    <BeginStoryboard Storyboard="{StaticResource reverseHighlight}">
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
        <Style BasedOn="{StaticResource {x:Type FrameworkElement}}" TargetType="{x:Type TextBox}">

        </Style>