Silverlight Button - Change Foreground Color on hover
I have created a style template for my Silverlight buttons, managed to create rounded corners and a hover state which changes the majority of the style without any issues, however...
I cant figure out how to make the Foreground colour change on hover.
See my code below, the part Im having issues with is currently commented out.
<Style TargetType="Button" >
<Setter x:Name="myFontColor" Property="Foreground" Value="#000000"/>
<Setter Property="FontSize" Value="11"/>
<Setter Property="FontStyle" Value="Normal"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid Height="28">
<Border x:Name="myBorder" BorderBrush="#C4C4C4" BorderThickness="1" CornerRadius="5">
<Rectangle x:Name="BackgroundGradient" RadiusX="5" RadiusY="5">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop x:Name="GradientStop1" Color="#FDFDFD" Offset="0" />
<GradientStop x:Name="GradientStop2" Color="#D6D6D6" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Border>
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommomStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation
Storyboard.TargetName="GradientStop1"
Storyboard.TargetProperty="Color"
From="#FDFDFD" To="#0A284B"
Duration="0"
/>
<ColorAnimation
Storyboard.TargetName="GradientStop2"
Storyboard.TargetProperty="Color"
From="#D6D6D6" To="#135887"
Duration="0"
/>
<ColorAnimation
Storyboard.TargetName="myBorder"
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
From="#C4C4C4" To="#000000"
Duration="0"
/>
<!--<ColorAnimation
Storyboard.TargetName="myFontColor"
Storyboard.TargetProperty="Foreground"
From="#000000" To="#FFFFFF"
Duration="0"
/>-->
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Being fairly new to Silverlight, Id hope this just a simple issue with targeting the correct element and style.
How do I go about getting the Foreground color to change on hover?
Thanks in advance
Answer
First, put the ContentPresenter inside a ContentControl (this has the Foreground Property) then you can change it just like you did with the background:
<Style TargetType="Button" >
<Setter x:Name="myFontColor" Property="Foreground" Value="#000000"/>
<Setter Property="FontSize" Value="11"/>
<Setter Property="FontStyle" Value="Normal"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid Height="28">
<Border x:Name="myBorder" BorderBrush="#C4C4C4" BorderThickness="1" CornerRadius="5">
<Rectangle x:Name="BackgroundGradient" RadiusX="5" RadiusY="5">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop x:Name="GradientStop1" Color="#FDFDFD" Offset="0" />
<GradientStop x:Name="GradientStop2" Color="#D6D6D6" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Border>
<!-- CONTENT CONTROL HERE -->
<ContentControl Name="content" VerticalAlignment="Center" HorizontalAlignment="Center">
<ContentPresenter />
</ContentControl>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommomStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation
Storyboard.TargetName="GradientStop1"
Storyboard.TargetProperty="Color"
From="#FDFDFD" To="#0A284B"
Duration="0"
/>
<ColorAnimation
Storyboard.TargetName="GradientStop2"
Storyboard.TargetProperty="Color"
From="#D6D6D6" To="#135887"
Duration="0"
/>
<ColorAnimation
Storyboard.TargetName="myBorder"
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
From="#C4C4C4" To="#000000"
Duration="0"
/>
<!-- ALTERNATIVE WAY
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Foreground)" Storyboard.TargetName="content">
<DiscreteObjectKeyFrame KeyTime="0" Value="White" />
</ObjectAnimationUsingKeyFrames>-->
<ColorAnimation
Storyboard.TargetName="content"
Storyboard.TargetProperty="(UIElement.Foreground).(SolidColorBrush.Color)"
From="#000000" To="#FFFFFF"
Duration="0"
/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>