How to animate or add transition to a label's foreground color change?

Question

This is for a WPF application. I have a label with some text. What I want is that when the mouse is hovered over the label, the color of the text will slowly change to another color. When the mouse is moved away, the color will slowly change back to its original color.

My code in MainWindow.xaml:

     <Label
            x:Name="mLabel"
            Height="32.446"
            Margin="18.339,65.5,0,0"
            Padding="5,0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Content="Hello"
            FontSize="36"
            FontWeight="Bold"
            Foreground="#19418D"
            MouseEnter="MLabel_MouseEnter"
            MouseLeave="MLabel_MouseLeave"
            MouseLeftButtonUp="MLabel_MouseLeftButtonUp"
            RenderTransformOrigin="0.5,0.5"
            Style="{StaticResource CustomFont}"
            UseLayoutRounding="False">
            <Label.RenderTransform>
                <TransformGroup>
                    <ScaleTransform />
                    <SkewTransform />
                    <RotateTransform Angle="360.086" />
                    <TranslateTransform />
                </TransformGroup>
            </Label.RenderTransform>
        </Label>

My code in MainWindow.xaml.cs:

private void MLabel_MouseEnter(object sender, MouseEventArgs e)
{
    mLabel.Foreground = (SolidColorBrush)(new BrushConverter().ConvertFrom("#7BA8FE"));
}

private void MLabel_MouseLeave(object sender, MouseEventArgs e)
{
    mLabel.Foreground = (SolidColorBrush)(new BrushConverter().ConvertFrom("#19418D"));
}

Right now, it's an instant change from dark blue to light blue. But I want that change to happen slowly in a few seconds.

This question is different because I am working with foreground color of a label control here but the other solution is for background color of buttons which has a different way to implement.

Answer 1

Using this example Label Hover

Create a new project and just after your window Title

Title="MainWindow" Height="450" Width="800">

paste the following

    <Window.Resources>
        <Style x:Key="MyLabel">
            <Style.Triggers>
                <EventTrigger RoutedEvent="Mouse.MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)">
                                <ColorAnimation To="#7BA8FE" Duration="0:0:0:2"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="Mouse.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)">
                                <ColorAnimation To="#19418D" Duration="0:0:0:2"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

The drop any label on the screen from the toolbox and change it's style property to the following

<Label Content="Label" Style="{DynamicResource MyLabel}" HorizontalAlignment="Left" Margin="335,170,0,0" VerticalAlignment="Top" FontSize="20"/>

Answer 2

Take a look at this sample (make sure to reference Microsoft.Xaml.Behaviors):

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApp1"
    xmlns:Interactions="http://schemas.microsoft.com/xaml/behaviors" x:Class="WpfApp1.MainWindow"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<StackPanel>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="LabelMouseStates">
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:1"/>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="Normal"/>
            <VisualState x:Name="MouseEntered">
                <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="label">
                        <EasingColorKeyFrame KeyTime="0" Value="White"/>
                    </ColorAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Label x:Name="label" Content="Label with foreground animation on MouseEnter" HorizontalAlignment="Left" Background="#FF3390FF" Margin="10,10,0,0">
        <Interactions:Interaction.Triggers>
            <Interactions:EventTrigger EventName="MouseEnter">
                <Interactions:GoToStateAction x:Name="LabelMouseEnterAction" StateName="MouseEntered"/>
            </Interactions:EventTrigger>
            <Interactions:EventTrigger EventName="MouseLeave">
                <Interactions:GoToStateAction x:Name="LabelMouseLeaveAction" StateName="Normal"/>
            </Interactions:EventTrigger>
        </Interactions:Interaction.Triggers>
    </Label>
</StackPanel>