Compartir a través de


ProgressBar Styles and Templates

Microsoft Silverlight will reach end of support after October 2021. Learn more.

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.

ProgressBar Parts

The following table lists the named parts for the ProgressBar control.

Part

Type

Description

ProgressBarTrack

FrameworkElement

A FrameworkElement that displays a repeating pattern.

ProgressBarIndicator

FrameworkElement

A FrameworkElement that fills based on a value.

ProgressBar States

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.

Default Style and Template

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"
NoteNote:

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>