Silverlight button Mouse Over like hover effect

Question

I created button with style but after creating button style it looses default effect of the button and when I directly put attribute in button than I will get those default effects like when I click I can see blue background.I also try to put Visual Manager but it is not working. Kindly somebody can help me to know what I am doing wrong

My Button Style:

<Style TargetType="Button" x:Key="MenuButtonStyle">
  <Setter Property="HorizontalAlignment" Value="Stretch"/>
  <Setter Property="Foreground" Value="Black"/>
  <Setter Property="FontFamily" Value="Sitka Heading"/>
  <Setter Property="FontSize" Value="20"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Grid>
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal"/>
              <VisualState x:Name="Pressed">
                <Storyboard>
                  <ColorAnimation Duration="0" Storyboard.TargetName="ButtonTextElement"
                                  Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                                  To="Blue"/>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" 
                                                 Storyboard.TargetName="normalImage">
                    <DiscreteObjectKeyFrame KeyTime="0">
                      <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                      </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" 
                                                 Storyboard.TargetName="mouseOverImage">
                    <DiscreteObjectKeyFrame KeyTime="0">
                      <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                      </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="MouseOver">
                <Storyboard>
                  <ColorAnimation Duration="0" Storyboard.TargetName="ButtonTextElement"
                                  Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                                  To="Blue"/>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" 
                                                 Storyboard.TargetName="normalImage">
                    <DiscreteObjectKeyFrame KeyTime="0">
                      <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                      </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" 
                                                 Storyboard.TargetName="mouseOverImage">
                    <DiscreteObjectKeyFrame KeyTime="0">
                      <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                      </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <Border BorderBrush="Black" BorderThickness="0,0,0,0.5" Margin="30,0,0,0"
                  Grid.ColumnSpan="2"/>
          <TextBlock x:Name="ButtonTextElement" 
                     Text="{TemplateBinding Content}" Margin="30,0"
                     Foreground="{TemplateBinding Foreground}" Grid.Column="0" 
                     VerticalAlignment="{TemplateBinding VerticalAlignment}" />
          <Image x:Name="normalImage" Source="/Assets/menu-arrow-left.png" 
                 Grid.Column="1" Stretch="None" HorizontalAlignment="Right"
                 Margin="0,0,30,0" />
          <Image x:Name="mouseOverImage" Source="/Assets/menu-arrow-left-hover.png"
                 Grid.Column="1" Stretch="None" HorizontalAlignment="Right" 
                 Visibility="Collapsed" Margin="0,0,30,0" />
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

I also change in VisualStateManager like this

<ColorAnimation Storyboard.TargetName="MouseOverVisualElement" 
                            Storyboard.TargetProperty="TextBlock.Foreground" To="Red" />

My Button Tag

<Button Style="{StaticResource MenuButtonStyle}" Content="Home"/>

Answer 1

There are several issues with your template. First: You have to make sure that the element identified by Storyboard.TargetName and its property (you want to change) identified by Storyboard.TargetProperty actually make sense. You can change the color of a SolidColorBrush, and you can use a SolidColorBrush for a Textblock.Foreground property, but you cannot directly set the foreground property color, because foreground actually is a Brush (not a Color). Second: if you override the template of a control you have to provide all the VisualStates that are in the original template, that means you have to define the FocusStates as well. Here is a template that does what you are trying to do:

<ControlTemplate TargetType="Button">
        <Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal"/>
                    <VisualState x:Name="MouseOver">
                        <Storyboard>

                            <ColorAnimation
                                Duration="0"
                                Storyboard.TargetName="ButtonTextElement"
                                Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                                To="Red"/>

                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Pressed">
                        <Storyboard>
                            <ColorAnimation
                                Duration="0"
                                Storyboard.TargetName="Background"
                                Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                To="#FF6DBDD1"/>
                            <ColorAnimation
                                Duration="0"
                                Storyboard.TargetName="ButtonTextElement"
                                Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                                To="Red"/>


                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Disabled">
                        <Storyboard>
                            <DoubleAnimation
                                Duration="0"
                                Storyboard.TargetName="DisabledVisualElement"
                                Storyboard.TargetProperty="Opacity"
                                To=".55"/>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
                <VisualStateGroup x:Name="FocusStates">
                    <VisualState x:Name="Focused">
                        <Storyboard>
                            <DoubleAnimation
                                Duration="0"
                                Storyboard.TargetName="FocusVisualElement"
                                Storyboard.TargetProperty="Opacity"
                                To="1"/>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Unfocused"/>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Border
                x:Name="Background"
                Background="White"/>
            <TextBlock
                x:Name="ButtonTextElement"
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                Text="{TemplateBinding Content}"
                FontSize="20" FontFamily="Sitka Heading" 
                Foreground="Black"/>

            <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" />
            <Rectangle x:Name="FocusVisualElement" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
        </Grid>
    </ControlTemplate>

The default button style can be found on msdn.