2

Regarding the WPF Progress Bar when IsIndeterminate is set to true, I personally think the animation is too fast.

I think slowing the animation down and maybe making the internal bar wider would help ease this problem.

Is there anyway to customize this?

edit: added code

.xaml

<Window x:Class="IndeterminateProgressBarTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:IndeterminateProgressBarTest" mc:Ignorable="d" Title="MainWindow" Height="100" Width="700"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup Name="Type"> <VisualState Name="Indeterminate"> <Storyboard RepeatBehavior="Forever"> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Animation" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"> <EasingDoubleKeyFrame KeyTime="0" Value="0"/> <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/> <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/> </DoubleAnimationUsingKeyFrames> <PointAnimationUsingKeyFrames Storyboard.TargetName="Animation" Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)"> <EasingPointKeyFrame KeyTime="0" Value="0,0"/> <EasingPointKeyFrame KeyTime="0:0:0" Value="0,0"/> <EasingPointKeyFrame KeyTime="1:0:0" Value="0,0"/> </PointAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <ProgressBar Name="progressBar" Width="600" Height="25" IsIndeterminate="True"/> </Grid> </Window> 

.cs

namespace IndeterminateProgressBarTest { public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); VisualStateManager.GoToElementState(progressBar, "Indeterminate", true); } } } 

1 Answer 1

3

You can customize the Indeterminate animation by editing VisualState named Indeterminate. The following is that VistalState in current default Style of ProgressBar.

<VisualState x:Name="Indeterminate"> <Storyboard RepeatBehavior="Forever"> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Animation" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"> <EasingDoubleKeyFrame KeyTime="0" Value="0.25"/> <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.25"/> <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.25"/> </DoubleAnimationUsingKeyFrames> <PointAnimationUsingKeyFrames Storyboard.TargetName="Animation" Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)"> <EasingPointKeyFrame KeyTime="0" Value="-0.5,0.5"/> <EasingPointKeyFrame KeyTime="0:0:1" Value="0.5,0.5"/> <EasingPointKeyFrame KeyTime="0:0:2" Value="1.5,0.5"/> </PointAnimationUsingKeyFrames> </Storyboard> </VisualState> 

Change 2nd and 3rd KeyTime respectively to change the speed of animation. Further customization is up to you.

Sign up to request clarification or add additional context in comments.

2 Comments

I updated my post with some relevant code, would you mind helping me find out where I'm going wrong here? Currently when I run this, I don't see any change.
This is a part of Style of ProgressBar. In designer, right click the ProgressBar -> Select "Edit Template" -> Select "Edit a copy". It is basics of customizing style or template of WPF controls and so you can find tons of information on it.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.