如何在鼠标悬停时创建带有 WPF 边框的淡出过渡？答案

【问题标题】：How do I create a fade-out transition with a WPF border on mouse hover?如何在鼠标悬停时创建带有 WPF 边框的淡出过渡？
【发布时间】：2013-05-07 19:01:31
【问题描述】：

我正在尝试创建一个 Border 在悬停时显示/隐藏边框本身。所需的效果是在悬停时在内容周围显示边框，当鼠标离开该区域时，边框会淡出。我无法弄清楚“淡出”部分。

下面的 sn-p 使用样式Triggers。它可以切换边框颜色。如何实现淡出？

<Border
    BorderThickness="1"
    >
    <Border.Style>
        <Style>
            <Style.Triggers>
                <Trigger
                    Property="Border.IsMouseOver"
                    Value="false">
                    <Setter
                        Property="Border.BorderBrush"
                        Value="Transparent" />
                </Trigger>
                <Trigger
                    Property="Border.IsMouseOver"
                    Value="true">
                    <Setter
                        Property="Border.BorderBrush"
                        Value="LightGray" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Border.Style>

【问题讨论】：

你试过使用 blend 吗？您可以创建一个具有透明中心的矩形。设置边框颜色，然后创建一个故事板动画，让它在悬停时淡入。

标签： c# wpf border mouseevent

【解决方案1】：

您可以尝试使用ColorAnimation

类似：

<Border.Style>
  <Style TargetType="{x:Type Border}">
    <Setter Property="BorderBrush"
            Value="Transparent" />
    <Style.Triggers>
      <Trigger Property="IsMouseOver"
                Value="True">
        <Trigger.EnterActions>
          <BeginStoryboard>
            <Storyboard>
              <ColorAnimation Duration="0:0:0.01"
                              Storyboard.TargetProperty="BorderBrush.Color"
                              To="LightGray" />
            </Storyboard>
          </BeginStoryboard>
        </Trigger.EnterActions>
        <Trigger.ExitActions>
          <BeginStoryboard>
            <Storyboard>
              <ColorAnimation Duration="0:0:0.6"
                              Storyboard.TargetProperty="BorderBrush.Color"
                              To="Transparent" />
            </Storyboard>
          </BeginStoryboard>
        </Trigger.ExitActions>
      </Trigger>
    </Style.Triggers>
  </Style>
</Border.Style>

【讨论】：