WPF 四种不同效果呼吸灯

最新推荐文章于 2024-05-09 09:48:27 发布
最新推荐文章于 2024-05-09 09:48:27 发布
阅读量1.5k 收藏 5
点赞数 1
文章标签： github wpf css3 hash jwt
原文链接：https://mp.weixin.qq.com/s?__biz=MzAwNTMxMzg1MA==&mid=2654086988&idx=4&sn=79e6fe68c083200c069e8c7c961075d6&chksm=80d80319b7af8a0f75f43eed6bb95f1930e8bc3296d230235056d80a34bd9383d823c0311732&scene=126&&sessionid=0
版权

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

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

（yanjinhuawechat）或（W_Feng_aiQ）邀请入群

（需备注WPF开发者）

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

01

—

代码如下

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

a69c2a7d91cddfbf379d1c425f400b61.png

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 代码如下

0df6858fe44b8e2974552f4807edc3c9.png

<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 代码如下

7dc472a8d0aeb92704073061df23f9ff.png

<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

005a570e6117cfacc744547f890cc442.png

扫一扫关注我们，

4e6837d20c69ea44b22d34d8857bb725.gif

更多知识早知道！

399c3b8f05142376528803ad06592f9d.gif

点击阅读原文可跳转至源代码

dotNET跨平台
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
来瞧瞧，WPF 炫酷走马灯!
虚幻私塾
08-22 528
作者：WPFDevelopersOrg。控件名：SpotLight。
WPF 呼吸灯特效
戮筱沫博客
07-03 6021
path >> Ellipse的呼吸灯特效         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         Title="MainWindow" Height="3
探秘WPFDevelopers：高效便捷的UI工具库
最新发布
gitblog_00053的博客
05-09 443
探秘WPFDevelopers：高效便捷的UI工具库 项目地址:https://gitcode.com/WPFDevelopersOrg/WPFDevelopers 项目简介 如果你是.NET Framework与WPF开发的爱好者，那么你一定不能错过这个名为WPFDevelopers的开源项目。它是一个由一群热情的技术爱好者维护的资源库，提供了一系列高质量的控件和工具，旨在提高你的开发效率，提升...
wpf实现无边框 带阴影效果的窗口 DropShadowEffect属性的应用
淡淡的幸福
12-02 716
1、首先设置窗口的属性 WindowStyle=“None” AllowsTransparency=“True” 2、窗口里面包一个border 3、设置border的effect属性 <Border.Effect> </Border.Effect> 4、设置border的Margin为ShadowDepth的值 5、窗口的width和height属性都加ShadowDepth的即可 ...
WPF 实现音频播放动画控件
dotNET跨平台
03-26 367
WPF开发者QQ群此群已满340500857，请加新群458041663 由于微信群人数太多入群请添加小编微信号yanjinhuawechat 或 W_Feng_aiQ邀请入群需备注WPF开发者01—代码如下一、创建AnimationAudio.xaml代码如下。<ResourceDictionaryxmlns="http://schemas...
WPF 控件专题 Border控件详解
^@^lemon tea^@^
06-13 6485
WPF 控件专题 Border控件详解
WPF TextBox 动画阴影（呼吸灯）
HeBizhi1997的博客
12-24 1096
&lt;TextBox Height="30" Width="300" TextWrapping="Wrap" Text="TextBox"&gt; &lt;TextBox.Template&gt; &lt;ControlTemplate&gt; &lt;Con
WPF Effect （一）
qq_37246121的博客
02-09 5010
 BitmapEffect位图效果是简单的像素处理操作。它可以呈现下面几种特殊效果。             BevelBitmapEffect        凹凸效果            BlurBitmapEffect         模糊效果            DropShadowBitmapEffect投影效果            EmbossBitmapEffect     浮雕...
