用WPF做一个动画数字指示控件

最新推荐文章于 2024-08-16 18:04:50 发布
最新推荐文章于 2024-08-16 18:04:50 发布
阅读量669 收藏 2
点赞数
分类专栏： 自定义控件 文章标签： .net
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42850577/article/details/108827324
版权

用WPF做一个动画数字指示控件文末有效果图


绘制界面数字块和指示块： 

<UserControl.Resources>
        <FontFamily x:Key="Digital">
            pack://application:,,,/#DS-Digital
        </FontFamily>
        
        <Style TargetType="TextBlock">
            <Setter Property="Foreground" Value="#17A317"/>
            <Setter Property="FontSize" Value="40"/>
            <Setter Property="FontFamily" Value="{StaticResource Digital}"/>
        </Style>
       
    </UserControl.Resources>
    <Border CornerRadius="5" Background="#383838">
        <Border.Effect>
            <DropShadowEffect BlurRadius="15" ShadowDepth="2" Color="#05950B"/>
        </Border.Effect>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition Width="4*"/>
            </Grid.ColumnDefinitions>
            <Path Data="M0,0 15,15 0,30z"  VerticalAlignment="Center" Stretch="Fill" Margin="5 100">
                <Path.Effect>
                    <DropShadowEffect BlurRadius="10" ShadowDepth="2"/>
                </Path.Effect>
                <Path.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#77D4E9"/>
                        <GradientStop Color="#0E6892"  Offset="1"/>
                    </LinearGradientBrush>
                </Path.Fill>
            </Path>

            <Grid Grid.Column="1" ClipToBounds="True">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Grid.Resources>
                    <Style TargetType="Border">
                        <Setter Property="BorderBrush" Value="#06C106"/>
                        <Setter Property="BorderThickness" Value="2 2 2 0"/>
                    </Style>
                </Grid.Resources>

                <ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Hidden">
                    <StackPanel>
                        <StackPanel.RenderTransform>
                            <TransformGroup>
                                <TranslateTransform x:Name="Value1" Y="-15"/>
                            </TransformGroup>
                        </StackPanel.RenderTransform>
                        <Border Width="40" Height="40">
                            <TextBlock Text="7" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="8" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="9" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
                        </Border>

                        <Border Width="40" Height="40">
                            <TextBlock Text="0" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="1" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="2" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="3" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="4" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="5" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="6" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="7" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="8" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="9" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
                        </Border>

                        <Border Width="40" Height="40">
                            <TextBlock Text="0" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="1" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40" BorderThickness="2">
                            <TextBlock Text="2"  HorizontalAlignment="Center"  VerticalAlignment="Center"/>
                        </Border>
                    </StackPanel>
                </ScrollViewer>

                <ScrollViewer  Grid.Column="1" ScrollViewer.VerticalScrollBarVisibility="Hidden">
                    <StackPanel >
                        <StackPanel.RenderTransform>
                            <TransformGroup>
                                <TranslateTransform x:Name="Value2" Y="-15"/>
                            </TransformGroup>
                        </StackPanel.RenderTransform>
                        <Border Width="40" Height="40">
                            <TextBlock Text="7" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="8" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="9" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>

                        <Border Width="40" Height="40">
                            <TextBlock Text="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="3" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="4" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="5" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="6" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="7" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="8" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="9" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>

                        <Border Width="40" Height="40">
                            <TextBlock Text="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40" BorderThickness="2">
                            <TextBlock Text="2"  HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </StackPanel>
                </ScrollViewer>

                <ScrollViewer Grid.Column="2" ScrollViewer.VerticalScrollBarVisibility="Hidden">
                    <StackPanel >
                        <StackPanel.RenderTransform>
                            <TransformGroup>
                                <TranslateTransform x:Name="Value3" Y="-15"/>
                            </TransformGroup>
                        </StackPanel.RenderTransform>
                        <Border Width="40" Height="40">
                            <TextBlock Text="7" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="8" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="9" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>

                        <Border Width="40" Height="40">
                            <TextBlock Text="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="3" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="4" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="5" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="6" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="7" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="8" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40" >
                            <TextBlock Text="9" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>

                        <Border Width="40" Height="40">
                            <TextBlock Text="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40">
                            <TextBlock Text="1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <Border Width="40" Height="40" BorderThickness="2">
                            <TextBlock Text="2"  HorizontalAlignment="Center"  VerticalAlignment="Center"/>
                        </Border>
                    </StackPanel>
                </ScrollViewer>

                <Rectangle Stroke="#41B0E4" StrokeThickness="2" StrokeDashArray="5 1" RadiusX="5" RadiusY="5" Grid.ColumnSpan="3" Margin="1 100 1 100" Fill="#3B484948">
                    <Rectangle.Effect>
                        <DropShadowEffect BlurRadius="5" ShadowDepth="2"/>
                    </Rectangle.Effect>
                </Rectangle>

                <Path Grid.ColumnSpan="3" Margin="3 103" Fill="#7B8D8D8D" Data="M0,10 9,3 20,0 0,0z" Stretch="Fill"/>
            </Grid>
        </Grid>
    </Border>

