WPF progressbar style is blocky?

Question

I'm using an indeterminate progressbar in my application and I get this bad animation of a series of blocks running horizontally. Isn't there a better style available like vista or windows 7?

score 20 · Accepted Answer · answered Jan 27 '11 at 10:39

Your progress bar has a style that corresponds to your current windows theme. If you run your application on Windows 7 with an Aero theme your progress bar will look accordingly.

If you want it to look always the same (no matter what windows theme is selected) you will need to define your own style for the progress bar.

Here is the style from the Aero Normal Color theme:

<LinearGradientBrush x:Key="ProgressBarBorderBrush"
                     EndPoint="0,1"
                     StartPoint="0,0">
    <LinearGradientBrush.GradientStops>
        <GradientStop Color="#B2B2B2"
                      Offset="0"/>
        <GradientStop Color="#8C8C8C"
                      Offset="1"/>
    </LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ProgressBarBackground"
                     EndPoint="1,0"
                     StartPoint="0,0">
    <LinearGradientBrush.GradientStops>
        <GradientStop Color="#BABABA"
                      Offset="0"/>
        <GradientStop Color="#C7C7C7"
                      Offset="0.5"/>
        <GradientStop Color="#BABABA"
                      Offset="1"/>
    </LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ProgressBarTopHighlight"
                     StartPoint="0,0"
                     EndPoint="0,1">
    <LinearGradientBrush.GradientStops>
        <GradientStop Color="#80FFFFFF"
                      Offset="0.05"/>
        <GradientStop Color="#00FFFFFF"
                      Offset="0.25"/>
    </LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ProgressBarGlassyHighlight"
                     StartPoint="0,0"
                     EndPoint="0,1">
    <LinearGradientBrush.GradientStops>
        <GradientStop Color="#50FFFFFF"
                      Offset="0.5385"/>
        <GradientStop Color="#00FFFFFF"
                      Offset="0.5385"/>
    </LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ProgressBarIndicatorGlassyHighlight"
                     StartPoint="0,0"
                     EndPoint="0,1">
    <LinearGradientBrush.GradientStops>
        <GradientStop Color="#90FFFFFF"
                      Offset="0.5385"/>
        <GradientStop Color="#00FFFFFF"
                      Offset="0.5385"/>
    </LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<RadialGradientBrush x:Key="ProgressBarIndicatorLightingEffectLeft"
                     RadiusX="1"
                     RadiusY="1"
                     RelativeTransform="1,0,0,1,0.5,0.5">
    <RadialGradientBrush.GradientStops>
        <GradientStop Color="#60FFFFC4"
                      Offset="0"/>
        <GradientStop Color="#00FFFFC4"
                      Offset="1"/>
    </RadialGradientBrush.GradientStops>
</RadialGradientBrush>
<LinearGradientBrush x:Key="ProgressBarIndicatorLightingEffect"
                     StartPoint="0,1"
                     EndPoint="0,0">
    <LinearGradientBrush.GradientStops>
        <GradientStop Color="#60FFFFC4"
                      Offset="0"/>
        <GradientStop Color="#00FFFFC4"
                      Offset="1"/>
    </LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<RadialGradientBrush x:Key="ProgressBarIndicatorLightingEffectRight"
                     RadiusX="1"
                     RadiusY="1"
                     RelativeTransform="1,0,0,1,-0.5,0.5">
    <RadialGradientBrush.GradientStops>
        <GradientStop Color="#60FFFFC4"
                      Offset="0"/>
        <GradientStop Color="#00FFFFC4"
                      Offset="1"/>
    </RadialGradientBrush.GradientStops>
</RadialGradientBrush>

<LinearGradientBrush x:Key="ProgressBarIndicatorDarkEdgeLeft"
                     StartPoint="0,0"
                     EndPoint="1,0">
    <LinearGradientBrush.GradientStops>
        <GradientStop Color="#0C000000"
                      Offset="0"/>
        <GradientStop Color="#20000000"
                      Offset="0.3"/>
        <GradientStop Color="#00000000"
                      Offset="1"/>
    </LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ProgressBarIndicatorDarkEdgeRight"
                     StartPoint="0,0"
                     EndPoint="1,0">
    <LinearGradientBrush.GradientStops>
        <GradientStop Color="#00000000"
                      Offset="0"/>
        <GradientStop Color="#20000000"
                      Offset="0.7"/>
        <GradientStop Color="#0C000000"
                      Offset="1"/>
    </LinearGradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill" 
                     StartPoint="0,0"
                     EndPoint="1,0">
    <LinearGradientBrush.GradientStops>
        <GradientStop Color="#00FFFFFF"
                      Offset="0"/>
        <GradientStop Color="#60FFFFFF"
                      Offset="0.4"/>
        <GradientStop Color="#60FFFFFF"
                      Offset="0.6"/>
        <GradientStop Color="#00FFFFFF"
                      Offset="1"/>
    </LinearGradientBrush.GradientStops>
