WPF進度條 - smiler－IT工程師數位筆記本

文章出處

ProgressBar控件與傳統WinForm使用方法完全一樣，我們只需關注：

Minimum——最小值，默認為0；

Maximum——最大值，默認為100.

Value——當前值。

關鍵是它的控件模板，因為系統的默認主題不好看，很多時候我們是需要自定義樣式和模板。

老方法，先看定義：

[csharp] view plain copy print ?

<span style="font-size:16px;">[TemplatePartAttribute(Name = "PART_Track", Type = typeof(FrameworkElement))]
[TemplatePartAttribute(Name = "PART_Indicator", Type = typeof(FrameworkElement))]
public class ProgressBar : RangeBase
</span>

從類定義中看到，ProgressBar控件的模板有兩個部分，我們在定義模板的時候用什么都可以，上面的定義指定是FrameworkElement，因此，只要是繼承自FrameworkElement的都可以作為模板的一部分，重點是Name屬性一定要和每個部分的名稱對應，也就是說你定義的模板部件必須為PART_Track和PART_Indicator.

PART_Indicator是進度條增加指示的形狀，即我們看到在滑動的部分；

PART_Track就是后面的背景層，也就是不動的那部分。

明白了這點就好辦了。

 <LinearGradientBrush x:Key="g1" StartPoint="0,0" EndPoint="1,1">
  <GradientStop Color="Orange" Offset="0"/>
  <GradientStop Color="Yellow" Offset="0.5"/>
  <GradientStop Color="Orange" Offset="1"/>
 </LinearGradientBrush>
 <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控件

 <ProgressBar x:Name="progressBar" Margin="173,113.5,178.187,137"  OverridesDefaultStyle="True" RenderTransformOrigin="0.5,0.5" Value="55">  
   <ProgressBar.RenderTransform>  
    <TransformGroup>  
     <ScaleTransform/>  
     <SkewTransform/>  
     <RotateTransform/>  
     <TranslateTransform/>  
    </TransformGroup>  
   </ProgressBar.RenderTransform>  
   <ProgressBar.Foreground>  
    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">  
     <GradientStop Color="#FF24EE27" Offset="0"/>  
     <GradientStop Color="#FF5434AC" Offset="0.5"/>  
     <GradientStop Color="#FFB371EA" Offset="1"/>  
    </LinearGradientBrush>  
   </ProgressBar.Foreground>  
  </ProgressBar>