WPF实现简单的跑马灯效果
10-19
主要为大家详细介绍了WPF实现简单的跑马灯效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
C# WPF 实现 会呼吸的文字 效果
02-12
在本文中，我们将深入探讨如何使用C# WPF（Windows Presentation Foundation）来实现一个具有“呼吸”效果的文字特效。这种效果让文字周围的区域呈现出渐变的动态呼吸辉光，为用户界面增添了一种引人入胜的视觉体验...
WPF Canvas 效果 聚光灯效果
05-12
这个效果可以通过组合不同的WPF图形、变换和视觉层次来实现。下面我们将详细介绍实现这一效果的关键步骤和技术。 首先，我们需要一个Canvas作为画布，在其中放置我们要显示的元素。在XAML中，可以这样定义Canvas： ...
Storyboard详细用法
03-09
Xcode---Storyboard用法详细，图文并茂，值得学习
C# WPF利用类库操控ADAM4150实现控制灯的开关
03-16
利用提供的C#类库操作ADAM4150,ADAM4150控制继电器实现灯的开关.
wpf 霓虹灯效果源码
09-10
在本文中，我们将深入探讨如何在WPF（Windows Presentation Foundation）中实现霓虹灯效果，这是一种视觉上引人注目的效果，通常用于创建现代、炫酷的用户界面。霓虹灯效果通过模拟真实霓虹灯的发光特性，使得UI元素...
[WPF] WPF的按钮(Button)
热门推荐
Cloud Hsu的专栏
09-07 1万+
[WPF] WPF的按钮(Button)
好玩的WPF第二弹：电子表字体显示时间+多彩呼吸灯特效button
weixin_30793643的博客
12-19 179
我们先来看看Quartz MS字体动态显示系统时间的效果，难度相较于上一篇也要简单很多。 首先是定义一个TextBlock例如以下。 <Grid> <TextBlock Name="tBlockTime" HorizontalAlignment="Center" VerticalAlignment="Center" F...
WPF 控件专题 Button控件详解
^@^lemon tea^@^
07-15 5688
WPF 控件专题 Button控件详解
WPF 带信号灯的Button以及Style使用图文教程
zjw_xatu的博客
09-22 4391
由于实际的软件开发中系统自带的控件往往无法实现我们想要的效果，这就需要自定义一些特殊的控件style比如带信号灯的按钮、三角形的按钮、、，关于控件style的使用教程如下。 一、新建Resource文件夹，添加自定义的资源词典 二、编写控件的style &lt;ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/20...
WPF 阴影效果 DropShadowEffect
weixin_43152819的博客
03-08 1127
WPF中的控件阴影效果，DropShadowEffect的简单使用。
WPF 定点跑马灯效果
05-24
WPF 中可以使用 Animation 和 VisualBrush 来实现定点跑马灯效果。 首先，创建一个 TextBlock 控件，并将其包含在一个 Canvas 中。将 TextBlock 的内容设置为需要展示的文本。假设 Canvas 的宽度为 300，TextBlock 的宽度为 200。 ```xml <Canvas Width="300"> <TextBlock Text="这是一段需要展示的文本" Width="200" /> </Canvas> ``` 接下来，在 Canvas 中添加一个矩形，用于遮挡 TextBlock 的部分内容。将矩形的宽度设置为 100，高度设置为 TextBlock 的高度。将矩形的 Fill 属性设置为一个 VisualBrush，该 VisualBrush 的视觉元素是 TextBlock，并且其对齐方式设置为左对齐。这样，当矩形向右移动时，TextBlock 的内容也会向左移动，从而实现跑马灯效果。 ```xml <Canvas Width="300"> <TextBlock Text="这是一段需要展示的文本" Width="200" /> <Rectangle Width="100" Height="{Binding ActualHeight, ElementName=TextBlock}"> <Rectangle.Fill> <VisualBrush Visual="{Binding ElementName=TextBlock}" AlignmentX="Left" Viewport="-100,0,200,1" ViewportUnits="Absolute" TileMode="Tile"/> </Rectangle.Fill> </Rectangle> </Canvas> ``` 最后，使用一个 Storyboard 来控制矩形的移动。将矩形的 Canvas.Left 属性绑定到一个 DoubleAnimation 的 To 属性，并设置 Duration 和 RepeatBehavior 属性。这样，矩形会在 Canvas 上水平移动，从而实现跑马灯效果。 ```xml <Canvas Width="300"> <TextBlock Text="这是一段需要展示的文本" Width="200" /> <Rectangle Width="100" Height="{Binding ActualHeight, ElementName=TextBlock}" Canvas.Left="0"> <Rectangle.Fill> <VisualBrush Visual="{Binding ElementName=TextBlock}" AlignmentX="Left" Viewport="-100,0,200,1" ViewportUnits="Absolute" TileMode="Tile"/> </Rectangle.Fill> <Rectangle.Triggers> <EventTrigger RoutedEvent="Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" To="-100" Duration="0:0:5" RepeatBehavior="Forever" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Rectangle.Triggers> </Rectangle> </Canvas> ``` 这样，就实现了一个简单的定点跑马灯效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值