Question

这是用于WPF应用程序的。我有一个带有一些文字的标签。我想要的是，当鼠标悬停在标签上时，文本的颜色将慢慢变为另一种颜色。当鼠标移开时，颜色将慢慢变回其原始颜色。

我在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>

我在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"));
}

现在，它立即从深蓝色变为浅蓝色。但是我希望这种变化能在几秒钟内慢慢发生。

这个问题有所不同，因为我在这里使用标签控件的前景色，但是另一种解决方案是使用按钮的背景色，实现方式不同。

Answer 1

使用此示例Label Hover

在窗口标题之后创建一个新项目

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

粘贴以下内容

    <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>

从工具箱中在屏幕上放置任何标签，并将其style属性更改为以下

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

Answer 2

看看这个示例（确保引用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>

如何为标签的前景色更改动画或添加过渡效果？

2 个答案: