WPF 自訂優雅進度條控制項

預設進度條外觀

WPF 內建進度條外觀平庸，在 Windows Server 2003 上更顯難看。WPF 強大的樣式系統讓我們能建立任意外觀的進度指示器。

使用者控制項 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>

後端程式碼

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

在頁面中使用

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

注意：需在 XAML 根元素加入命名空間對應：xmlns:local="clr-namespace:YourNamespace"