WPF进度条系列①滑动小圆点

 写在之前：

关于WPF的样式，我也是学习了很多朋友的文章才有了下面的东西，因为时间有些久远 & 备份的链接也都不在了。

所以，究竟是看过哪些文章，也是记不清楚了……

请见谅。

--------------------------------我是害羞的分割线-----------------------------------

先看一下效果吧……

主要是xaml，因为ProssBar基本上市公用的，所以封装成一个控件：

<UserControl x:Class="AppHost.ProBar"
             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="20" d:DesignWidth="500" Background="Transparent">
    <UserControl.Resources>
        <Storyboard x:Key="StoryLeftToRight" RepeatBehavior="Forever">
            <ThicknessAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="e1" Storyboard.TargetProperty="(FrameworkElement.Margin)">
                <SplineThicknessKeyFrame KeyTime="00:00:00" Value="30,0,0,0"/>
                <SplineThicknessKeyFrame KeyTime="00:00:00.6" Value="225,0,0,0"/>
                <SplineThicknessKeyFrame KeyTime="00:00:03.1" Value="275,0,0,0"/>
                <SplineThicknessKeyFrame KeyTime="00:00:03.7" Value="500,0,0,0"/>
            </ThicknessAnimationUsingKeyFrames>
            <ThicknessAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="e2" Storyboard.TargetProperty="(FrameworkElement.Margin)">
                <SplineThicknessKeyFrame KeyTime="00:00:00.5" Value="20,0,0,0"/>
                <SplineThicknessKeyFrame KeyTime="00:00:01.1" Value="225,0,0,0"/>
                <SplineThicknessKeyFrame KeyTime="00:00:03.6" Value="275,0,0,0"/>
                <SplineThicknessKeyFrame KeyTime="00:00:04.2" Value="490,0,0,0"/>
            </ThicknessAnimationUsingKeyFrames>
            <ThicknessAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="e3" Storyboard.TargetProperty="(FrameworkElement.Margin)">
                <SplineThicknessKeyFrame KeyTime="00:00:01.0" Value="10,0,0,0"/>
                <SplineThicknessKeyFrame KeyTime="00:00:01.6" Value="225,0,0,0"/>
                <SplineThicknessKeyFrame KeyTime="00:00:04.1" Value="275,0,0,0"/>
                <SplineThicknessKeyFrame KeyTime="00:00:04.7" Value="480,0,0,0"/>
            </ThicknessAnimationUsingKeyFrames>
            <ThicknessAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="e4" Storyboard.TargetProperty="(FrameworkElement.Margin)">
                <SplineThicknessKeyFrame KeyTime="00:00:01.5" Value="0,0,0,0"/>
                <SplineThicknessKeyFrame KeyTime="00:00:02.1" Value="225,0,0,0"/>
                <SplineThicknessKeyFrame KeyTime="00:00:04.5" Value="275,0,0,0"/>
                <SplineThicknessKeyFrame KeyTime="00:00:05.2" Value="470,0,0,0"/>
            </ThicknessAnimationUsingKeyFrames>
        </Storyboard>
        <Style x:Key="EllipseLeftStyle" TargetType="Ellipse">
            <Setter Property="Width" Value="4"/>
            <Setter Property="Height" Value="4"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="Fill" Value="#FF2CB6E7"/>
        </Style>
    </UserControl.Resources>
    <UserControl.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource StoryLeftToRight}"/>
        </EventTrigger>
    </UserControl.Triggers>
    <Grid>
        <Ellipse Style="{StaticResource EllipseLeftStyle}" Margin="30,0,0,0" Name="e1"/>
        <Ellipse Style="{StaticResource EllipseLeftStyle}" Margin="20,0,0,0" Name="e2"/>
        <Ellipse Style="{StaticResource EllipseLeftStyle}" Margin="10,0,0,0" Name="e3"/>
        <Ellipse Style="{StaticResource EllipseLeftStyle}" Margin="0,0,0,0" Name="e4"/>
    </Grid>
</UserControl>

在使用中的时候直接在 xaml中写：

<local:ProBar x:Name="proBar"  HorizontalAlignment="Center"  VerticalAlignment="Center" Width="507"/>

local是Probar所在NameSpacce.