Progressbar dots spacing issue in Windows Phone

Question

When I use progress bar(IsIndertiminate=true) inside a Grid of width say 120, then the progress bar animation seems quite weird. The progress dot seems to be moving sidebyside without any proper spacing in between them. Also, due to this(less width), the effect of dots getting moving away/getting closer at start and end respectively is not quite visible.

So, how can I make the progressBar look better when I am displaying it in limited width. I tried to search and make some changes in progressBar's property myself but couldn't reach a satisfactory state.

EDIT: Inside my grid.row, by setting the width of my progressBar to "auto" I was able to achieve desirable spacing/look (it's still not perfect but will work for me).

Answer 1

It just requires some customizing of that controls Style Template to make some adjustments to the shapes that act as the ProgressBar itself.

I don't have a default Style template for the WP7 ProgressBar in front of me at the moment, but if you open your proj in Expression Blend, right-click it and choose "Edit Template -> Edit A Copy (OR Edit Original) to expose the Style Template, you'll see the shapes and I think even the Storyboard animation(s) driving it ready to be edited to your hearts desire.

If you provide a copy of the default template I'm sure we could whip out a solution for you pretty quick if you don't get it yourself. Hope this helps :)

Answer 2

It's default style of progress bar, and you can modify each Rectangle!

<Style x:Key="PerformanceProgressBarStyle1" TargetType="toolkit:PerformanceProgressBar">
        <Setter Property="IsIndeterminate" Value="False"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>
        <Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/>
        <Setter Property="IsHitTestVisible" Value="False"/>
        <Setter Property="Padding" Value="{StaticResource PhoneHorizontalMargin}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="toolkit:PerformanceProgressBar">
                    <ProgressBar x:Name="EmbeddedProgressBar" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" IsIndeterminate="{TemplateBinding ActualIsIndeterminate}" Padding="{TemplateBinding Padding}">
                        <ProgressBar.Template>
                            <ControlTemplate TargetType="ProgressBar">
                                <toolkitPrimitives:RelativeAnimatingContentControl HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
                                    <toolkitPrimitives:RelativeAnimatingContentControl.Resources>
                                        <ExponentialEase x:Key="ProgressBarEaseOut" EasingMode="EaseOut" Exponent="1"/>
                                        <ExponentialEase x:Key="ProgressBarEaseIn" EasingMode="EaseIn" Exponent="1"/>
                                    </toolkitPrimitives:RelativeAnimatingContentControl.Resources>
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Determinate"/>
                                            <VisualState x:Name="Indeterminate">
                                                <Storyboard Duration="00:00:04.4" RepeatBehavior="Forever">
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="IndeterminateRoot">
                                                        <DiscreteObjectKeyFrame KeyTime="0">
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <Visibility>Visible</Visibility>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.0" Storyboard.TargetProperty="X" Storyboard.TargetName="R1TT">
                                                        <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
                                                        <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2" Storyboard.TargetProperty="X" Storyboard.TargetName="R2TT">
                                                        <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
                                                        <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.4" Storyboard.TargetProperty="X" Storyboard.TargetName="R3TT">
                                                        <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
                                                        <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.6" Storyboard.TargetProperty="X" Storyboard.TargetName="R4TT">
                                                        <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
                                                        <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.8" Storyboard.TargetProperty="X" Storyboard.TargetName="R5TT">
                                                        <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
                                                        <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R1">
                                                        <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                                                        <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R2">
                                                        <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                                                        <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.4" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R3">
                                                        <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                                                        <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R4">
                                                        <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                                                        <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.8" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R5">
                                                        <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                                                        <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <Border x:Name="IndeterminateRoot" Margin="{TemplateBinding Padding}">
                                        <Grid HorizontalAlignment="Left">
                                            <Rectangle x:Name="R1" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
                                                <Rectangle.RenderTransform>
                                                    <TranslateTransform x:Name="R1TT"/>
                                                </Rectangle.RenderTransform>
                                            </Rectangle>
                                            <Rectangle x:Name="R2" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
                                                <Rectangle.RenderTransform>
                                                    <TranslateTransform x:Name="R2TT"/>
                                                </Rectangle.RenderTransform>
                                            </Rectangle>
                                            <Rectangle x:Name="R3" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
                                                <Rectangle.RenderTransform>
                                                    <TranslateTransform x:Name="R3TT"/>
                                                </Rectangle.RenderTransform>
                                            </Rectangle>
                                            <Rectangle x:Name="R4" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
                                                <Rectangle.RenderTransform>
                                                    <TranslateTransform x:Name="R4TT"/>
                                                </Rectangle.RenderTransform>
                                            </Rectangle>
                                            <Rectangle x:Name="R5" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
                                                <Rectangle.RenderTransform>
                                                    <TranslateTransform x:Name="R5TT"/>
                                                </Rectangle.RenderTransform>
                                            </Rectangle>
                                        </Grid>
                                    </Border>
                                </toolkitPrimitives:RelativeAnimatingContentControl>
                            </ControlTemplate>
                        </ProgressBar.Template>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="VisibilityStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.25" To="Normal"/>
                                    <VisualTransition GeneratedDuration="0:0:0.75" To="Hidden"/>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="Hidden">
                                    <Storyboard>
                                        <DoubleAnimation To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="EmbeddedProgressBar"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </ProgressBar>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

For example just set Widht = "2" Height = "2" May be it's what you need!

   <Rectangle x:Name="R1" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="2" IsHitTestVisible="False" Opacity="0" Width="2">

You also can use any shape, not only rectangles. Do not forget assign this style for your ProgresBar.

Hope its help.