c# - 如何在鼠标悬停时创建带有 WPF 边框的淡出过渡效果？

Question

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

下面的代码片段使用样式 Trigger。它可以切换边框颜色。如何实现淡出？

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

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