ProgressBar Styles and Templates
This topic describes the styles and templates for the ProgressBar control. You can modify the default ControlTemplate to give the control a unique appearance. For more information, see Customizing the Appearance of an Existing Control by Using a ControlTemplate.
The following table lists the named parts for the ProgressBar control.
|
Part |
Type |
Description |
|---|---|---|
|
ProgressBarTrack |
A FrameworkElement that displays a repeating pattern. |
|
|
ProgressBarIndicator |
A FrameworkElement that fills based on a value. |
The following table lists the visual states for the ProgressBar control.
|
VisualState Name |
VisualStateGroup Name |
Description |
|---|---|---|
|
Determinate |
CommonStates |
ProgressBar reports progress based on the Value property. |
|
Indeterminate |
CommonStates |
ProgressBar reports generic progress with a repeating pattern. |
The following shows the XML namespace mapping that you have to specify when you work with styles and templates.
<!-- XML Namespace mapping. --> xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
 Note: |
|---|
The default templates still specify the vsm: XML namespace mapping for the VisualStateManager element for legacy reasons. You can however, use the VisualStateManager element without specifying the vsm: mapping. |
The following XAML shows the default style and template for the ProgressBar control.
<Style TargetType="ProgressBar"> <Setter Property="Foreground" Value="#FF027DB8"/> <Setter Property="Background" Value="#FFD2D5D8" /> <Setter Property="BorderThickness" Value="1"/> <Setter Property="Maximum" Value="100" /> <Setter Property="IsTabStop" Value="False"/> <Setter Property="BorderBrush"> <Setter.Value> <LinearGradientBrush EndPoint=".5,1" StartPoint=".5,0"> <GradientStop Color="#FFAEB7BF" Offset="0"/> <GradientStop Color="#FF919EA7" Offset="0.35"/> <GradientStop Color="#FF7A8A99" Offset="0.35"/> <GradientStop Color="#FF647480" Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ProgressBar"> <Grid x:Name="Root"> <vsm:VisualStateManager.VisualStateGroups> <vsm:VisualStateGroup x:Name="CommonStates"> <vsm:VisualState x:Name="Determinate"/> <vsm:VisualState x:Name="Indeterminate"> <Storyboard RepeatBehavior="Forever"> <DoubleAnimation Storyboard.TargetName="IndeterminateGradientFill" Storyboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.Transform).(TransformGroup.Children)[0].X" Duration="00:00:.5" From="0" To="20" /> <ObjectAnimationUsingKeyFrames Duration="00:00:00" Storyboard.TargetName="IndeterminateRoot" Storyboard.TargetProperty="(UIElement.Visibility)"> <DiscreteObjectKeyFrame KeyTime="00:00:00"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Duration="00:00:00" Storyboard.TargetName="DeterminateRoot" Storyboard.TargetProperty="(UIElement.Visibility)"> <DiscreteObjectKeyFrame KeyTime="00:00:00"> <DiscreteObjectKeyFrame.Value> <Visibility>Collapsed</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> </vsm:VisualStateGroup> </vsm:VisualStateManager.VisualStateGroups> <!--Default Root Visuals for either type of ProgressBar--> <Border Name="ProgressBarTrack" CornerRadius="3" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" /> <Grid x:Name="ProgressBarRootGrid" > <!-- Beginning of Gradient over all visuals --> <Rectangle Canvas.ZIndex="1" x:Name="ProgressBarRootGradient" StrokeThickness="1" Margin="{TemplateBinding BorderThickness}" Stroke="#FFFFFFFF" RadiusX="1.5" RadiusY="1.5"> <Rectangle.Fill> <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1"> <GradientStop Color="#B2FFFFFF" Offset="0" /> <GradientStop Color="#C6FFFFFF" Offset="0.15"/> <GradientStop Color="#D1FFFFFF" Offset="0.275" /> <GradientStop Color="#C6FFFFFF" Offset="0.4"/> <GradientStop Color="#BFFFFFFF" Offset="0.65" /> <GradientStop Color="#A5FFFFFF" Offset="0.75"/> <GradientStop Color="#91FFFFFF" Offset="0.85"/> <GradientStop Color="#72FFFFFF" Offset="1" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <!-- Beginning of Indeterminate Progress Bar Visuals--> <Grid x:Name="IndeterminateRoot" Visibility="Collapsed"> <Rectangle x:Name="IndeterminateSolidFill" Stroke="#FF448DCA" RadiusX="2" RadiusY="2" StrokeThickness="0" Margin="{TemplateBinding BorderThickness}" Fill="{TemplateBinding Foreground}" Opacity="1" RenderTransformOrigin="0.5,0.5" /> <Rectangle x:Name="IndeterminateGradientFill" RadiusX="2" RadiusY="2" StrokeThickness="1" Margin="{TemplateBinding BorderThickness}" Opacity="0.7" > <Rectangle.Fill> <LinearGradientBrush SpreadMethod="Repeat" MappingMode="Absolute" EndPoint="0,1" StartPoint="20,1"> <LinearGradientBrush.Transform > <TransformGroup> <TranslateTransform X="0" /> <SkewTransform AngleX="-30" /> </TransformGroup> </LinearGradientBrush.Transform> <GradientStop Color="#FFFFFFFF" Offset="0"/> <GradientStop Color="#00FFFFFF" Offset=".25"/> <GradientStop Color="#FFFFFFFF" Offset="0.85"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> </Grid> <!-- Beginning of Determinate Progress Bar Visuals--> <Grid x:Name="DeterminateRoot" Margin="1" > <!--Background --> <Rectangle HorizontalAlignment="Left" x:Name="ProgressBarIndicator" Margin="{TemplateBinding BorderThickness}" StrokeThickness="0.5" RadiusX="1.5" RadiusY="1.5" Fill="{TemplateBinding Foreground}"/> </Grid> </Grid> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
