如何为边框画笔不透明度设置动画

Question

如何设置故事板来为 Border.BorderBrush 的不透明度设置动画。我想创建一个仪表板控件，其中该控件被“脉冲”边框包围，即边框的不透明度从可见变为不可见，然后在 3 秒的时间段内变为可见。

我创建了一个故事板来执行此操作并将其应用到边框，但边框的整个内容（即整个用户控件）都会受到影响，而不仅仅是边框的轮廓。

<UserControl.Resources>
    <Storyboard x:Name="myStoryboard">
        <DoubleAnimation Storyboard.TargetName="MyAnimatedBorder" Storyboard.TargetProperty="(BorderBrush.Opacity)"
                         From="1.0" To="0.0"
                         Duration="0:0:3" AutoReverse="True"
                         RepeatBehavior="Forever" />
    </Storyboard>
</UserControl.Resources>


<Border  x:Name="MyAnimatedBorder" BorderThickness="6" Margin="10">
    <Border.BorderBrush  >
        Silver
    </Border.BorderBrush>
</Border>


private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
    myStoryboard.Begin();
}

Answer 1

您可以通过分离

Border

:

来解决此问题

AnimatedBorderUserControl.xaml

<UserControl
    x:Class="WinUIApp.AnimatedBorderUserControl"
    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:local="using:WinUIApp"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <UserControl.Resources>
        <Storyboard x:Name="AnimatedBorderStoryboard">
            <DoubleAnimation
                AutoReverse="True"
                RepeatBehavior="Forever"
                Storyboard.TargetName="AnimatedBorder"
                Storyboard.TargetProperty="Opacity"
                From="0"
                To="1"
                Duration="0:0:1" />
        </Storyboard>
    </UserControl.Resources>

    <Grid>
        <Border
            x:Name="AnimatedBorder"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            BorderBrush="{x:Bind BorderBrush, Mode=OneWay}"
            BorderThickness="{x:Bind BorderThickness, Mode=OneWay}"
            CornerRadius="{x:Bind CornerRadius, Mode=OneWay}" />
        <TextBlock
            Margin="{x:Bind BorderThickness, Mode=OneWay}"
            Text="Animated Border" />
    </Grid>

</UserControl>

AnimatedBorderUserControl.xaml.cs

using Microsoft.UI.Xaml.Controls;

namespace WinUIApp;

public sealed partial class AnimatedBorderUserControl : UserControl
{
    public AnimatedBorderUserControl()
    {
        InitializeComponent();
        Loaded += AnimatedBorderUserControl_Loaded;
    }

    private void AnimatedBorderUserControl_Loaded(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
    {
        AnimatedBorderStoryboard.Begin();
    }

然后像这样使用它：

<local:AnimatedBorderUserControl
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    BorderBrush="SkyBlue"
    BorderThickness="1" />