Three rectangles in WPF progressbar style - wpf

Question

Currently i was fixed border width="750" but i want to divide progress-bar width="*" so our defined colors (red,green,blue) utilize all window width of different resolution screens and our colors starts from (left,center,right) of the page(not with each other), when one color disappear (complete circle) it must start again from left side of the page. I was modified the style, but its not worked such i want.
<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill" StartPoint="0,0.5" EndPoint="1,0.5">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="White" Offset="0" />
<GradientStop Color="Chocolate" Offset="0.4" />
<GradientStop Color="Chocolate" Offset="0.6" />
<GradientStop Color="White" Offset="1" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<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">
<Border x:Name="PART_GlowRect" Width="750" HorizontalAlignment="Left"
Background="Transparent" Margin="0,0,0,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Fill="{StaticResource ProgressBarIndicatorAnimatedFill}" />
<Rectangle Grid.Column="1" Fill="Transparent" />
<Rectangle Grid.Column="2" Fill="{StaticResource ProgressBarIndicatorAnimatedFill}" />
<Rectangle Grid.Column="3" Fill="Transparent" />
<Rectangle Grid.Column="4" Fill="{StaticResource ProgressBarIndicatorAnimatedFill}" />
</Grid>
</Border>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#FFFFFF"/>

Answer 1

I think the ProgressBar control is not easily modifiable to achieve what you need, but you can create a similar effect with some simple animations:
<Grid Height="50" Width="300" Background="DarkGray" ClipToBounds="True">
<Grid x:Name="grid1" Width="300" HorizontalAlignment="Left">
<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.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<ThicknessAnimation Storyboard.TargetName="grid1"
Storyboard.TargetProperty="Margin" From="0,0,0,0" To="300,0,0,0"
Duration="0:0:3" BeginTime="0:0:0"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
</Grid>
<Grid x:Name="grid2" Width="300" HorizontalAlignment="Left">
<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.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<ThicknessAnimation Storyboard.TargetName="grid2"
Storyboard.TargetProperty="Margin" From="-300,0,0,0" To="0,0,0,0"
Duration="0:0:3" BeginTime="0:0:0"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
</Grid>
</Grid>
In the code above you have two identical Grids (grid1 and grid2), the only difference lies in their animation: they are both moving from left to right with the same speed, but in a different phase, so they create the illusion, that once a color disappears at the right side, it comes back from the left.
The ClipToBounds="True" setting of the outmost Grid ensures that no drawing will be done outside that grid.
If you are keen on using a ProgressBar, you can modify the PART_Track to contain the Grid from above, and completely skip the PART_Indicator and PART_GlowRect. Here is your code modified in this way (and put into a Page):
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Grid.Resources>
<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill" StartPoint="0,0.5" EndPoint="1,0.5">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Offset="0" Color="White"/>
<GradientStop Offset="0.4" Color="Chocolate"/>
<GradientStop Offset="0.6" Color="Chocolate"/>
<GradientStop Offset="1" Color="White"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<Style TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid
MaxWidth="750"
MinHeight="14"
MinWidth="400"
Background="{TemplateBinding Background}">
<Border x:Name="PART_Track" BorderThickness="1" CornerRadius="2">
<Border.BorderBrush>
<SolidColorBrush Color="#FFFFFF"/>
</Border.BorderBrush>
<Grid ClipToBounds="True">
<Grid x:Name="grid1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Fill="{StaticResource ProgressBarIndicatorAnimatedFill}"/>
<Rectangle Grid.Column="1" Fill="Transparent"/>
<Rectangle Grid.Column="2" Fill="{StaticResource ProgressBarIndicatorAnimatedFill}"/>
<Rectangle Grid.Column="3" Fill="Transparent"/>
<Rectangle Grid.Column="4" Fill="{StaticResource ProgressBarIndicatorAnimatedFill}"/>
<Grid.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<ThicknessAnimation
BeginTime="0:0:0"
Duration="0:0:3"
From="0,0,0,0"
Storyboard.TargetName="grid1"
Storyboard.TargetProperty="Margin"
To="900,0,0,0"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
</Grid>
<Grid x:Name="grid2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Fill="{StaticResource ProgressBarIndicatorAnimatedFill}"/>
<Rectangle Grid.Column="1" Fill="Transparent"/>
<Rectangle Grid.Column="2" Fill="{StaticResource ProgressBarIndicatorAnimatedFill}"/>
<Rectangle Grid.Column="3" Fill="Transparent"/>
<Rectangle Grid.Column="4" Fill="{StaticResource ProgressBarIndicatorAnimatedFill}"/>
<Grid.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<ThicknessAnimation
BeginTime="0:0:0"
Duration="0:0:3"
From="-900,0,0,0"
Storyboard.TargetName="grid2"
Storyboard.TargetProperty="Margin"
To="0,0,0,0"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
</Grid>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#FFFFFF"/>
</Style>
</Grid.Resources>
<ProgressBar IsIndeterminate="True"/>
</Grid>
</Page>
I hope this helps.