WPF Progressbar Rectangle - wpf

Question

I am using the following ProgressBar Style:
<Style TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid MinHeight="14" MinWidth="400" Background="{TemplateBinding Background}">
<Border x:Name="PART_Track" CornerRadius="2" BorderThickness="1">
<Border.BorderBrush>
<SolidColorBrush Color="#FFFFFF" />
</Border.BorderBrush>
</Border>
<Border x:Name="PART_Indicator" CornerRadius="2" BorderThickness="1" HorizontalAlignment="Left"
Background="{TemplateBinding Foreground}" Margin="0,-1,0,1">
<Grid ClipToBounds="True" x:Name="Animation">
<Rectangle x:Name="PART_GlowRect" Width="200" HorizontalAlignment="Left"
Fill="#3399FF" Margin="0,0,0,0" />
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#404040"/>
</Style>
It's working fine but I want to display three rectangles with different colors at a time (Left, Center, Right) as the indicator part, how can I achieve this?

Answer 1

You should change your PART_GlowRect to be a Border instead of a Rectangle, and add the desired rectangles inside that:
<Border x:Name="PART_Indicator" CornerRadius="2" BorderThickness="1" HorizontalAlignment="Left"
Background="{TemplateBinding Foreground}" Margin="0,-1,0,1">
<Grid ClipToBounds="True" x:Name="Animation">
<Border x:Name="PART_GlowRect" Width="150" HorizontalAlignment="Left"
Background="Transparent" Margin="0,0,0,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Fill="Red" />
<Rectangle Grid.Column="1" Fill="Green" />
<Rectangle Grid.Column="2" Fill="Blue" />
</Grid>
</Border>
</Grid>
</Border>
This is how it will look like: