WPF 使用VisualStateManager实现自定义控件闪烁呼吸警报灯

已于 2024-02-29 10:05:26 修改
阅读量1k 收藏 13
点赞数 7
文章标签： wpf
于 2024-02-27 18:01:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65414269/article/details/136328676
版权

实现一个自定义控件警报灯，添加一个枚举类型的State类，包含这六个状态：

        Warning,（红灯不闪烁）
        Running,（绿灯不闪烁）
        Init,（黄灯不闪烁）
        EnableWarning,（红灯闪烁）
        EnableRunning,（绿灯闪烁）
        EnableInit，（黄灯闪烁）

要求根据不同的状态呼吸灯颜色效果相应改变，当State值为Warning、EnableWarning,时呼吸灯颜色为Red，当State值为Running、EnableRunning,时呼吸灯颜色为Green，当State值为Init、EnableInit,时呼吸灯颜色为Orange，并且当状态为Enable时触发呼吸灯的闪烁效果，我们使用Trigger来实现颜色的改变，用VisualStateManager的状态切换来实现呼吸灯闪烁效果，具体实现如下：

1.添加一个新建的自定义控件LightControl1（注意不是用户控件！）

2.在Generic.xaml(此文件在添加自定义控件时会自动添加)中设置控件模板，xaml代码如下：

<Style TargetType="local:LightControl1">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:LightControl1">
                    <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                        <Border x:Name="stateLight" 
                                Background="{TemplateBinding Background}"
                                BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="50" />
                        <Border 
                                Background="Transparent"
                                BorderBrush="Gray" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="50" />
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="StateEnable">
                                <VisualState x:Name="Enable">
                                    <Storyboard>
                                        <DoubleAnimation AutoReverse="True" RepeatBehavior="Forever" Storyboard.TargetName="stateLight"
                                                         Storyboard.TargetProperty="Opacity" From="0.1" To="1"
                                                         Duration="0:0:0.3" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="UnEnable" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="State" Value="Init">
                <Setter Property="Background" Value="Orange" />
            </Trigger>
            <Trigger Property="State" Value="Warning">
                <Setter Property="Background" Value="Red" />
            </Trigger>
            <Trigger Property="State" Value="Running">
                <Setter Property="Background" Value="Green" />
            </Trigger>
            <Trigger Property="State" Value="EnableInit">
                <Setter Property="Background" Value="Orange" />
            </Trigger>
            <Trigger Property="State" Value="EnableWarning">
                <Setter Property="Background" Value="Red" />
            </Trigger>
            <Trigger Property="State" Value="EnableRunning">
                <Setter Property="Background" Value="Green" />
            </Trigger>
        </Style.Triggers>
    </Style>

3.后台代码如下：

public class LightControl1 : Control
    {
        public static readonly DependencyProperty StateProperty = DependencyProperty.Register(
            "State", typeof(State), typeof(LightControl1), new PropertyMetadata(State.Init, OnStateChanged));

        public State State
        {
            get { return (State)GetValue(StateProperty); }
            set { SetValue(StateProperty, value); }
        }

        static LightControl1()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(LightControl1), new FrameworkPropertyMetadata(typeof(LightControl1)));
            
        }

        private void UpdateBreathingLight()
        {
            if (State == State.EnableWarning || State == State.EnableRunning || State == State.EnableInit)
            {
                VisualStateManager.GoToState(this, "Enable", true);
            }
            else
            {
                VisualStateManager.GoToState(this, "UnEnable", true);
            }
            
        }

        //OnApplyTemplate方法保证在控件的模板被应用到控件上后会被调用。
        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            UpdateBreathingLight();
        }

        private static void OnStateChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            LightControl1 control = d as LightControl1;
            control.UpdateBreathingLight();
        }

    }

public enum State
    {
        Warning,
        Running,
        Init,
        EnableWarning,
        EnableRunning,
        EnableInit
    }

