WPF 四种不同效果呼吸灯

WPF开发者QQ群： 340500857 | 微信群 -> 进入公众号主页 加入组织

由于微信群人数太多入群请添加小编微信号

（yanjinhuawechat）或（W_Feng_aiQ）邀请入群

（需备注WPF开发者）

PS：有更好的方式欢迎推荐。

—

代码如下

一、创建 BreathLamp.cs 继承 ContentControl代码如下。

using System.Windows;
using System.Windows.Controls;namespace WPFDevelopers.Controls
{public enum LampEffect{OuterGlow,Eclipse,Ripple,Streamer}public class BreathLamp : ContentControl{static BreathLamp(){DefaultStyleKeyProperty.OverrideMetadata(typeof(BreathLamp), new FrameworkPropertyMetadata(typeof(BreathLamp)));}public override void OnApplyTemplate(){base.OnApplyTemplate();}public static readonly DependencyProperty CornerRadiusProperty =DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(BreathLamp), new PropertyMetadata(new CornerRadius(60d)));public static readonly DependencyProperty LampEffectProperty =DependencyProperty.Register("LampEffect", typeof(LampEffect), typeof(BreathLamp), new PropertyMetadata(default(LampEffect), OnLampEffectPropertyChangedCallBack));public static readonly DependencyProperty IsLampStartProperty =DependencyProperty.Register("IsLampStart", typeof(bool), typeof(BreathLamp), new PropertyMetadata(true));public CornerRadius CornerRadius{get { return (CornerRadius)GetValue(CornerRadiusProperty); }set { SetValue(CornerRadiusProperty, value); }}public LampEffect LampEffect{get { return (LampEffect)GetValue(LampEffectProperty); }set { SetValue(LampEffectProperty, value); }}private static void OnLampEffectPropertyChangedCallBack(DependencyObject d, DependencyPropertyChangedEventArgs e){}public bool IsLampStart{get { return (bool)GetValue(IsLampStartProperty); }set { SetValue(IsLampStartProperty, value); }}}
}

