How do I change the speed and width of the indeterminate progress bar animation in WPF?-CodePudding

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);
        }
    }
}

CodePudding user response：

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.