WPF設計帶數字標簽顯示的進度條

先上圖

1.xaml代碼

<Style x:Key="ProgressBarStyle" TargetType="{x:Type ProgressBar}">
        <Setter Property="Foreground" Value="#FF06B025"/>
        <Setter Property="Background" Value="#FFE6E6E6"/>
        <Setter Property="BorderBrush" Value="#FFBCBCBC"/>
        <Setter Property="attach:AttachProperty.Percentage" Value=""></Setter>
        <Setter Property="Height" Value="35"/>
        <Setter Property="Width" Value="600"></Setter>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ProgressBar}">
                    <Grid x:Name="TemplateRoot">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Determinate"/>
                                <VisualState x:Name="Indeterminate">
                                    <Storyboard RepeatBehavior="Forever">
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Animation">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0.25"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.25"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.25"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="Animation">
                                            <EasingPointKeyFrame KeyTime="0" Value="-0.5,0.5"/>
                                            <EasingPointKeyFrame KeyTime="0:0:1" Value="0.5,0.5"/>
                                            <EasingPointKeyFrame KeyTime="0:0:2" Value="1.5,0.5"/>
                                        </PointAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border CornerRadius="18" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
                        <Rectangle RadiusX="18" RadiusY="18" x:Name="PART_Track"/>
                        <Grid x:Name="PART_Indicator" ClipToBounds="True" HorizontalAlignment="Left">
                            <Rectangle RadiusX="18" RadiusY="18" x:Name="Indicator" Fill="{TemplateBinding Foreground}"/>
                            <Label  FontSize="14" VerticalAlignment="Center" Content="{TemplateBinding attach:AttachProperty.Percentage}" HorizontalContentAlignment="Center" HorizontalAlignment="Right" VerticalContentAlignment="Center" Background="Transparent" Foreground="White" Panel.ZIndex="1" Margin="{Binding Margin, ElementName=Animation}"></Label>
                            <Rectangle RadiusX="18" RadiusY="18" x:Name="Animation" Fill="{TemplateBinding Foreground}" RenderTransformOrigin="0.5,0.5">
                                <Rectangle.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </Rectangle.RenderTransform>
                            </Rectangle>
                        </Grid>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Orientation" Value="Vertical">
                            <Setter Property="LayoutTransform" TargetName="TemplateRoot">
                                <Setter.Value>
                                    <RotateTransform Angle="-90"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsIndeterminate" Value="True">
                            <Setter Property="Visibility" TargetName="Indicator" Value="Collapsed"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

2.附加屬性

public static string GetPercentage(DependencyObject obj)
        {
            return (string)obj.GetValue(PercentageProperty);
        }

        public static void SetPercentage(DependencyObject obj, string value)
        {
            obj.SetValue(PercentageProperty, value);
        }
        //百分比展示
        // Using a DependencyProperty as the backing store for Percentage.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty PercentageProperty =
            DependencyProperty.RegisterAttached("Percentage", typeof(string), typeof(AttachProperty), new PropertyMetadata(""));

3.在設計器中使用

<ProgressBar Name="pro" Style="{StaticResource ProgressBarStyle}" ath:AttachProperty.Percentage="{Binding Percentage}" Height="35" Foreground="#ff2791ff" Background="#ffe5e9f0" Width="600" Value="0" Maximum="100"></ProgressBar>

4.邏輯代碼

private void Func(object obj)
        {
            for (int i = 0; i <= 100; i++)
            {
                this.pro.Dispatcher.Invoke(new Action(()=> {
                    StyleLibrary.Core.AttachProperty.SetPercentage(pro, i.ToString() + "%");
                    pro.Value = i;
                }));
                Thread.Sleep(100);
            }
        }

//調用
ThreadPool.QueueUserWorkItem(Func,null);

5.知識點：附加屬性；綁定；樣式；