WPF 四种不同效果呼吸灯

Posted dotNET跨平台

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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">
                        大话西游之大圣娶亲&#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>

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 四种不同效果呼吸灯的主要内容，如果未能解决你的问题，请参考以下文章

Arduino驱动WS2812B呼吸灯效果

Arduino树莓派RP2040板载WS2812灯变换效果以及呼吸灯效果示例

Arduino RP2040通过调节PWM实现呼吸灯效果

FPGA学习之 呼吸灯

FPGA学习之 呼吸灯

FPGA学习之 呼吸灯