Silverlight mouse over button as a hover effect

Question

I created a button with a style, but after creating a button style, it loses the default effect of the button, and when I directly add an attribute to the button, I get these effects by default, for example, when I click, I can see a blue background. I also try Visual Manager, but it does not work. Please someone can help me find out what I'm 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 how it is

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

My Button Tag

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

Answer 1

There are several problems in your template. First: you need to make sure that the element identified by Storyboard.TargetName and its property (you want to change) identified by Storyboard.TargetProperty really makes sense. You can change the color of SolidColorBrush , and you can use the SolidColorBrush property for the SolidColorBrush property, but you cannot directly set the color of the foreground property, because the foreground is actually Brush (not a Color ). Secondly: if you override the control template, you must provide all the VisualStates that are in the original template, which means that you also need to define FocusStates . 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 style can be found in msdn .

Answer 2

See this page:

https://msdn.microsoft.com/en-us/library/cc278069(VS.95).aspx

and see this page: http://samples.msdn.microsoft.com/Silverlight/SampleBrowser/index.htm#/?sref=CustomTemplateSamples&id=4

there is a mouse sample with a temple

Answer 3

Make sure VisualStateManager.VisualStateGroups is a direct descendant of the root element of your ControlTemplate. In your example, your root element is Border, so the VisualStateManager material should be directly below the Border tag.