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

Answers


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>

You can dothat by adding events MouseEnter and MouseLeave and change colors in event

example:

<Button x:Name="myButton" 
    Content="Button" 
    MouseEnter="myButton_MouseEnter" 
    MouseLeave="myButton_MouseLeave"/>

and in class C# you have to have methods

    private void myButton_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
    {
        myButton.Foreground=new SolidColorBrush(Colors.Red);
    }

    private void myButton_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
    {
        myButton.Foreground=new SolidColorBrush(Colors.White);
    }

Hope, that it is what you looking for.


Use Blend for designing any control. Using this you can easly create any style which you want

Just go through Creating a button


Try this:

<Style x:Key="CustomButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="#FF1F3B53"/>
    <Setter Property="Foreground" Value="#FF000000"/>
    <Setter Property="Padding" Value="3"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="BorderBrush">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFA3AEB9" Offset="0"/>
                <GradientStop Color="#FF8399A9" Offset="0.375"/>
                <GradientStop Color="#FF718597" Offset="0.375"/>
                <GradientStop Color="#FF617584" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity" To="1"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FF474747"/> <!--change this color code if you wish-->
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FF474747"/> <!--change this color code if you wish-->
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FF474747"/> <!--change this color code if you wish-->
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#FF474747"/> <!--change this color code if you wish-->
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity" To="1"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="DarkGray"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="DarkGray"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="DarkGray"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="DarkGray"/>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity" To="1"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="DarkGray"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="DarkGray"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="DarkGray"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="DarkGray"/>
                                </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" CornerRadius="3" Background="White" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
                        <Grid Background="{TemplateBinding Background}"  Margin="1">
                            <Border Opacity="0"  x:Name="BackgroundAnimation" Background="#FF448DCA" />
                            <Rectangle x:Name="BackgroundGradient" >
                                <Rectangle.Fill>
                                    <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                        <GradientStop Color="#A9A9A9" Offset="0" />
                                        <GradientStop Color="#A5A5A5" Offset="0.375" />
                                        <GradientStop Color="#A3A3A3" Offset="0.625" />
                                        <GradientStop Color="#A0A0A0" Offset="1" />
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                        </Grid>
                    </Border>
                    <ContentPresenter
                          x:Name="contentPresenter"
                          Content="{TemplateBinding Content}"
                          ContentTemplate="{TemplateBinding ContentTemplate}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          Margin="{TemplateBinding Padding}"/>
                    <Rectangle x:Name="DisabledVisualElement" RadiusX="3" RadiusY="3" Fill="#A9A9A9" Opacity="0" IsHitTestVisible="false" />
                    <Rectangle x:Name="FocusVisualElement" RadiusX="2" RadiusY="2" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Need Your Help

how to show loading image when a child node is loading data dynamically using JSTREE?

jquery jstree

In my project, iam populating the child nodes data dynamically through ajax call.As data is more, it is taking time to load the data.So i want to show a loading image in the tree(in child node posi...

Nullpointer to SurfaceHolder Live Wallpaper

android nullpointerexception deprecated live-wallpaper surfaceholder

Hey guys I am having this error with my live wallpaper. For some reason when I try to set the surface type i get a NullPointerException error. I am not sure whats going on there. Thanks in advance.