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>

如何在鼠标悬停时使用WPF边框创建淡出过渡？

1 个答案: