用WPF做一個動畫數字訓示控件

用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做一個動畫數字訓示控件

源碼位址:

儀表盤源代碼

用WPF做一個動畫數字訓示控件

用WPF做一個動畫數字訓示控件文末有效果圖

繼續閱讀

剪貼闆大觀園（二）：剪貼闆間諜（ClipSpy）

學Silverlight 2系列(22)：在Silverlight中用JavaScript調用.NET代碼

面向對象與領域模組化

對自己發展的一些思考

Debug時檢測到Loaderlock的解決辦法

淺談MFC圖示

.NET程式員的技能分析參考V1.0(有附件)

asp.net AspNetpager的用法

在angularjs中通過ts編寫時，如何添加中英文轉換

msdn 訪談錄之C＃程式設計二

使用Windbg調試.Net應用程式

部署.net平台的應用程式

Robot Framework配置發送郵件功能

II6 IIS7 下 asp.net的生命周期 ASP.NET Application Life Cycle Overview for IIS 5.0 and 6.0

2010年終總結--技術篇

如何成為一名.net 工程師?