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.