</LinearGradientBrush>

<Style x:Key="{x:Type ProgressBar}"
       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 Name="TemplateRoot"
                      SnapsToDevicePixels="true">
                    <Rectangle Fill="{TemplateBinding Background}"
                               RadiusX="2"
                               RadiusY="2"/>
                    <Border Background="{StaticResource ProgressBarGlassyHighlight}"
                            Margin="1"
                            CornerRadius="2"/>
                    <Border BorderBrush="#80FFFFFF"
                            Background="{StaticResource ProgressBarTopHighlight}"
                            BorderThickness="1,0,1,1"
                            Margin="1"/>
                    <Rectangle Name="PART_Track"
                               Margin="1"/>

                    <Decorator x:Name="PART_Indicator"
                               HorizontalAlignment="Left"
                               Margin="1">
                        <Grid Name="Foreground">
                            <Rectangle x:Name="Indicator"
                                       Fill="{TemplateBinding Foreground}"/>
                            <Grid x:Name="Animation" ClipToBounds="true">
                                <Rectangle x:Name="PART_GlowRect" Width="100" 
                                            Fill="{StaticResource ProgressBarIndicatorAnimatedFill}"
                                            Margin="-100,0,0,0"
                                            HorizontalAlignment="Left">
                                </Rectangle>
                            </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"
                                           Grid.RowSpan="2"
                                           Fill="{StaticResource ProgressBarIndicatorDarkEdgeLeft}"
                                           RadiusX="1"
                                           RadiusY="1"
                                           Margin="1,1,0,1"/>
                                <Rectangle x:Name="RightDark"
                                           Grid.RowSpan="2"
                                           Grid.Column="2"
                                           RadiusX="1"
                                           RadiusY="1"
                                           Fill="{StaticResource ProgressBarIndicatorDarkEdgeRight}"
                                           Margin="0,1,1,1"/>
                                <Rectangle x:Name="LeftLight"
                                           Grid.Column="0"
                                           Grid.Row="2"
                                           Fill="{StaticResource ProgressBarIndicatorLightingEffectLeft}"/>
                                <Rectangle x:Name="CenterLight"
                                           Grid.Column="1"
                                           Grid.Row="2"
                                           Fill="{StaticResource ProgressBarIndicatorLightingEffect}"/>
                                <Rectangle x:Name="RightLight"
                                           Grid.Column="2"
                                           Grid.Row="2"
                                           Fill="{StaticResource ProgressBarIndicatorLightingEffectRight}"/>
                                <Border x:Name="Highlight1"
                                        Grid.RowSpan="2"
                                        Grid.ColumnSpan="3"
                                        Background="{StaticResource ProgressBarIndicatorGlassyHighlight}"/>
                                <Border x:Name="Highlight2"
                                        Grid.RowSpan="2" 
                                        Grid.ColumnSpan="3"
                                        Background="{StaticResource ProgressBarTopHighlight}"/>
                            </Grid>
                        </Grid>
                    </Decorator>

                    <Border BorderThickness="{TemplateBinding BorderThickness}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            CornerRadius="2"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="Orientation"
                             Value="Vertical">
                        <Setter TargetName="TemplateRoot"
                                Property="LayoutTransform">
                            <Setter.Value>
                                <RotateTransform Angle="-90"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>

                    <Trigger Property="IsIndeterminate"
                             Value="true">
                        <Setter TargetName="LeftDark"
                                Property="Visibility"
                                Value="Collapsed"/>
                        <Setter TargetName="RightDark"
                                Property="Visibility"
                                Value="Collapsed"/>
                        <Setter TargetName="LeftLight"
                                Property="Visibility"
                                Value="Collapsed"/>
                        <Setter TargetName="CenterLight"
                                Property="Visibility"
                                Value="Collapsed"/>
                        <Setter TargetName="RightLight"
                                Property="Visibility"
                                Value="Collapsed"/>
                        <Setter TargetName="Indicator"
                                Property="Visibility"
                                Value="Collapsed"/>
                    </Trigger>
                    <Trigger Property="IsIndeterminate"
                             Value="false">
                        <Setter TargetName="Animation"
                                Property="Background"
                                Value="#80B5FFA9"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Put this code in the Themes/Generic.xaml file in your application and your progress bars will always have this style.

