SL/WPF仿WIN8进度条

原文 http://www.cnblogs.com/kklldog/archive/2013/04/22/3036778.html

最近换到了win8，win8风格的进度条挺好玩的。可惜wpf上没有这个控件。那咱就自己来写一个吧。

用SL封装了个效果：

 

思路：这个过程可以分为3个阶段，最左边开始一个快速移动动画到中间位置，开始缓慢的做位移，然后再开始快速的飞到最右边，消失。且在第一个点缓动的时候，第二个点开始启动，依次类推，到最后一个点飞到最右边的时候，再启动第一个点。如此循环。

XAML：主要是定义4个点，以及每个点的动画。


<UserControl x:Class="Win8ProcessBar.CtlWin8ProcessBar"
             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" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300" Height="20" Loaded="UserControl_Loaded"   Initialized="CtlWin8ProcessBar_OnInitialized">

    <Canvas>
        <Ellipse x:Name="el" Width="6" Height="6" Fill="Black" Canvas.Top="7" Canvas.Left="0" Opacity="0">
            <Ellipse.Resources>
                <Storyboard x:Key="sbLeft" Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="el">
                    <DoubleAnimation From="{Binding  Path=LeftFrom, Mode=OneWay}"  To="{ Binding Path=LeftTo, Mode=OneWay}"  Duration="0:0:0.25">
                    </DoubleAnimation>
                </Storyboard>
                <Storyboard x:Key="sbSlow" Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="el">
                    <DoubleAnimation  From="{Binding  Path=SlowFrom, Mode=OneWay}"  To="{ Binding Path=SlowTo, Mode=OneWay}"    Duration="0:0:1">
                    </DoubleAnimation>
                </Storyboard>
                <Storyboard x:Key="sbRight" Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="el">
                    <DoubleAnimation From="{Binding  Path=RightFrom, Mode=OneWay}"  To="{ Binding Path=RightTo, Mode=OneWay}"    Duration="0:0:0.25">
                    </DoubleAnimation>
                </Storyboard>
            </Ellipse.Resources>
        </Ellipse>

        <Ellipse x:Name="el1" Width="6" Height="6" Fill="Black" Canvas.Top="7" Canvas.Left="0" Opacity="0">
            <Ellipse.Resources>
                <Storyboard x:Key="sbLeft1" Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="el1">
                    <DoubleAnimation   From="{Binding  Path=LeftFrom, Mode=OneWay}"  To="{ Binding Path=LeftTo, Mode=OneWay}"  Duration="0:0:0.25">
                    </DoubleAnimation>
                </Storyboard>
                <Storyboard x:Key="sbSlow1" Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="el1">
                    <DoubleAnimation  From="{Binding  Path=SlowFrom, Mode=OneWay}"  To="{ Binding Path=SlowTo, Mode=OneWay}"     Duration="0:0:1">
                    </DoubleAnimation>
                </Storyboard>
                <Storyboard x:Key="sbRight1" Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="el1">
                    <DoubleAnimation  From="{Binding  Path=RightFrom, Mode=OneWay}"  To="{ Binding Path=RightTo, Mode=OneWay}"  Duration="0:0:0.25">
                    </DoubleAnimation>
                </Storyboard>
            </Ellipse.Resources>
        </Ellipse>
===========================================这里省略2个点的定义==================================================
    </Canvas>

</UserControl> 

cs：

//作者：       minjie.zhou
// 创建时间：   2013/4/21 23:51:59

namespace Win8ProcessBar
{
    /// <summary>
    /// UProgressBar.xaml 的交互逻辑
    /// </summary>
    public partial class CtlWin8ProcessBar : UserControl, INotifyPropertyChanged
    {
        public CtlWin8ProcessBar()
        {
            InitializeComponent();
        }

        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            if (double.IsNaN(Width))//默认为400的宽度
            {
                Width = 400;
            }
            LeftFrom = 0;
            LeftTo = Width / 2 - (Width /7) / 2;
            SlowFrom = LeftTo;
            SlowTo = LeftTo + (Width / 7);
            RightFrom = SlowTo;
            RightTo = Width;

            Start();
        }

        #region 属性
        private double _leftFrom;
        /// <summary>
        /// 左边第一个起点
        /// </summary>
        public double LeftFrom
        {
            get { return _leftFrom; }
            set
            {
                _leftFrom = value;
                if (this.PropertyChanged != null)
                {
                    NotifyPropertyChanged("LeftFrom");
                }
            }
        }

