Question

I want to animate button shadow effect color when mouse enter border.
I try this code and is not working for me.
And I don’t know where is the problem is?

    <Style x:Name="HeaderButton" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border x:Name="Border" BorderBrush="#FF550211" BorderThickness="0" CornerRadius="4">
                    <Border.Triggers>
                        <EventTrigger RoutedEvent="Border.MouseEnter">
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetProperty="Color" Storyboard.TargetName="MenuButtonShadow"
                                                    From="#FFFFFFFF" To="#FF000000" Duration="0:0:0.3"></ColorAnimation>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Border.Triggers>
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FFAF1232" Offset="0" />
                            <GradientStop Color="#FFB60329" Offset="1" />
                        </LinearGradientBrush>
                    </Border.Background>
                    <ContentPresenter Margin="8, 0" VerticalAlignment="Center" HorizontalAlignment="Center" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Effect">
        <Setter.Value>
            <DropShadowEffect x:Name="MenuButtonShadow" ShadowDepth="0" BlurRadius="4"></DropShadowEffect>
        </Setter.Value>
    </Setter>
    <Setter Property="Foreground" Value="White"></Setter>
    <Setter Property="Margin" Value="4"></Setter>
</Style>

Answer 1

From MSDN:

In Silverlight, the only event that you can use for an EventTrigger is the Loaded event. For other events, you should declare a storyboard in the Resources property, provide a Name value for the storyboard, and write an event handler that calls the Begin method on the named storyboard.

I imagine you could do something like this in your XAML (though I haven’t tested it):

<Storyboard x:Name="MenuButtonShadowStoryboard">
    <ColorAnimation Storyboard.TargetProperty="Color" Storyboard.TargetName="MenuButtonShadow"
                    From="#FFFFFFFF" To="#FF000000" Duration="0:0:0.3">
    </ColorAnimation>
</Storyboard>

<ControlTemplate TargetType="Button">
    <Border x:Name="Border" MouseEnter="Border_MouseEnter">
        <!-- omitted for brevity -->
    </Border>
</ControlTemplate>

And then your event handler would call the Begin method on the storyboard:

private void Border_MouseEnter(object sender, MouseEventArgs e)
{
    MenuButtonShadowStoryboard.Begin();
}

You’ll probably want to add something similar for the MouseLeave event, which makes the color go back to #FFFFFFFF.