4.在窗口应用该控件

<Window x:Class="StateLightControl.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:MyNamespace="clr-namespace:StateLightControl" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:StateLightControl"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Title="MainWindow" Width="800"
        Height="450" mc:Ignorable="d">
    <StackPanel>
        <local:LightControl1  State="Warning" Width="50" Height="50" BorderThickness="5"/>
        <local:LightControl1 x:Name="lc1" State="Init" Width="20" Height="20" BorderThickness="2"/>
        <local:LightControl1 State="Running" Width="20" Height="20" BorderThickness="1"/>
        <local:LightControl1  State="EnableWarning" Width="50" Height="50" BorderThickness="5"/>
        <local:LightControl1  State="EnableInit" Width="20" Height="20" BorderThickness="2"/>
        <local:LightControl1 State="EnableRunning" Width="20" Height="20" BorderThickness="1"/>
        <Button x:Name="bt1" Content="Click" Click="bt1_Click" />
    </StackPanel>
</Window>

效果如图（非动图，下面三个是闪烁效果）：

5. 博主在原有的样式基础上美化按钮

使用画刷给控件边框看起来更仿真，添加一个阴影效果，后台代码不用改，xaml代码如下：

<Style TargetType="local:LightControl1">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:LightControl1">
                    <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                        <Border x:Name="stateLight" 
                                Background="{TemplateBinding Background}"
                                BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="50" >
                            <Border.Effect>
                                <DropShadowEffect Color="{TemplateBinding Property=Background}" Direction="0" ShadowDepth="0" Opacity="1" BlurRadius="50"/>
                            </Border.Effect>
                        </Border>
                        <Border 
                                Background="Transparent"
                                BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="50" >
                            <Border.BorderBrush>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                    <GradientStop Color="Gray" Offset="0"/>
                                    <GradientStop Color="FloralWhite" Offset="0.5"/>
                                    <GradientStop Color="Gray" Offset="1"/>
                                </LinearGradientBrush>
                            </Border.BorderBrush>
                        </Border>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="StateEnable">
                                <VisualState x:Name="Enable">
                                    <Storyboard>
                                        <DoubleAnimation AutoReverse="True" RepeatBehavior="Forever" Storyboard.TargetName="stateLight"
                                                         Storyboard.TargetProperty="Opacity" From="0.1" To="1"
                                                         Duration="0:0:0.5" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="UnEnable" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="State" Value="Init">
                <Setter Property="Background" Value="Orange" />
            </Trigger>
            <Trigger Property="State" Value="Warning">
                <Setter Property="Background" Value="Red" />
            </Trigger>
            <Trigger Property="State" Value="Running">
                <Setter Property="Background" Value="Green" />
            </Trigger>
            <Trigger Property="State" Value="EnableInit">
                <Setter Property="Background" Value="Orange" />
            </Trigger>
            <Trigger Property="State" Value="EnableWarning">
                <Setter Property="Background" Value="Red" />
            </Trigger>
            <Trigger Property="State" Value="EnableRunning">
                <Setter Property="Background" Value="Green" />
            </Trigger>
        </Style.Triggers>
    </Style>

具体实现效果如图（非动图，具体效果自己实现看）：

关于WPF自定义控件官方参考资料：创建具有可自定义外观的控件 - WPF .NET Framework | Microsoft Learn

