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>