WPF 四种不同效果呼吸灯
生活随笔
收集整理的這篇文章主要介紹了
WPF 四种不同效果呼吸灯
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
WPF開發者QQ群：?340500857? | 微信群 -> 進入公眾號主頁?加入組織
?? ? ?由于微信群人數太多入群請添加小編微信號
（yanjinhuawechat）或（W_Feng_aiQ）邀請入群
（需備注WPF開發者）
? PS：有更好的方式歡迎推薦。
01
—
代碼如下
一、創建?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}">大話西游之大圣娶親
</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>02
—
效果預覽
鳴謝素材提供者 - 吳鋒
源碼地址如下
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
掃一掃關注我們，
更多知識早知道！
點擊閱讀原文可跳轉至源代碼
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的WPF 四种不同效果呼吸灯的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在业务层实现校验请求参数
- 下一篇： 官宣！.NET官网发布中⽂版