        private double _leftTo;
        /// <summary>
        /// 第一个终点
        /// </summary>
        public double LeftTo
        {
            get
            {
                return _leftTo;
            }
            set
            {
                _leftTo = value;
                if (this.PropertyChanged != null)
                {
                    NotifyPropertyChanged("LeftTo");
                }
            }
        }

        private double _slowFrom;
        /// <summary>
        /// 缓动起点
        /// </summary>
        public double SlowFrom
        {
            get
            {
                return _slowFrom;
            }
            set
            {
                _slowFrom = value;
                if (this.PropertyChanged != null)
                {
                    NotifyPropertyChanged("SlowFrom");
                }
            }
        }

        private double _slowTo;
        /// <summary>
        /// 缓动终点
        /// </summary>
        public double SlowTo
        {
            get
            { 
                return _slowTo;
            }
            set
            {
                _slowTo = value;
                if (this.PropertyChanged != null)
                {
                    NotifyPropertyChanged("SlowTo");
                }
            }
        }

        private double _rightFrom;
        /// <summary>
        /// 右边起点
        /// </summary>
        public double RightFrom
        {
            get
            {
                return _rightFrom;
            }
            set
            {
                _rightFrom = value;
                if (this.PropertyChanged != null)
                {
                    NotifyPropertyChanged("RightFrom");
                }
            }
        }

        private double _rightTo;
        /// <summary>
        /// 右边终点
        /// </summary>
        public double RightTo
        {
            get
            {
                return _rightTo;
            }
            set
            {
                _rightTo = value;
                if (this.PropertyChanged != null)
                {
                    NotifyPropertyChanged("RightTo");
                }
            }
        }
        #endregion

        private void CtlWin8ProcessBar_OnInitialized(object sender, EventArgs e)
        {
            this.DataContext = this;

            this.el.Opacity = 0;
            this.el1.Opacity = 0;
            this.el2.Opacity = 0;
            this.el3.Opacity = 0;

            var sbLeft = this.el.FindResource("sbLeft") as Storyboard;
            var sbSlow = this.el.FindResource("sbSlow") as Storyboard;
            var sbRight = this.el.FindResource("sbRight") as Storyboard;

            var sbLeft1 = this.el1.FindResource("sbLeft1") as Storyboard;
            var sbSlow1 = this.el1.FindResource("sbSlow1") as Storyboard;
            var sbRight1 = this.el1.FindResource("sbRight1") as Storyboard;

            var sbLeft2 = this.el2.FindResource("sbLeft2") as Storyboard;
            var sbSlow2 = this.el2.FindResource("sbSlow2") as Storyboard;
            var sbRight2 = this.el2.FindResource("sbRight2") as Storyboard;

            var sbLeft3 = this.el3.FindResource("sbLeft3") as Storyboard;
            var sbSlow3 = this.el3.FindResource("sbSlow3") as Storyboard;
            var sbRight3 = this.el3.FindResource("sbRight3") as Storyboard;

            //第一个点第一个动画结束后开启缓动，第二个点启动
            sbLeft.Completed += (a, b) =>
                {
                    sbSlow.Begin();
                    el1.Opacity = 1;
                    sbLeft1.Begin();
                };
            //第一个点缓动结束，右边动画启动
            sbSlow.Completed += (a, b) => sbRight.Begin();
            sbRight.Completed += (a, b) => el.Opacity = 0;
            //以下类推
            sbLeft1.Completed += (a, b) =>
            {
                sbSlow1.Begin();
                el2.Opacity = 1;
                sbLeft2.Begin();
            };
            sbSlow1.Completed += (a, b) => sbRight1.Begin();
            sbRight1.Completed += (a, b) => el1.Opacity = 0;

            sbLeft2.Completed += (a, b) =>
            {
                sbSlow2.Begin();
                el3.Opacity = 1;
                sbLeft3.Begin();
            };
            sbSlow2.Completed += (a, b) => sbRight2.Begin();
            sbRight2.Completed += (a, b) => el2.Opacity = 0;

            sbLeft3.Completed += (a, b) => sbSlow3.Begin();
            sbSlow3.Completed += (a, b) => sbRight3.Begin();
            //最后一个点动画结束，第一个点重启 如此循环
            sbRight3.Completed += (a, b) =>
            {
                el3.Opacity = 0;
                el.Opacity = 1;
                sbLeft.Begin();
            };
        }
      
        public void Start()
        {
            var sb = this.el.FindResource("sbLeft") as Storyboard;
            this.el.Opacity = 1;
            if (sb != null)
                sb.Begin();
        }
        public event PropertyChangedEventHandler PropertyChanged;

        private void NotifyPropertyChanged(String propertyName = "")
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

} 

