关于对ProgressBar定义模板的一些总结

      在之前的博客中曾经写到了一篇关于如何定义圆形进度条的文章，今天就ProgressBar再来进行一些总结，首先来介绍一下ProgressBar的结构，ProgressBar控件的模板有两个部分，我们在定义模板的时候用什么都可以，上面的定义指定是FrameworkElement，因此，只要是继承自FrameworkElement的都可以作为模板的一部分，重点是Name属性一定要和每个部分的名称对应，也就是说你定义的模板部件必须为PART_Track和PART_Indicator.PART_Indicator是进度条增加指示的形状，即我们看到在滑动的部分；PART_Track就是后面的背景层，也就是不动的那部分。所以我们修改WPF自定义的模板的时候关键是修改PART_Track和PART_Indicator.PART_Indicator这两个部分，下面看一下msdn对ProgressBar的一些介绍：

    首先看一下ProgressBar的继承关系：

　　 System.Object
          System.Windows.Threading.DispatcherObject
              System.Windows.DependencyObject
                  System.Windows.Media.Visual
                      System.Windows.UIElement
                          System.Windows.FrameworkElement
                              System.Windows.Controls.Control
                                 System.Windows.Controls.Primitives.RangeBase
                                      System.Windows.Controls.ProgressBar

     然后再看一下ProgressBar关于模板的定义 

  [TemplatePartAttribute(Name = "PART_Track", Type = typeof(FrameworkElement))]
  [TemplatePartAttribute(Name = "PART_Indicator", Type = typeof(FrameworkElement))]
  [TemplatePartAttribute(Name = "PART_GlowRect", Type = typeof(FrameworkElement))]
  public class ProgressBar : RangeBase
  在了解到这些以后，我们就可以修改自定义自己的模板和样式了。
  下面列举一个简单的模板和样式，

                                          <ProgressBar x:Name="Progress" Value="{Binding TaskEntity.Progress}" IsIndeterminate="{Binding TaskEntity.IsInde                                               terminate}">
                                                <ProgressBar.Template>
                                                    <ControlTemplate TargetType="ProgressBar">
                                                        <Border Background="Transparent" x:Name="Container">
                                                            <Grid >
                                                                <Rectangle Fill="#fff" Name="PART_Track"></Rectangle>
                                                                <Rectangle Fill="#bbb" Name="PART_Indicator" HorizontalAlignment="Left"></Rectangle>
                                                            </Grid>
                                                        </Border>
                                                        <ControlTemplate.Triggers>
                                                            <Trigger Property="IsIndeterminate" Value="true">
                                                                <Setter Property="Visibility" Value="Hidden" TargetName="Container"></Setter>
                                                            </Trigger>
                                                        </ControlTemplate.Triggers>
                                                     </ControlTemplate>
                                                </ProgressBar.Template>
                                            </ProgressBar>

　　在上面的定义中必须要注意，定义两个Rectangle的时候，必须添加 Name="PART_Track"和 Name="PART_Indicator"这两个属性，否则是不能够识别的，另外这里还举出另外一个样式：

<Style  
     TargetType="{x:Type ProgressBar}">  
  <Setter Property="Template">  
    <Setter.Value>  
      <ControlTemplate TargetType="{x:Type ProgressBar}">  
        <Grid MinHeight="14" MinWidth="200">  
          <Border  Name="PART_Track" CornerRadius="20"  BorderBrush="Black"  BorderThickness="1" Background="#FF57C7C9"/>  
          <Border  x:Name="PART_Indicator" CornerRadius="16" BorderBrush="Red" BorderThickness="1" HorizontalAlignment="Left" >  
           <Border.Background>  
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">  
             <GradientStop Color="Orange" Offset="0"/>  
             <GradientStop Color="Yellow" Offset="0.5"/>  
             <GradientStop Color="Orange" Offset="1"/>  
            </LinearGradientBrush>  
           </Border.Background>  
          </Border>  
        </Grid>  
      </ControlTemplate>  
    </Setter.Value>  
  </Setter>  
</Style>  

　　下面我们来看一下，默认的ProgressBar的模板及样式，下面举例进行说明。 