简单的写一个依赖属性以便调用时绑定属性：

public partial class FlightGauge : UserControl
    {
        private readonly int tranY_0 = -15;
        private readonly int tranY_1 = -55;
        private readonly int tranY_2 = -95;
        private readonly int tranY_3 = -135;
        private readonly int tranY_4 = -175;
        private readonly int tranY_5 = -215;
        private readonly int tranY_6 = -255;
        private readonly int tranY_7 = -295;
        private readonly int tranY_8 = -335;
        private readonly int tranY_9 = -375;

        private int[] levels = new int[10];
        public FlightGauge()
        {
            InitializeComponent();
            levels = new int[] { tranY_0, tranY_1, tranY_2, tranY_3, tranY_4, tranY_5, tranY_6, tranY_7, tranY_8, tranY_9 };

            SetCurrentValue(ValueProperty, 60);
        }



        public int Value
        {
            get { return (int)GetValue(ValueProperty); }
            set { SetValue(ValueProperty, value); }
        }

        // Using a DependencyProperty as the backing store for Value.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ValueProperty =
            DependencyProperty.Register("Value", typeof(int), typeof(FlightGauge), new PropertyMetadata(0, OnValueChange));

        private static void OnValueChange(DependencyObject d, DependencyPropertyChangedEventArgs e) => (d as FlightGauge).ChangeValue();

        private void ChangeValue()
        {
            if (Value>999)
            {
                return;
            }

            var one = Value % 10;
            var ten = Value % 100 / 10;
            var hundred = Value % 1000 / 100;

            DoubleAnimation doubleAnimationhundred = new DoubleAnimation(levels[hundred], new Duration(TimeSpan.FromSeconds(0.5)));
            DoubleAnimation doubleAnimationten = new DoubleAnimation(levels[ten], new Duration(TimeSpan.FromSeconds(0.5)));
            DoubleAnimation doubleAnimationone = new DoubleAnimation(levels[one], new Duration(TimeSpan.FromSeconds(0.5)));
            CubicEase cubicEase = new CubicEase() { EasingMode = EasingMode.EaseOut };

            doubleAnimationhundred.EasingFunction = cubicEase;
            doubleAnimationten.EasingFunction = cubicEase;
            doubleAnimationone.EasingFunction = cubicEase;

            Value1.BeginAnimation(TranslateTransform.YProperty, doubleAnimationhundred);
            Value2.BeginAnimation(TranslateTransform.YProperty, doubleAnimationten);
            Value3.BeginAnimation(TranslateTransform.YProperty, doubleAnimationone);

        }
    }

调用代码：

  <Grid>
        <ctr:FlightGauge  x:Name="gauge" Width="200" Height="250"/>
        <Slider Minimum="0" SmallChange="1" Maximum="999" Value="{Binding ElementName=gauge,Path=Value}" VerticalAlignment="Bottom" Margin="10"/>
    </Grid>

在这里插入图片描述
源码地址:
仪表盘源代码

