一、前言

滾動條一般用於載入進度，我們在看視訊的時候或者在瀏覽網頁的時候經常能看到載入進度的頁面。在程式開發中，預設的進度載入樣式可能跟程式風格不太一樣，或者載入進度的時候需要更改一下載入的樣式。這個時候就需要通過修改ProgressBar的樣式來實現。

二、ProgressBar的基本樣式

ProgressBar的基本樣式很簡單：

  <Style TargetType="{x:Type ProgressBar}">
            <Setter Property="FocusVisualStyle"
 
 Value="{x:Null}"/>
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="Height" Value="15"/>
            <Setter Property="Background" Value="#6fae5f"/>
            <Setter Property="FontSize" Value="10"/>
            <Setter Property
 
="Padding" Value="5,0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ProgressBar}">
                        <Grid Background="#00000000">
                            <Grid.RowDefinitions>
 

                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Determinate"/>
                                    <VisualState x:Name="Indeterminate">
                                        <Storyboard RepeatBehavior="Forever">
                                            <PointAnimationUsingKeyFrames Storyboard.TargetName="Animation" Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)">
                                                <EasingPointKeyFrame KeyTime="0:0:0" Value="0.5,0.5"/>
                                                <EasingPointKeyFrame KeyTime="0:0:1.5" Value="1.95,0.5"/>
                                                <EasingPointKeyFrame KeyTime="0:0:3" Value="0.5,0.5"/>
                                            </PointAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                           
                            <Grid Height="{TemplateBinding Height}">
                                <Border Background="#000000" CornerRadius="7.5" Opacity="0.05"/>
                                <Border BorderBrush="#000000" BorderThickness="1" CornerRadius="7.5" Opacity="0.1"/>
                                <Grid Margin="{TemplateBinding BorderThickness}">
                                    <Border x:Name="PART_Track"/>
                                    <Grid x:Name="PART_Indicator" ClipToBounds="True" HorizontalAlignment="Left" >
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition x:Name="width1"/>
                                            <ColumnDefinition x:Name="width2" Width="0"/>
                                        </Grid.ColumnDefinitions>
                                        <Grid x:Name="Animation"  RenderTransformOrigin="0.5,0.5">
                                            <Grid.RenderTransform>
                                                <TransformGroup>
                                                    <ScaleTransform ScaleY="-1" ScaleX="1"/>
                                                    <SkewTransform AngleY="0" AngleX="0"/>
                                                    <RotateTransform Angle="180"/>
                                                    <TranslateTransform/>
                                                </TransformGroup>
                                            </Grid.RenderTransform>
                                            <Border Background="{TemplateBinding Background}" CornerRadius="7.5">
                                                <Viewbox HorizontalAlignment="Left" StretchDirection="DownOnly" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="True">
                                                    <TextBlock Foreground="#ffffff" SnapsToDevicePixels="True" FontSize="{TemplateBinding FontSize}" VerticalAlignment="Center" Text="{Binding RelativeSource={RelativeSource TemplatedParent},Path=Value,StringFormat={}{0}%}" RenderTransformOrigin="0.5,0.5">
                                                        <TextBlock.RenderTransform>
                                                            <TransformGroup>
                                                                <ScaleTransform ScaleY="1" ScaleX="-1"/>
                                                                <SkewTransform AngleY="0" AngleX="0"/>
                                                                <RotateTransform Angle="0"/>
                                                                <TranslateTransform/>
                                                            </TransformGroup>
                                                        </TextBlock.RenderTransform>
                                                    </TextBlock>
                                                </Viewbox>
                                            </Border>
                                            <Border BorderBrush="#000000" BorderThickness="1" CornerRadius="7.5" Opacity="0.1"/>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                        <ControlTemplate.Triggers>
                            
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Background" Value="#c5c5c5"/>
                            </Trigger>
                            <Trigger Property="IsIndeterminate" Value="true">
                                <Setter TargetName="width1" Property="Width" Value="0.25*"/>
                                <Setter TargetName="width2" Property="Width" Value="0.725*"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

引用示例：

<ProgressBar Height="15" Width="150" Value="40" Margin="10"/>

顯示效果：

所有程式碼已經上傳到github：https://github.com/cmfGit/WpfDemo.git