WPF中自定义漂亮的进度条

wpf中自带的进度条是这个样子德。

 

在2003中这个进度条的样子就会变得非常难看。

在wpf中您可以自己制作任意样式的进度条。如下图：

 

UserControl.xaml

 

    <Grid x:Name="LayoutRoot" Background="Transparent" 
              HorizontalAlignment="Center" VerticalAlignment="Center">

        <Grid.RenderTransform>

            <ScaleTransform x:Name="SpinnerScale" 
                                ScaleX="1.0" ScaleY="1.0" />

        </Grid.RenderTransform>

        <Canvas RenderTransformOrigin="0.5,0.5" 
                    HorizontalAlignment="Center" 
                    VerticalAlignment="Center" 
                    Width="120" Height="120" >

            <Ellipse Width="21.835" Height="21.862" 
                         Canvas.Left="20.1696" 
                         Canvas.Top="9.76358" 
                         Stretch="Fill" Fill="Orange" 
                         Opacity="1.0"/>

            <Ellipse Width="21.835" Height="21.862" 
                         Canvas.Left="2.86816" 
                         Canvas.Top="29.9581" Stretch="Fill" 
                         Fill="Black" Opacity="0.9"/>

            <Ellipse Width="21.835" Height="21.862" 
                         Canvas.Left="5.03758e-006" 
                         Canvas.Top="57.9341" Stretch="Fill" 
                         Fill="Black" Opacity="0.8"/>

            <Ellipse Width="21.835" Height="21.862" 
                         Canvas.Left="12.1203" 
                         Canvas.Top="83.3163" Stretch="Fill" 
                         Fill="Black" Opacity="0.7"/>

            <Ellipse Width="21.835" Height="21.862" 
                         Canvas.Left="36.5459" 
                         Canvas.Top="98.138" Stretch="Fill" 
                         Fill="Black" Opacity="0.6"/>

            <Ellipse Width="21.835" Height="21.862" 
                         Canvas.Left="64.6723" 
                         Canvas.Top="96.8411" Stretch="Fill" 
                         Fill="Black" Opacity="0.5"/>

            <Ellipse Width="21.835" Height="21.862" 
                         Canvas.Left="87.6176" 
                         Canvas.Top="81.2783" Stretch="Fill" 
                         Fill="Black" Opacity="0.4"/>

            <Ellipse Width="21.835" Height="21.862" 
                         Canvas.Left="98.165" 
                         Canvas.Top="54.414" Stretch="Fill" 
                         Fill="Black" Opacity="0.3"/>

            <Ellipse Width="21.835" Height="21.862" 
                         Canvas.Left="92.9838" 
                         Canvas.Top="26.9938" Stretch="Fill" 
                         Fill="Black" Opacity="0.2"/>

            <Ellipse Width="21.835" Height="21.862" 
                         Canvas.Left="47.2783" 
                         Canvas.Top="0.5" Stretch="Fill" 
                         Fill="Black" Opacity="0.1"/>

            <Canvas.RenderTransform>

                <RotateTransform x:Name="SpinnerRotate" 
                                     Angle="0" />

            </Canvas.RenderTransform>

            <Canvas.Triggers>

                <EventTrigger RoutedEvent="ContentControl.Loaded">

                    <BeginStoryboard>

                        <Storyboard>

                            <DoubleAnimation 
                                    Storyboard.TargetName
                                        ="SpinnerRotate" 
                                     Storyboard.TargetProperty
                                        ="(RotateTransform.Angle)" 
                                     From="0" To="360" 
                                     Duration="0:0:01" 
                                     RepeatBehavior="Forever" />

                        </Storyboard>

                    </BeginStoryboard>

                </EventTrigger>

            </Canvas.Triggers>

        </Canvas>

    </Grid>

 

 

UserControl.xaml.cs

 

        public UserControl1()
        {
            InitializeComponent();

            Timeline.DesiredFrameRateProperty.OverrideMetadata(
                       typeof(Timeline),
                           new FrameworkPropertyMetadata { DefaultValue = 20 });
        }

 

 

程序中添加对此用户控件的命名空间

    <Grid>
        <local:UserControl1></local:UserControl1>
    </Grid>