模仿Windows Phone 7等待状态

Windows Phone 7的等待状态用五个移动的点呈现，在Win8中也使用了同样的风格，感觉很好，本人尝试制作了一个Silverlight控件模仿他，感觉效果还可以，发出来分享一下，有什么不足的地方请各位高手点评点评。

下面是进度条的效果截图

先上界面代码

<UserControl x:Class="SilverlightApplication3.WP7ProgressBar"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="2" d:DesignWidth="400" Height="2">
    <UserControl.Resources>
        <Storyboard x:Name="Move" RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle1">
                <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                <SplineDoubleKeyFrame x:Name="SplineDoubleKeyFrame1" KeyTime="0:0:3" Value="500" KeySpline="0.2,0.7,0.8,0.3"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle2">
                <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                <SplineDoubleKeyFrame x:Name="SplineDoubleKeyFrame2" KeyTime="0:0:3.2" Value="500"  KeySpline="0.2,0.7,0.8,0.3"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle3">
                <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
                <SplineDoubleKeyFrame x:Name="SplineDoubleKeyFrame3" KeyTime="0:0:3.4" Value="500"  KeySpline="0.2,0.7,0.8,0.3"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle4">
                <SplineDoubleKeyFrame KeyTime="0:0:0.6" Value="0"/>
                <SplineDoubleKeyFrame x:Name="SplineDoubleKeyFrame4" KeyTime="0:0:3.6" Value="500"  KeySpline="0.2,0.7,0.8,0.3"/>
            </DoubleAnimationUsingKeyFrames >
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle5">
                <SplineDoubleKeyFrame KeyTime="0:0:0.8" Value="0"/>
                <SplineDoubleKeyFrame x:Name="SplineDoubleKeyFrame5" KeyTime="0:0:3.8" Value="500"  KeySpline="0.2,0.7,0.8,0.3"/>
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="rectangle1">
                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:3">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="rectangle2">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.2">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:3.2">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="rectangle3">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.4">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:3.4">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="rectangle4">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.6">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:3.6">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="rectangle5">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.8">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:3.8">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <Canvas Background="Black"   Name="BackCanvas">
        <Rectangle x:Name="rectangle1" Fill="Lime"   Height="2"   Canvas.Top="0"  Width="2" >
            <Rectangle.RenderTransform>
                <CompositeTransform/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="rectangle2" Fill="Lime" Height="2"   Canvas.Top="0"  Width="2" Visibility="Collapsed" >
            <Rectangle.RenderTransform>
                <CompositeTransform/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="rectangle3" Fill="Lime" Height="2" Canvas.Top="0"  Width="2" Visibility="Collapsed">
            <Rectangle.RenderTransform>
                <CompositeTransform/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="rectangle4" Fill="Lime" Height="2"  Canvas.Top="0"   Width="2" Visibility="Collapsed" >
            <Rectangle.RenderTransform>
                <CompositeTransform/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="rectangle5" Fill="Lime" Height="2"   Canvas.Top="0"  Width="2" Visibility="Collapsed" >
            <Rectangle.RenderTransform>
                <CompositeTransform/>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Canvas>
</UserControl>

接着是后台代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightApplication3
{
    public partial class WP7ProgressBar : UserControl
    {
        public WP7ProgressBar()
        {
            InitializeComponent();
        }

        public void Start()
        {
            this.Visibility = Visibility.Visible; 
            Move.Begin();
        }

        public void Stop()
        {
            this.Visibility = Visibility.Collapsed;
            Move.Stop();
        }

        public double MoveWidth
        {
            get { return (double)base.GetValue(MoveWidthProperty); }
            set { base.SetValue(MoveWidthProperty, value); }
        }

        public static DependencyProperty MoveWidthProperty = DependencyProperty.Register(
            "MoveWidth",
            typeof(double ),
            typeof(WP7ProgressBar),
            new PropertyMetadata(0.0, new PropertyChangedCallback(WP7ProgressBar.OnMoveWidthPropertyChanged)));

        private static void OnMoveWidthPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            try
            {
                WP7ProgressBar wp7ProgressBar =(d as WP7ProgressBar);
                wp7ProgressBar.SplineDoubleKeyFrame1.Value = (double)e.NewValue;
                wp7ProgressBar.SplineDoubleKeyFrame2.Value = (double)e.NewValue;
                wp7ProgressBar.SplineDoubleKeyFrame3.Value = (double)e.NewValue;
                wp7ProgressBar.SplineDoubleKeyFrame4.Value = (double)e.NewValue;
                wp7ProgressBar.SplineDoubleKeyFrame5.Value = (double)e.NewValue;
                wp7ProgressBar.Width = (double)e.NewValue;
            }
            catch (Exception ex)
            {
                string ks = ex.ToString();
            }
        }

        public new  Brush Background
        {
            get { return (Brush)base.GetValue(BackgroundProperty); }
            set { base.SetValue(BackgroundProperty, value); }
        }

        public new  static DependencyProperty BackgroundProperty = DependencyProperty.Register(
            "Background",
            typeof(Brush),
            typeof(WP7ProgressBar),
            new PropertyMetadata(new SolidColorBrush(Color.FromArgb(0, 0, 0, 0)), new PropertyChangedCallback(WP7ProgressBar.OnBackgroundPropertyChanged)));

        private static void OnBackgroundPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            try
            {
                WP7ProgressBar wp7ProgressBar = (d as WP7ProgressBar);
                wp7ProgressBar.BackCanvas.Background = (Brush)e.NewValue;
            }
            catch (Exception ex)
            {
                string ks = ex.ToString();
            }
        }

        public new Brush PointColor
        {
            get { return (Brush)base.GetValue(PointColorProperty); }
            set { base.SetValue(PointColorProperty, value); }
        }

        public new static DependencyProperty PointColorProperty = DependencyProperty.Register(
            "PointColor",
            typeof(Brush),
            typeof(WP7ProgressBar),
            new PropertyMetadata(new SolidColorBrush(Color.FromArgb(0, 0, 0, 0)), new PropertyChangedCallback(WP7ProgressBar.OnPointColorPropertyChanged)));

        private static void OnPointColorPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            try
            {
                WP7ProgressBar wp7ProgressBar = (d as WP7ProgressBar);
                wp7ProgressBar.rectangle1 .Fill = (Brush)e.NewValue;
                wp7ProgressBar.rectangle2.Fill = (Brush)e.NewValue;
                wp7ProgressBar.rectangle3.Fill = (Brush)e.NewValue;
                wp7ProgressBar.rectangle4.Fill = (Brush)e.NewValue;
                wp7ProgressBar.rectangle5.Fill = (Brush)e.NewValue;
            }
            catch (Exception ex)
            {
                string ks = ex.ToString();
            }
        }

    }
}

在Silverlight中声明属性感觉比较麻烦，大家有没有提高效率的方法，推荐推荐。