二、BreathLamp.xaml 代码如下

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:controls="clr-namespace:WPFDevelopers.Controls"><ResourceDictionary.MergedDictionaries><ResourceDictionary Source="Basic/ControlBasic.xaml"/><ResourceDictionary Source="Basic/Animations.xaml"/></ResourceDictionary.MergedDictionaries><ControlTemplate x:Key="LampEffect_Eclipse" TargetType="{x:Type controls:BreathLamp}"><Grid><Viewbox><Grid Width="60" Height="60"><Border x:Name="PART_LampEclipse"  BorderThickness="0" BorderBrush="Transparent" CornerRadius="{TemplateBinding CornerRadius}" Background="{DynamicResource DangerSolidColorBrush}"RenderTransformOrigin="0.5,0.5"><!--<Border.Effect><DropShadowEffect BlurRadius="25" ShadowDepth="0" Color="{DynamicResource DangerColor}"/></Border.Effect>--><Border.RenderTransform><ScaleTransform CenterX="0" CenterY="0" ScaleX="0.8" ScaleY="0.8"></ScaleTransform></Border.RenderTransform></Border><Border CornerRadius="{TemplateBinding CornerRadius}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}"/></Grid></Viewbox><ContentPresenter/></Grid><ControlTemplate.Triggers><Trigger Property="IsLampStart" Value="True"><Setter Property="Effect" TargetName="PART_LampEclipse"><Setter.Value><DropShadowEffect BlurRadius="25" ShadowDepth="0" Color="{DynamicResource DangerColor}"/></Setter.Value></Setter><Trigger.EnterActions><BeginStoryboard><Storyboard RepeatBehavior="Forever" AutoReverse="True"><DoubleAnimation Duration="0:0:1" BeginTime="0" From="0.8" To="1.1" Storyboard.TargetName="PART_LampEclipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" EasingFunction="{StaticResource SineEaseOut}"/><DoubleAnimation Duration="0:0:1" BeginTime="0" From="0.8" To="1.1" Storyboard.TargetName="PART_LampEclipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" EasingFunction="{StaticResource SineEaseOut}"/></Storyboard></BeginStoryboard></Trigger.EnterActions></Trigger></ControlTemplate.Triggers></ControlTemplate><ControlTemplate x:Key="LampEffect_Ripple" TargetType="{x:Type controls:BreathLamp}"><Grid><Viewbox><Grid Width="60" Height="60"><Border x:Name="PART_LampRipple_1" RenderTransformOrigin="0.5,0.5"Background="Transparent" BorderThickness="1"CornerRadius="{TemplateBinding CornerRadius}" BorderBrush="{DynamicResource DangerSolidColorBrush}"><Border.RenderTransform><ScaleTransform CenterX="0" CenterY="0" ScaleX="0.8" ScaleY="0.8"></ScaleTransform></Border.RenderTransform></Border><Border x:Name="PART_LampRipple_2" RenderTransformOrigin="0.5,0.5"Background="Transparent" BorderThickness="1"CornerRadius="{TemplateBinding CornerRadius}" BorderBrush="{DynamicResource DangerSolidColorBrush}"><Border.RenderTransform><ScaleTransform ScaleX="0.8" ScaleY="0.8"></ScaleTransform></Border.RenderTransform></Border><Border CornerRadius="{TemplateBinding CornerRadius}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}"/></Grid></Viewbox><ContentPresenter/></Grid><ControlTemplate.Triggers><Trigger Property="IsLampStart" Value="True"><Trigger.EnterActions><BeginStoryboard><Storyboard RepeatBehavior="Forever" AutoReverse="True"><DoubleAnimation Duration="0:0:1" BeginTime="0" From="0.8" To="1.3" Storyboard.TargetName="PART_LampRipple_1" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" EasingFunction="{StaticResource SineEaseOut}"/><DoubleAnimation Duration="0:0:1" BeginTime="0" From="0.8" To="1.3" Storyboard.TargetName="PART_LampRipple_1" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" EasingFunction="{StaticResource SineEaseOut}"/><DoubleAnimation Duration="0:0:1" BeginTime="0:0:0.4" From="0.8" To="1.3" Storyboard.TargetName="PART_LampRipple_2" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" EasingFunction="{StaticResource SineEaseOut}"/><DoubleAnimation Duration="0:0:1" BeginTime="0:0:0.4" From="0.8" To="1.3" Storyboard.TargetName="PART_LampRipple_2" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" EasingFunction="{StaticResource SineEaseOut}"/></Storyboard></BeginStoryboard></Trigger.EnterActions></Trigger></ControlTemplate.Triggers></ControlTemplate><ControlTemplate x:Key="LampEffect_OuterGlow" TargetType="{x:Type controls:BreathLamp}"><Grid><Viewbox><Grid Width="60" Height="60"><Border x:Name="PART_LampOuterGlow"Margin="1"BorderThickness="0" BorderBrush="Transparent" CornerRadius="{TemplateBinding CornerRadius}" Background="{DynamicResource DangerSolidColorBrush}"RenderTransformOrigin="0.5,0.5"><Border.Effect><DropShadowEffect x:Name="PART_LampOuterGlow_Effect" BlurRadius="0" ShadowDepth="0" Color="{DynamicResource DangerColor}"/></Border.Effect></Border><Border CornerRadius="{TemplateBinding CornerRadius}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}"/></Grid></Viewbox><ContentPresenter/></Grid><ControlTemplate.Triggers><Trigger Property="IsLampStart" Value="True"><Trigger.EnterActions><BeginStoryboard><Storyboard RepeatBehavior="Forever" ><DoubleAnimation Duration="0:0:0.6" AutoReverse="True" BeginTime="0" From="0" To="40" Storyboard.TargetName="PART_LampOuterGlow_Effect" Storyboard.TargetProperty="BlurRadius" EasingFunction="{StaticResource SineEaseInOut}"/></Storyboard></BeginStoryboard></Trigger.EnterActions></Trigger></ControlTemplate.Triggers></ControlTemplate><ControlTemplate x:Key="LampEffect_Streamer" TargetType="{x:Type controls:BreathLamp}"><Grid><Viewbox><Grid Width="60" Height="60"><Border x:Name="PART_LampContainer" CornerRadius="{TemplateBinding CornerRadius}" BorderThickness="{TemplateBinding BorderThickness}"  Background="Transparent" ><Border.BorderBrush><LinearGradientBrush ><LinearGradientBrush.GradientStops><GradientStop Color="#FF00cec9" Offset="0"/><GradientStop Color="#2000cec9" Offset="0.3"/><GradientStop Color="Transparent" Offset="1" /></LinearGradientBrush.GradientStops></LinearGradientBrush></Border.BorderBrush></Border></Grid></Viewbox><Border Padding="{TemplateBinding BorderThickness}"><ContentPresenter Margin="{TemplateBinding BorderThickness}"/></Border></Grid><ControlTemplate.Triggers><Trigger Property="IsLampStart" Value="True"><Trigger.EnterActions><BeginStoryboard x:Name="PART_LampStoryboard"><Storyboard RepeatBehavior="Forever"><PointAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(LinearGradientBrush.StartPoint)"  Storyboard.TargetName="PART_LampContainer"><EasingPointKeyFrame KeyTime="0:0:0.0" Value="0,1"/><EasingPointKeyFrame KeyTime="0:0:0.5" Value="0.855,0.148"/><EasingPointKeyFrame KeyTime="0:0:1" Value="0.852,0.855"/><EasingPointKeyFrame KeyTime="0:0:1.5" Value="0.148,0.855"/><EasingPointKeyFrame KeyTime="0:0:2" Value="0.144,0.149"/><EasingPointKeyFrame KeyTime="0:0:2.5" Value="0,0"/></PointAnimationUsingKeyFrames><PointAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(LinearGradientBrush.EndPoint)"  Storyboard.TargetName="PART_LampContainer"><EasingPointKeyFrame KeyTime="0:0:0.0" Value="0,1"/><EasingPointKeyFrame KeyTime="0:0:0.5" Value="0.145,0.852"/><EasingPointKeyFrame KeyTime="0:0:1" Value="0.148,0.145"/><EasingPointKeyFrame KeyTime="0:0:1.5" Value="0.852,0.145"/><EasingPointKeyFrame KeyTime="0:0:2" Value="0.856,0.851"/><EasingPointKeyFrame KeyTime="0:0:2.5" Value="0,1"/></PointAnimationUsingKeyFrames></Storyboard></BeginStoryboard></Trigger.EnterActions><Trigger.ExitActions><StopStoryboard BeginStoryboardName="PART_LampStoryboard"/></Trigger.ExitActions></Trigger></ControlTemplate.Triggers></ControlTemplate><Style TargetType="{x:Type controls:BreathLamp}" BasedOn="{StaticResource ControlBasicStyle}"><Setter Property="BorderThickness" Value="1"/><Style.Triggers><Trigger Property="LampEffect" Value="Eclipse"><Setter Property="Template" Value="{StaticResource LampEffect_Eclipse}"/></Trigger><Trigger Property="LampEffect" Value="Ripple"><Setter Property="Template" Value="{StaticResource LampEffect_Ripple}"/></Trigger><Trigger Property="LampEffect" Value="OuterGlow"><Setter Property="Template" Value="{StaticResource LampEffect_OuterGlow}"/></Trigger><Trigger Property="LampEffect" Value="Streamer"><Setter Property="Template" Value="{StaticResource LampEffect_Streamer}"/></Trigger></Style.Triggers>
</Style>
</ResourceDictionary>

