繼續聊WPF——進度條

 

ProgressBar控制項與傳統WinForm使用方法完全一樣，我們只需關註：Minimum——最小值，預設為0；Maximum——最大值，預設為100.Value——當前值。 關鍵是它的控制項範本，因為系統的預設主題不好看，很多時候我們是需要自訂樣式和模板。老方法，先看定義：

[TemplatePartAttribute(Name = "PART_Track", Type = typeof(FrameworkElement))][TemplatePartAttribute(Name = "PART_Indicator", Type = typeof(FrameworkElement))]public class ProgressBar : RangeBase

 從類定義中看到，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>