Storyboard animation based on control template's control property

Question

This is what I have

1. A ControlTemplate for a button in my window.resource, having an ellipse with an outerglow (named -- TasksToggleButtonOuterGlowBitmapEffect) and a text
2. A button that is using this template

This is what I need

1. A storyboard that operates on the outerglow of the above mentioned ellipse 2. I shall trigger this storyboard from my codebehind file at any moment

When I tried this with the following snippet, the framework gives me a runtime exception stating that it is not able to find the control, TasksToggleButtonOuterGlowBitmapEffect

<Window.Resource>
    <ControlTemplate x:Key="DefaultTasksToggleButtonTemplate" TargetType="ToggleButton">
        <Grid Margin="2">
            <Border BorderBrush="White" BorderThickness="2" CornerRadius="20">
                <Border.BitmapEffect>
                    <OuterGlowBitmapEffect x:Name="TasksToggleButtonOuterGlowBitmapEffect" GlowColor="LightGray" />
                </Border.BitmapEffect>
            </Border>
            <Ellipse Fill="Red" Width="20" Height="20" Margin="2" />
            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Grid>
    </ControlTemplate>


    <Storyboard x:Key="GlowStoryboard">
        <DoubleAnimation Storyboard.TargetName="TasksToggleButtonOuterGlowBitmapEffect" Storyboard.TargetProperty="GlowSize" From="5" To="10" />
    </Storyboard>

</Window.Resources>

Update -- I want this to be in the resource so that any button can use it

Answer 1

similar question is answered here:

http://stackoverflow.com/questions/151752/storyboards-cant-find-controltemplate-elments

Answer 2

On the surface, this feels to me like a good candidate for using Visual State Manager. Animations are a little heavy handed for this sort of effect IF the trigger is going to be something like MouseOver, Pressed, etc. If you plan on reacting to Button State, then definitely look at VSM.

The problem you are having is that the target you are trying to access is part of a template, and therefore not a real element. It makes sense that you cannot do it this way: imagine you had 50 buttons all applying the same template: how would the animation know which TasksToggleButtonOuterGlowBitmapEffect you really meant?

You may be able to handle this in a Trigger (if this is WPF), but I think to do so the animation would need to be defined within the Template as well, and I don't know if you can do that.

You also may be able to navigate the template tree at runtime in code behind and setup your animation there.