a大芊
关注
  • 7
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WPF实现聚光灯照亮文字动画效果
dnazhd的博客
06-22 1210
实现效果如下： 思路： 在Canvas里同一位置放置两个TextBlock，对上层字体设置路径动画，并设置其Clip为EllipseGeometry。 步骤： 1、窗体xaml <Window x:Class="SpotlightDemo.SpotlightExample" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.m
wpf入门第四篇 VisualState
wf824284257的博客
04-03 5333
前言 本文是wpf入门系列第二篇，面向有winform或者web前端基础的、并且也有C#基础的同学。 在WPF中，View（Window,UserControl等）常常会根据不同的状态来显示不同的内容，比如消息的未读和已读是两种状态，这两种状态下View的表现形式会有所差别。本文将从头开始一个的示例项目，来简单的介绍VisualState的用法。 本文使用了 Visual Studio 2017...
指示灯控件
05-30
可以动态显示不同颜色的指示灯，也可以显示闪烁的红灯。
WPF 呼吸灯特效
戮筱沫博客
07-03 6040
path >> Ellipse的呼吸灯特效         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         Title="MainWindow" Height="3
WPF中自定义控件的方式
最新发布
m0_68485265的博客
06-03 696
在Windows Presentation Foundation (WPF) 中，自定义控件是一种强大的功能，它允许开发人员根据应用程序的具体需求创建独特的用户界面元素。自定义控件可以极大地提高应用程序的用户体验，同时保持代码的可维护性和可重用性。下面，我们将探讨几种在WPF中自定义控件的常见方式。
WPF设计自定义控件
weixin_30562507的博客
05-22 87
在实际工作中，WPF提供的控件并不能完全满足不同的设计需求。这时，需要我们设计自定义控件。 这里LZ总结一些自己的思路，特性如下： Coupling UITemplate Behaviour Function Package 下面举例说说在项目中我们经常用到调音台音量条，写一个自定义控件模拟调音台音量条。 自定义控件SingnalLight,实现功能 接收来自外部的范围...
Visual States in WPF 4.0
oMike_Qu的专栏
07-18 710
Visual States in WPF 4.0 原文地址 Visual States, from the coined term, signifies the current state of display. In WPF, we can refer visual states to controls or even windows. For example a button can
wpf入门第四篇 VisualState 示例项目
04-03
这是wpf入门第四篇 VisualState 的示例项目源码。 具体介绍请查看博客：https://blog.csdn.net/wf824284257/article/details/88989991
WPF入门到跪下 第八章 动画-VisualStateManager
jjailsa的博客
01-09 1440
WPF动画状态切换
WPF自定义控件
weixin_59803084的博客
01-10 6126
自定义控件C# WPF custom control的一个样例。从cs到xaml到最终应用及效果展示
WPF 自定义控件
08-18
自定义控件
WPF-自定义控件
05-18
资源中包括自己写的控件和修改别人的集成到自己的控件。主要有：温度计控件、Win8转圈等待控件、车速仪表控件、微信圆球摆动控件、加载等待转圈控件等包括源码，欢迎下载
C# WPF 自定义控件库源码.rar
12-10
WPF自定义美化控件，用于界面的美化。可直接在提供的源码基础上开发出属于自己的一套控件库，便于后续系统开发等
WPF中自定义控件教程
02-21
WPF中自定义控件开发教程，我也在学习中。
WPF 自定义控件样式
01-21
自己写的一些WPF自定义控件样式，有TabControl，Button，ComboBox等，新手入门学习不错。
WPF自定义控件开发Sample
10-15
一个关于WPF自定义开发的小例子 13份WPF经典开发教程 http://download.csdn.net/album/detail/1115 C#资料合辑二[C#桌面编程入门篇] http://download.csdn.net/album/detail/957 C#资料合辑一[C#入门篇] http://download.csdn.net/album/detail/669 [Csharp高级编程(第6版)](共8压缩卷) http://download.csdn.net/album/detail/667 10个[精品资源]Java学习资料合辑[一] http://download.csdn.net/album/detail/663 10个C#Socket编程代码示例 http://download.csdn.net/album/detail/631 6份GDI+程序设计资源整合[全零分] http://download.csdn.net/album/detail/625 更多免费资源 http://download.csdn.net/user/cleopard
VisualStateManager实现控件状态的过渡效果
12-09
2、使用visualstatemanager、visualstategroup、visualstate控制button的normal、mouseover、pressed等状态切换的过渡效果 3、这里是效果展示和代码解析：...
WPF自定义控件和样式之自定义按钮（Button）
12-31
固定样式的按钮一般在临时使用时或程序的样式比较固定时才会使用，按钮整体样式不需要做大的改动。 2.1 普通按钮-扁平化风格 先看效果： 定义Button的样式，详见代码： <Style x:Key=BtnInfoStyle TargetType=...
WPF 自定义控件库 常用控件封装&常用控件样式重写
03-26
在Windows Presentation Foundation（WPF）框架中，自定义控件库是开发人员为了增强应用程序界面交互性和美观性的重要工具。本资源"GenUI.WPF-master"似乎是一个包含自定义控件和样式重写的项目，旨在提供对常用WPF...
WPF如何实现在一个自定义控件里使用 LiveCharts 显示两个图表
06-02
要在WPF自定义控件中使用LiveCharts显示两个图表，可以使用以下步骤： 1. 引用LiveCharts NuGet包。 2. 在自定义控件的XAML文件中，添加LiveCharts的命名空间：xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf" 3. 在自定义控件的XAML文件中，添加两个LiveCharts的控件（比如LineSeries、ColumnSeries等），并分别设置它们的数据源和属性。 4. 在自定义控件的代码文件中，为每个LiveCharts控件创建一个依赖属性，并在属性变化时重新绘制图表。 下面是一个简单的示例代码，其中MyCustomControl是自定义控件，其中包含两个LiveCharts控件： ```csharp public class MyCustomControl : Control { static MyCustomControl() { DefaultStyleKeyProperty.OverrideMetadata(typeof(MyCustomControl), new FrameworkPropertyMetadata(typeof(MyCustomControl))); } public SeriesCollection Series1 { get { return (SeriesCollection)GetValue(Series1Property); } set { SetValue(Series1Property, value); } } public static readonly DependencyProperty Series1Property = DependencyProperty.Register("Series1", typeof(SeriesCollection), typeof(MyCustomControl), new PropertyMetadata(null, OnSeries1PropertyChanged)); private static void OnSeries1PropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var control = d as MyCustomControl; control.DrawChart1(); } public SeriesCollection Series2 { get { return (SeriesCollection)GetValue(Series2Property); } set { SetValue(Series2Property, value); } } public static readonly DependencyProperty Series2Property = DependencyProperty.Register("Series2", typeof(SeriesCollection), typeof(MyCustomControl), new PropertyMetadata(null, OnSeries2PropertyChanged)); private static void OnSeries2PropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var control = d as MyCustomControl; control.DrawChart2(); } private void DrawChart1() { //绘制第一个图表 chart1.Series = Series1; } private void DrawChart2() { //绘制第二个图表 chart2.Series = Series2; } private LiveCharts.Wpf.CartesianChart chart1; private LiveCharts.Wpf.CartesianChart chart2; public override void OnApplyTemplate() { base.OnApplyTemplate(); chart1 = GetTemplateChild("PART_Chart1") as LiveCharts.Wpf.CartesianChart; chart2 = GetTemplateChild("PART_Chart2") as LiveCharts.Wpf.CartesianChart; DrawChart1(); DrawChart2(); } } ``` 在自定义控件的XAML文件中，可以使用以下代码来定义两个LiveCharts控件： ```xml <Style TargetType="{x:Type local:MyCustomControl}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type local:MyCustomControl}"> <Grid> <lvc:CartesianChart x:Name="PART_Chart1" /> <lvc:CartesianChart x:Name="PART_Chart2" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> ``` 然后，在使用自定义控件的地方，可以使用以下代码来设置两个图表的数据源： ```xml <local:MyCustomControl Series1="{Binding Data1}" Series2="{Binding Data2}" /> ``` 其中，Data1和Data2是两个SeriesCollection类型的数据源，可以在ViewModel中定义并绑定到视图中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值