Problem with IsIndeterminate while trying to put together a ProgressBar XAML template

Question

Hello

I´m creating a XAML template for the WPF ProgressBar. The following XAML code works fine if IsIndeterminate is set to False:

<ControlTemplate x:Key="DefaultProgressBarTemplate" TargetType="{x:Type ProgressBar}">
    <ControlTemplate.Resources>
        <SolidColorBrush x:Key="SolidBorderBrush" Color="#767676" />
        <LinearGradientBrush x:Key="IndicatorBrush" StartPoint="0,0" EndPoint="1,0">
            <LinearGradientBrush.GradientStops>
                <GradientStop Color="#BCCF64" Offset="0.5" />
                <GradientStop Color="#E1FF77" Offset="0.0" />
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
    </ControlTemplate.Resources>
    <Grid MinHeight="14">
        <Border Name="PART_Track" CornerRadius="9" Background="Transparent" BorderBrush="{StaticResource SolidBorderBrush}" BorderThickness="1" SnapsToDevicePixels="True" />
        <Border Name="PART_Indicator" CornerRadius="9" Background="{StaticResource IndicatorBrush}" BorderBrush="{StaticResource SolidBorderBrush}" BorderThickness="1" HorizontalAlignment="Left" SnapsToDevicePixels="True" />
    </Grid>
</ControlTemplate>

<Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type ProgressBar}">
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="Template" Value="{StaticResource DefaultProgressBarTemplate}" />
</Style>

The indicator border fills up the ProgressBar from min to max. But if I set IsIndeterminate to True the indicator border fills up the entire ProgressBar (like it is set to max) and nothing is animated at all. Nothing I tried did change this behaviour of the ProgressBar. What do I have to do to have an IsIndeterminate animation similar to the one in the standard WPF ProgressBar ?

Thanks in advance

banzai

Answer 1

ProgressBar is designed to show the entire indicator when IsIndeterminate="true". WPF's built in ProgressBar styles actually replace the indicator color with an animated brush whenever IsIndeterminate="true" to cause the effect you are observing. You could do the same. Just use a property trigger on IsIndeterminate="true" and set the brush to a brush whose colors you are animating. Another option would be to create a separate animation triggered by IsIndeterminate="true" if you wanted a different effect.

You can look at the built-in styles by using the NET Reflector tool along with its BamlViewer add-in. The original source files are also copied onto your hard disk when Expression Blend is installed, even the evaluation version, so installing Expression Blend is another way to see the XAML for the built-in styles. Just look in the C:\Program Files\Microsoft Expression\Blend 2\SystemThemes directory.