不知名君
关注
专栏目录
WPF数字飞舞动画效果
04-27
WPF动画，通过C#达到随机出现数字，在屏幕中飞舞。 其中数字字体随机出现。可以通过代码控制屏幕中同时出现的数字个数。
WPF数据可视化控件（一） LED风格数字控件
08-11
WPF数据可视化控件（一） LED风格数字控件，详情可见博文：https://blog.csdn.net/zhuo_wp/article/details/81561190
用WPF实现计数振动动画效果
qq_27474555的博客
07-07 318
通过用户控件实现计数、振动的动画效果，主窗口调用控件实现动画的显示。
WPF—常用控件、属性、事件、详细介绍
最新发布
qq_3517289697的博客
08-16 3568
WPF（Windows Presentation Foundation）是微软推出的基于Windows 的用户界面框架，属于.NET Framework 3.0的一部分。它提供了统一的编程模型、语言和框架，真正做到了分离界面设计人员与开发人员的工作；同时它提供了全新的多媒体交互用户图形界面。
WPF自定义控件 《动画》
weixin_34075551的博客
04-03 160
通常，当WPF常用的控件不能满足我们的需求时，我们就会创建自己的控件，有用户控件和自定义控件两种。就很想winform中的，用户控件可以基于当前的控件组合成我们需要的控件，而自定义控件那么就是从0做起，不过继承自一个和我们功能相似的类会效果更好，比如CustomControl继承Button的一些方法特性。 UserControl非常好理解，网上有许多教程。 CustomControl由于其没...
WPF自定义LED风格数字控件
10-22
WPF自定义LED风格数字控件
WPF 绘制一个简单的仪表盘控件源码
09-27
在本文中，我们将深入探讨如何在WPF（Windows Presentation Foundation）中绘制一个简单的仪表盘控件，并实现动画显示以及LED字体效果。WPF是.NET框架的一部分，提供了丰富的UI设计和图形渲染能力，使得创建这样的...
WPF编写的指南针控件
03-25
`WindowsFormsApplication2.exe`可能是使用此指南针控件的一个示例应用程序，它展示了如何在WPF窗体中嵌入和使用该控件。 总结来说，WPF编写的指南针控件展示了WPF的矢量图形绘制能力、数据绑定、动画效果以及组件...
WPF-自定义控件
05-18
自定义控件是WPF应用程序设计中的一个重要组成部分，它允许开发者根据特定需求创建具有独特外观和行为的用户界面元素。资源中包含了一系列作者自己编写的以及修改过的第三方控件，如温度计、Win8等待动画、车速表、...
WPF 特效控件集合
05-08
总的来说，WPF特效控件集合是一个宝贵的资源，它不仅展示了WPF的强大功能，也为开发者提供了丰富的灵感和实践案例。无论是为了提升应用的美观度，还是为了提升自身的技能，这个资源包都值得深入探索和学习。
WPF、C# 电池控件的制作
04-25
在本文中，我们将深入探讨如何使用WPF（Windows Presentation Foundation）和C#语言来创建一个电池状态控件。WPF是.NET Framework的一部分，为开发者提供了丰富的功能，用于构建具有精美图形用户界面（GUI）的应用...
WPF控件 动画仪表
10-21
自定义控件，模拟飞行用显示仪表，可以设置，动画显示，报警功能，自定义控件，需要源码可以联系我
利用Blend制作动画生成WPF控件
04-14
主要利用blend制作动画，生成WPF应用程序
WPF量杯图控件代码含动画效果(3D)
10-16
自己写的量杯图控件，自己认为效果还不错，包含溶液的动画效果。
WPF动态切换皮肤，控件切换动画
03-18
WPF动态切换皮肤，以及控件切换动画，窗体翻转效果
wpf 动画效果
11-20
动画效果 设置按钮的转换效果 动画时间 TranslateTransform tt = new TranslateTransform(); DoubleAnimation da = new DoubleAnimation();
WPF自定义LED风格数字显示控件
weixin_30352191的博客
09-26 356
WPF自定义LED风格数字显示控件 原文:WPF自定义LED风格数字显示控件 版权声明：本文为博主原创文章，转载请注明作者和出处 https://blog.csdn.net/ZZZWWWPPP11199988899/article/details/52895167 ...
#Plugin 数字滚动累加动画插件
aoyou4854的博客
08-12 173
NumScroll 数字滚动累加动画插件(Digital scroll cumulative animation plug-in) 1.使用前先引入jquery (Introduce jQuery before use) 2.加入学习Q群:814798690 (Join Learning QQ Group: 814798690) 案例展示(Case presentation) 下载地址...
wpf 动画特效
06-25
wpf动画特效 C# 用户控件动画 3Dwpf动画特效 C# 用户控件动画
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不知名君

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值