I have an issue. When I apply the theme and set `IsIndeterminate = true`, the indeterminate animation works in the xaml editor but the animation doesnt work in the main application. what could be causing this? — Aks, Jan 27 '11 at 11:40
Hard to say... Does it work in both cases if you don't apply this style? — Pavlo Glazkov, Jan 27 '11 at 12:53
@Aks: see [here](http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/38a76137-2874-48ed-b7c2-53586e47274a/) about indeterminate animation. — Ivan Danilov, Aug 30 '11 at 07:14
i did as you say. maybe since im a noob, it doesnt work. heres what i did. add new folder named Themes. Add empty Generic.xaml file. copy your code into Generic.xaml. doesnt work. what are the steps im missing? thanks. — Syaiful Nizam Yahya, Jan 04 '13 at 11:17

score 12 · Answer 2 · answered Jan 27 '11 at 21:50

This is another one... very simple flat progress bar for IsInderminate mode-

    <ControlTemplate x:Key="CustomProgressBar" TargetType="ProgressBar" >
        <Grid Name="TemplateRoot" SnapsToDevicePixels="True">
            <Rectangle RadiusX="2" RadiusY="2" Fill="Transparent" />
            <Border CornerRadius="0,0,0,0" Margin="1,1,1,1">
                <Border.Background>
                    <SolidColorBrush Color="Transparent"/>                       
                </Border.Background>
            </Border>
            <Border BorderThickness="0,0,0,0" BorderBrush="Transparent" Margin="1,1,1,1">
                <Border.Background>
                    <SolidColorBrush Color="Transparent"/>                        
                </Border.Background>
            </Border>
            <Rectangle Name="PART_Track" Margin="1,1,1,1" />
            <Decorator Name="PART_Indicator" Margin="1,1,1,1" HorizontalAlignment="Left">
                <Grid Name="Foreground">
                    <Rectangle Fill="Transparent" Name="Indicator" />
                    <Grid Name="Animation" ClipToBounds="True">
                        <Border Name="PART_GlowRect" Width="100"  Margin="0,0,0,0" HorizontalAlignment="Left" Background="LightBlue"/>                                                            
                    </Grid>
                    <Grid Name="Overlay">                         
                    </Grid>
                </Grid>
            </Decorator>
            <Border BorderThickness="0" CornerRadius="0,0,0,0" BorderBrush="Transparent" />
        </Grid>           
    </ControlTemplate>

Thanks, this was 95% of what I needed. It just doesn't handle vertical scroll bars. For the missing piece this answer ( http://stackoverflow.com/a/6849237/20570) . — Robert Gowland, Nov 14 '13 at 19:48
This works magnificently for a quick and simple `ProgressBar` style! As a heads up for others if you want to apply your own brushes, add a `Fill` to `PART_Track`, edit the `Fill` of `Indicator` and edit the `Background` of `PART_GlowRect`. — Alexis Leclerc, Apr 12 '19 at 20:17

score 5 · Answer 3 · answered Oct 13 '14 at 09:37

This is a custom progress bar I made from Suneet's example, but with IsIndeterminate animation working in .NET 3.5 :

<Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type ProgressBar}">
    <Setter Property="Foreground" Value="#54bdcd"/>
    <Setter Property="Background" Value="#000000"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ProgressBar}">
                <Grid Name="TemplateRoot" SnapsToDevicePixels="true">
                    <Rectangle Fill="{TemplateBinding Background}"/>
                    <Rectangle Name="PART_Track" Margin="0"/>
                    <Decorator x:Name="PART_Indicator" HorizontalAlignment="Left" Margin="0">
                        <Grid Name="Foreground">
                            <Rectangle Fill="{TemplateBinding Foreground}" Name="Indicator" />
                            <Grid Name="Animation" ClipToBounds="True">
                                <Border Name="PART_GlowRect"  Margin="0,0,0,0" HorizontalAlignment="Left" Background="{TemplateBinding Foreground}"/>
                            </Grid>
                            <Grid Name="Overlay">
                            </Grid>
                        </Grid>
                    </Decorator>

                    <Border BorderThickness="{TemplateBinding BorderThickness}"
                        BorderBrush="{TemplateBinding BorderBrush}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsIndeterminate" Value="true">
                        <Setter TargetName="Indicator" Property="Fill" Value="Transparent" />
                        <Setter TargetName="PART_GlowRect" Property="Width" Value="100" />
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ThicknessAnimation 
                                        Storyboard.TargetName="PART_GlowRect"
                                        Storyboard.TargetProperty="Margin"
                                        From="-50,0,0,0"  To="400,0,0,0" Duration="0:0:2"
                                        AutoReverse="True" RepeatBehavior="Forever" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

This is kinda a hack because I move the indeterminate bar back and forth by changing its marginleft value, but in my case it was affordable because my progress bar was a fixed width.

If you have a better idea, feel free to change the storyboard part. This page helped me a lot.

score 3 · Answer 4 · answered May 21 '15 at 14:30

Here is another one that supports normal and intermediate mode:

<Style TargetType="{x:Type ProgressBar}">
    <Setter Property="Foreground" Value="#1BA1E2"/>
    <Setter Property="Background" Value="#EEEEEE"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ProgressBar}">
                <Grid Name="TemplateRoot" SnapsToDevicePixels="true">
                    <Rectangle Fill="{TemplateBinding Background}"/>
                    <Rectangle Name="PART_Track" Margin="0"/>
                    <Decorator x:Name="PART_Indicator" HorizontalAlignment="Left" Margin="0">
                        <Grid Name="Foreground">
                            <Rectangle Fill="{TemplateBinding Foreground}" Name="Indicator" />
                            <Grid x:Name="Animation" ClipToBounds="true" Visibility="Hidden">
                                <Rectangle Fill="{TemplateBinding Background}" Name="HiderPre" Margin="0,0,50,0">
                                    <Rectangle.RenderTransform>
                                        <ScaleTransform x:Name="HiderPreTransform" ScaleX="0"/>
                                    </Rectangle.RenderTransform>
                                </Rectangle>
                                <Rectangle Fill="{TemplateBinding Background}" Name="HiderPost" RenderTransformOrigin="1, 0" Margin="50,0,0,0">
                                    <Rectangle.RenderTransform>
                                        <ScaleTransform x:Name="HiderPostTransform" ScaleX="1"  />
                                    </Rectangle.RenderTransform>
                                </Rectangle>
                            </Grid>
                            <Grid Name="Overlay">
                            </Grid>
                        </Grid>
                    </Decorator>

                    <Border BorderThickness="{TemplateBinding BorderThickness}"
                            BorderBrush="{TemplateBinding BorderBrush}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsIndeterminate" Value="true">
                        <Setter TargetName="Animation" Property="Visibility" Value="Visible" />

                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard RepeatBehavior="Forever">
                                    <DoubleAnimation
                                        Storyboard.TargetName="HiderPreTransform"
                                        Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                                        To="1"
                                        Duration="0:00:4" AutoReverse="True"/>
                                    <DoubleAnimation
                                        Storyboard.TargetName="HiderPostTransform"
                                        Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                                        To="0"
                                        Duration="0:00:4" AutoReverse="True"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Foreground" Value="Gray" />
        </Trigger>
    </Style.Triggers>
</Style>

score 0 · Answer 5 · answered Jul 13 '21 at 20:27

The simplest approach I could find is based heavily on https://stackoverflow.com/a/19737148/3195477 but even more simplified.

This produces a simple flat look:

<ProgressBar>
    <ProgressBar.Template>
        <ControlTemplate TargetType="ProgressBar">
            <Border
                BorderBrush="Black"
                BorderThickness="1"
                Background="LightGray"
                >

                <Grid x:Name="PART_Track">
                    <Rectangle
                        x:Name="PART_Indicator"
                        HorizontalAlignment="Left"
                        Fill="Blue"
                        />
                </Grid>
            </Border>
        </ControlTemplate>
    </ProgressBar.Template>
</ProgressBar>

The "trick" is to just minimally replace the named parts with very simple alternatives. You don't necessarily need complex gradients etc. to improve on the default appearance, although that's a matter of opinion.

WPF progressbar style is blocky?

5 Answers5

Linked