WPF开发随笔收录报警闪烁效果实现

WPF开发随笔收录-报警闪烁效果实现

 

一、前言

工作中目前经手的项目是医疗相关的监护软件，所以会涉及到一些报警效果的实现，今天在这里就简单分享一下实现方式

二、正文

1、实现的方式比较的简单，就是通过一个Border控件，然后搭配DataTrigger和ColorAnimationUsingKeyFrames即可实现效果，这里直接贴出代码

<Window
    x:Class="AlarmFlashDemo.MainWindow"
    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="clr-namespace:AlarmFlashDemo"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="600"
    Height="350"
    mc:Ignorable="d">
    <Grid>
        <Border
            Width="200"
            Height="50"
            CornerRadius="25">
            <Border.Style>
                <Style TargetType="{x:Type Border}">
                    <Setter Property="Background" Value="#FF3BA245" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsAnimation}" Value="True">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard x:Name="stateAnimation">
                                    <Storyboard AutoReverse="True" RepeatBehavior="Forever">
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(SolidColorBrush.Color)">
                                            <EasingColorKeyFrame KeyTime="0" Value="#555555" />
                                            <EasingColorKeyFrame KeyTime="00:00:0.2" Value="Red" />
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <StopStoryboard BeginStoryboardName="stateAnimation" />
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
        </Border>
        <Button
            Width="200"
            Height="40"
            Margin="0,0,0,60"
            VerticalAlignment="Bottom"
            Click="Button_Click"
            Content="开始/停止" />
    </Grid>
</Window>

2、闪烁与否是通过绑定到IsAnimation这个值来控制，IsAnimation这个属性给它添加一下通知属性，然后再设置一下窗口的DataContext，代码如下

public partial class MainWindow : Window, INotifyPropertyChanged
{
    private bool isAnimation;

    public bool IsAnimation
    {
        get { return isAnimation; }
        set { isAnimation = value; OnPropertyChanged("IsAnimation"); }
    }


    public MainWindow()
    {
        InitializeComponent();
        IsAnimation = true;
        this.DataContext = this;
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        IsAnimation = !IsAnimation;
    }

    public event PropertyChangedEventHandler? PropertyChanged;

    protected internal virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

3、运行效果如下