Question

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 1

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>