<LinearGradientBrush x:Key="ProgressBarBackground" EndPoint="1,0" StartPoint="0,0">
            <GradientStop Color="#BABABA" Offset="0"/>
            <GradientStop Color="#C7C7C7" Offset="0.5"/>
            <GradientStop Color="#BABABA" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ProgressBarBorderBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#B2B2B2" Offset="0"/>
            <GradientStop Color="#8C8C8C" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ProgressBarGlassyHighlight" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#50FFFFFF" Offset="0.5385"/>
            <GradientStop Color="#00FFFFFF" Offset="0.5385"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ProgressBarTopHighlight" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#80FFFFFF" Offset="0.05"/>
            <GradientStop Color="#00FFFFFF" Offset="0.25"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill" EndPoint="1,0" StartPoint="0,0">
            <GradientStop Color="#00FFFFFF" Offset="0"/>
            <GradientStop Color="#60FFFFFF" Offset="0.4"/>
            <GradientStop Color="#60FFFFFF" Offset="0.6"/>
            <GradientStop Color="#00FFFFFF" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ProgressBarIndicatorDarkEdgeLeft" EndPoint="1,0" StartPoint="0,0">
            <GradientStop Color="#0C000000" Offset="0"/>
            <GradientStop Color="#20000000" Offset="0.3"/>
            <GradientStop Color="#00000000" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ProgressBarIndicatorDarkEdgeRight" EndPoint="1,0" StartPoint="0,0">
            <GradientStop Color="#00000000" Offset="0"/>
            <GradientStop Color="#20000000" Offset="0.7"/>
            <GradientStop Color="#0C000000" Offset="1"/>
        </LinearGradientBrush>
        <RadialGradientBrush x:Key="ProgressBarIndicatorLightingEffectLeft" RadiusY="1" RadiusX="1" RelativeTransform="1,0,0,1,0.5,0.5">
            <GradientStop Color="#60FFFFC4" Offset="0"/>
            <GradientStop Color="#00FFFFC4" Offset="1"/>
        </RadialGradientBrush>
        <LinearGradientBrush x:Key="ProgressBarIndicatorLightingEffect" EndPoint="0,0" StartPoint="0,1">
            <GradientStop Color="#60FFFFC4" Offset="0"/>
            <GradientStop Color="#00FFFFC4" Offset="1"/>
        </LinearGradientBrush>
        <RadialGradientBrush x:Key="ProgressBarIndicatorLightingEffectRight" RadiusY="1" RadiusX="1" RelativeTransform="1,0,0,1,-0.5,0.5">
            <GradientStop Color="#60FFFFC4" Offset="0"/>
            <GradientStop Color="#00FFFFC4" Offset="1"/>
        </RadialGradientBrush>
        <LinearGradientBrush x:Key="ProgressBarIndicatorGlassyHighlight" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#90FFFFFF" Offset="0.5385"/>
            <GradientStop Color="#00FFFFFF" Offset="0.5385"/>
        </LinearGradientBrush>
        <Style x:Key="ProgressBarStyle1" TargetType="{x:Type ProgressBar}">
            <Setter Property="Foreground" Value="#01D328"/>
            <Setter Property="Background" Value="{StaticResource ProgressBarBackground}"/>
            <Setter Property="BorderBrush" Value="{StaticResource ProgressBarBorderBrush}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ProgressBar}">
                        <Grid x:Name="TemplateRoot" SnapsToDevicePixels="true">
                            <Rectangle Fill="{TemplateBinding Background}" RadiusY="2" RadiusX="2"/>
                            <Border Background="{StaticResource ProgressBarGlassyHighlight}" CornerRadius="2" Margin="1"/>
                            <Border BorderBrush="#80FFFFFF" BorderThickness="1,0,1,1" Background="{StaticResource ProgressBarTopHighlight}" Margin="1"/>
                            <Rectangle x:Name="PART_Track" Margin="1"/>
                            <Decorator x:Name="PART_Indicator" HorizontalAlignment="Left" Margin="1">
                                <Grid x:Name="Foreground">
                                    <Rectangle x:Name="Indicator" Fill="{TemplateBinding Foreground}"/>
                                    <Grid x:Name="Animation" ClipToBounds="true">
                                        <Rectangle x:Name="PART_GlowRect" Fill="{StaticResource ProgressBarIndicatorAnimatedFill}" HorizontalAlignment="Left" Margin="-100,0,0,0" Width="100"/>
                                    </Grid>
                                    <Grid x:Name="Overlay">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition MaxWidth="15"/>
                                            <ColumnDefinition Width="0.1*"/>
                                            <ColumnDefinition MaxWidth="15"/>
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition/>
                                            <RowDefinition/>
                                        </Grid.RowDefinitions>
                                        <Rectangle x:Name="LeftDark" Fill="{StaticResource ProgressBarIndicatorDarkEdgeLeft}" Margin="1,1,0,1" RadiusY="1" RadiusX="1" Grid.RowSpan="2"/>
                                        <Rectangle x:Name="RightDark" Grid.Column="2" Fill="{StaticResource ProgressBarIndicatorDarkEdgeRight}" Margin="0,1,1,1" RadiusY="1" RadiusX="1" Grid.RowSpan="2"/>
                                        <Rectangle x:Name="LeftLight" Grid.Column="0" Fill="{StaticResource ProgressBarIndicatorLightingEffectLeft}" Grid.Row="2"/>
                                        <Rectangle x:Name="CenterLight" Grid.Column="1" Fill="{StaticResource ProgressBarIndicatorLightingEffect}" Grid.Row="2"/>
                                        <Rectangle x:Name="RightLight" Grid.Column="2" Fill="{StaticResource ProgressBarIndicatorLightingEffectRight}" Grid.Row="2"/>
                                        <Border x:Name="Highlight1" Background="{StaticResource ProgressBarIndicatorGlassyHighlight}" Grid.ColumnSpan="3" Grid.RowSpan="2"/>
                                        <Border x:Name="Highlight2" Background="{StaticResource ProgressBarTopHighlight}" Grid.ColumnSpan="3" Grid.RowSpan="2"/>
                                    </Grid>
                                </Grid>
                            </Decorator>
                            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
                        </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="LeftDark" Value="Collapsed"/>
                                <Setter Property="Visibility" TargetName="RightDark" Value="Collapsed"/>
                                <Setter Property="Visibility" TargetName="LeftLight" Value="Collapsed"/>
                                <Setter Property="Visibility" TargetName="CenterLight" Value="Collapsed"/>
                                <Setter Property="Visibility" TargetName="RightLight" Value="Collapsed"/>
                                <Setter Property="Visibility" TargetName="Indicator" Value="Collapsed"/>
                            </Trigger>
                            <Trigger Property="IsIndeterminate" Value="false">
                                <Setter Property="Background" TargetName="Animation" Value="#80B5FFA9"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>