Style the MouseOver on a Silverlight/WPF button

This is different from WPF to Silverlight. In WPF, the answer from Rob is correct.

In Silverlight, this won't work. Silverlight uses the VisualStateManager instead of triggers. The code for this is more complex, but some people feel that this is better. You wind up having to create a control template in your style. (For information on defining the control template, see This Article. The easiest way to create a similar ControlTemplate is to use Expression Blend, which has a function to extract the existing template in full for you.)

In the control template, define the VisualState you care about and what you want to happen.

<VisualStateGroup x:Name="CommonStateGroup">    <VisualState x:Name="MouseOverState">        <Storyboard>            <ColorAnimation Storyboard.TargetName="TopmostElementOfTheTemplate"                                        Storyboard.TargetProperty="Foreground"                                        To="Black"                                       Duration="00:00:00" >            </ColorAnimation>        </Storyboard>    </VisualState></VisualStateGroup>...

It is important to specify the default foreground color in the style as well, as Rob did above. If you specify it on the control instead it will override values from the style.

Note that it is possible to get the VisualStateManager out of the WPF Toolkit to have a similar solution in WPF.

In WPF, you don't need a storyboard unless you want an animation:

    <Button Content="Hover me">        <Button.Style>            <Style TargetType="Button">                <Setter Property="Background" Value="Red"/>                <Style.Triggers>                    <Trigger Property="IsMouseOver" Value="True">                        <Setter Property="Background" Value="Black"/>                    </Trigger>                </Style.Triggers>            </Style>        </Button.Style>    </Button>

In WPF:

Define a storyboard in your resources (any place accessible from the button or its style):

  <Window.Resources>    <Storyboard x:Key="buttonAnim">      <ColorAnimation Storyboard.TargetName="_back" Storyboard.TargetProperty="Color" To="Red" />    </Storyboard>  </Window.Resources>

And in the button, create an event trigger that launches the animation:

<Button>   <Button.Background>      <SolidColorBrush Color="Blue" x:Name="_back" />   </Button.Background>   <Button.Triggers>      <EventTrigger RoutedEvent="Button.MouseEnter">          <BeginStoryboard Storyboard="{StaticResource buttonAnim}" />      </EventTrigger>   </Button.Triggers>   Button Text</Button>

What you want to animate must explicitly exist. This is why the background is explicitly set a SolidColorBrush, whose color is changed by the storyboard.

Of course, this should be done through a Style.

Silverlight only supports the Loaded event on triggers, so you need to attach a real event handler to the button and start the storyboard programatically.