SL/WPF仿WIN8进度条
原文 http://www.cnblogs.com/kklldog/archive/2013/04/22/3036778.html
最近换到了win8，win8风格的进度条挺好玩的。可惜wpf上没有这个控件。那咱就自己来写一个吧。
用SL封装了个效果：
思路：这个过程可以分为3个阶段，最左边开始一个快速移动动画到中间位置，开始缓慢的做位移，然后再开始快速的飞到最右边，消失。且在第一个点缓动的时候，第二个点开始启动，依次类推，到最后一个点飞到最右边的时候，再启动第一个点。如此循环。
XAML：主要是定义4个点，以及每个点的动画。
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：
// 创建时间： 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种颜色之间做渐变。