二、BreatheLightExample.xaml 代码如下

<UserControl x:Class="WPFDevelopers.Samples.ExampleViews.BreatheLightExample"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:WPFDevelopers.Samples.ExampleViews"xmlns:wpfdev="https://github.com/yanjinhuagood/WPFDevelopers"mc:Ignorable="d" d:DesignHeight="450" d:DesignWidth="800"><UniformGrid Columns="2"><Border Effect="{StaticResource NormalShadowDepth}" Width="400" Height="140" Background="{StaticResource WhiteSolidColorBrush}"CornerRadius="3"><Grid Margin="20,20,0,0"><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition/></Grid.ColumnDefinitions><wpfdev:BreathLamp Width="60" Height="60" LampEffect="OuterGlow" Background="Transparent" IsLampStart="true"VerticalAlignment="Top" HorizontalAlignment="Left"><Ellipse><Ellipse.Fill><ImageBrush ImageSource="pack://application:,,,/WPFDevelopers.Samples;component/Images/Breathe/2.jpg"/></Ellipse.Fill></Ellipse></wpfdev:BreathLamp><TextBlock Grid.Column="1" Margin="10,20"FontSize="{StaticResource MediumFontSize}"><Run Foreground="{StaticResource PrimaryTextSolidColorBrush}">周星星|达叔</Run><Run Foreground="{StaticResource SuccessPressedSolidColorBrush}">正在直播</Run></TextBlock><Button Style="{StaticResource PrimaryButton}" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Bottom" Content="进入直播"/></Grid></Border><Border Effect="{StaticResource NormalShadowDepth}" Width="400" Height="140" Background="{StaticResource WhiteSolidColorBrush}"CornerRadius="3"><Grid Margin="20,20,0,0"><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition/></Grid.ColumnDefinitions><wpfdev:BreathLamp Width="60" Height="60" LampEffect="Eclipse" Background="LightGray" IsLampStart="true"VerticalAlignment="Top" HorizontalAlignment="Left"><Ellipse><Ellipse.Fill><ImageBrush ImageSource="pack://application:,,,/WPFDevelopers.Samples;component/Images/Breathe/1.jpg"/></Ellipse.Fill></Ellipse></wpfdev:BreathLamp><TextBlock Grid.Column="1" Margin="10,20"FontSize="{StaticResource MediumFontSize}"TextWrapping="Wrap"><Run Foreground="{StaticResource PrimaryTextSolidColorBrush}">大话西游之大圣娶亲&#x000A;</Run><Run Foreground="{StaticResource SuccessPressedSolidColorBrush}">正在直播</Run></TextBlock><Button Style="{StaticResource PrimaryButton}" Grid.Column="1" HorizontalAlignment="Right"VerticalAlignment="Bottom" Content="进入直播" Width="100"/></Grid></Border><Border Effect="{StaticResource NormalShadowDepth}" Width="400" Height="140" Background="{StaticResource WhiteSolidColorBrush}"CornerRadius="3"><Grid Margin="20,20,0,0"><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition/></Grid.ColumnDefinitions><wpfdev:BreathLamp Width="60" Height="60" LampEffect="Ripple" Background="LightGray" IsLampStart="true"VerticalAlignment="Top" HorizontalAlignment="Left"><Ellipse><Ellipse.Fill><ImageBrush ImageSource="pack://application:,,,/WPFDevelopers.Samples;component/Images/Breathe/0.jpg"/></Ellipse.Fill></Ellipse></wpfdev:BreathLamp><TextBlock Grid.Column="1" Margin="10,20"FontSize="{StaticResource MediumFontSize}"><Run Foreground="{StaticResource PrimaryTextSolidColorBrush}">XXXYYY</Run><Run Foreground="{StaticResource SuccessPressedSolidColorBrush}">正在直播</Run></TextBlock><Button Style="{StaticResource PrimaryButton}" Grid.Column="1" HorizontalAlignment="Right"VerticalAlignment="Bottom" Content="进入直播" Width="100"/></Grid></Border><Border Effect="{StaticResource NormalShadowDepth}" Width="400" Height="140" Background="{StaticResource WhiteSolidColorBrush}"CornerRadius="3"><Grid Margin="20,20,0,0"><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition/></Grid.ColumnDefinitions><wpfdev:BreathLamp Width="60" Height="60" LampEffect="Streamer" Background="LightGray" IsLampStart="True"VerticalAlignment="Top" HorizontalAlignment="Left"><Ellipse Width="53" Height="53"><Ellipse.Fill><ImageBrush ImageSource="pack://application:,,,/WPFDevelopers.Samples;component/Images/Chat/UserImages/yanjinhua.png"/></Ellipse.Fill></Ellipse></wpfdev:BreathLamp><TextBlock Grid.Column="1" Margin="10,20"FontSize="{StaticResource MediumFontSize}"><Run Foreground="{StaticResource PrimaryTextSolidColorBrush}">WPF开发者</Run><Run Foreground="{StaticResource SuccessPressedSolidColorBrush}">正在直播</Run></TextBlock><Button Style="{StaticResource PrimaryButton}" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Bottom" Content="进入直播" /></Grid></Border></UniformGrid>
</UserControl>

—

效果预览

鸣谢素材提供者 - 吴锋

源码地址如下

github：https://github.com/yanjinhuagood/WPFDevelopers.git

gitee：https://gitee.com/yanjinhua/WPFDevelopers.git

WPF开发者QQ群： 340500857

blogs： https://www.cnblogs.com/yanjinhua

Github：https://github.com/yanjinhuagood

出处：https://www.cnblogs.com/yanjinhua

版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

转载请著名作者出处 https://github.com/yanjinhuagood