重点:

 Sotryboard在sl/WPF里面做动画的时候有很大的作用。配合DoubleAnimation可以在一段时间内改变某个对象的double型属性。比如透明值在1秒内1到0。上面例子就是做了一个在一段时间内Canvas.Left属性从0到最右边的动画。配合ColorAnimation可以在2种颜色之间做渐变。

时间： 2024-04-25 01:19:51

SL/WPF仿WIN8进度条的相关文章

仿vs实现WPF好看的进度条

  为了界面友好,一般的操作时间较长时,都需要增加进度条提示.由于WPF自带的进度条其实不怎么好看,而且没啥视觉效果.后来,装VS2012时,发现安装过程中进度条效果不错,于是上网查了资料.学习了ModernUI(开源的),地址:https://github.com/firstfloorsoftware/mui. 后来,做了尝试写了个Demo,效果不错.另外,专门录制了tif文件,方便大家看到效果.废话不多说,先展示效果: 一.效果展示 A.VS2012安装界面图; B.个人尝试Demo效果图:

仿vs实现WPF好看的进度条_实用技巧

为了界面友好,一般的操作时间较长时,都需要增加进度条提示.由于WPF自带的进度条其实不怎么好看,而且没啥视觉效果.后来,装VS2012时,发现安装过程中进度条效果不错,于是上网查了资料.学习了ModernUI(开源的),地址:https://github.com/firstfloorsoftware/mui. 后来,做了尝试写了个Demo,效果不错.另外,专门录制了tif文件,方便大家看到效果.废话不多说,先展示效果: 一.效果展示 A.VS2012安装界面图: B.个人尝试Demo效果图: 二

使用线程新建WPF窗体(公用进度条窗体)

使用线程新建窗体 项目中需要一个公用的进度条窗体.大家知道在wpf中,有两个线程,一个是UI线程,另一个是监听线程(一直监听用户的输入).如果我们后台有阻塞UI线程的计算存在,那么界面上的比如进度条什么动态的UI都会被因为阻塞而静止不动. 所以我的想法就是新起一个线程来负责进度条窗体的显示与关闭,具体实现代码如下:   private static Thread th; /// <summary> /// 显示进度条 线程 /// </summary> /// <param

原生javascript模仿win8等待提示圆圈进度条_javascript技巧

一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简单介绍 原生javascript编写,需要理解js基于面向对象编程和圆形坐标计算! 实现原理:把每个圆点抽象成一个对象(ProgressBarWin8类型),将每个圆点对象存在数组中(progressArray),延迟执行每个圆点对象的run方法,至于圆点运行速度越来越快,是通过改变定时器延迟毫秒数

WPF中自定义漂亮的进度条

wpf中自带的进度条是这个样子德. 在2003中这个进度条的样子就会变得非常难看. 在wpf中您可以自己制作任意样式的进度条.如下图: UserControl.xaml 用户控件 <Grid x:Name="LayoutRoot" Background="Transparent" HorizontalAlignment="Center" VerticalAlignment="Center"> <Grid.Re

JS仿Windows开机启动Loading进度条的方法

 这篇文章主要介绍了JS仿Windows开机启动Loading进度条的方法,实例分析了javascript操作html元素及对应样式实现特效的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JS仿Windows开机启动Loading进度条的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <html> <title>JS仿Windows开机启动的Loading进度条</title> </head> <body st

Android仿水波纹流量球进度条控制器_Android

仿水波纹流球进度条控制器,Android实现高端大气的主流特效,供大家参考,具体内容如下 效果图: CircleView 这里主要是实现中心圆以及水波特效 package com.lgl.circleview; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.gra

仿微信中加载网页时带线行进度条的WebView的实现

finddreams:http://blog.csdn.net/finddreams/article/details/44172639  为了仿微信中加载网页时带进度条的WebView的实现,首先我们来看一下微信中的效果是什么样的:  明确需求之后,我们来开始动手做,首先我们来自定义一个带进度条的WebView,名字为ProgressWebView: <code class="hljs java has-numbering" style="display: block;

Android特效专辑（十一）——仿水波纹流量球进度条控制器，实现高端大气的主流特效

Android特效专辑(十一)--仿水波纹流球进度条控制器,实现高端大气的主流特效 今天看到一个效果挺不错的,就模仿了下来,加上了一些自己想要的效果,感觉还不错的样子,所以就分享出来了,话不多说,上图 截图 CircleView 这里主要是实现中心圆以及水波特效 package com.lgl.circleview; import android.content.Context; import android.graphics.Canvas; import android.graphics.Co