Display dot-dot-dot progress in a WPF button

Question

I found quite a few examples for showing progress where the progress bars and wheels are used however; I could find only one javascript example to show an ellipsis (dot-dot-dot) to refer progress hence I thought of asking this question. My app is not very complex - it only has a few check-boxes and one button. Recently my team requested for an enhancement and want to keep it simple as well.

There is a button named 'GO' that the user clicks after configuring the required settings. The code behind it is also really straightforward - it disables the button after the click event and call's a standalone exe using ProcessStartInfo that performs three actions 'reconcle', 'post' and 'publish'. I use the WaitForExist() method to re-enable the button.

I was requested by my team to show the 'current process' on the button. They simply want the button text to show Reconciling. Reconciling.. Reconciling... (at regular intervals say, 1 sec) followed by Posting and Publishing in a similar fashion.

It would be nice to know the most appropriate way to achieve this. Thanks in advance.

Answer 1

The simplest way of doing that is using an ObjectAnimationUsingKeyFrames. Set the TargetProperty on the Content and set the Value of each DiscreteObjectKeyFrame to Reconciling. Reconciling.. Reconciling....

Example for a ControlTemplate with a ContentPresenter named PART_Content:

<ControlTemplate.Triggers>
    <Trigger Property="IsEnabled" Value="False">
        <Trigger.EnterActions>
            <BeginStoryboard>
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Content" Storyboard.TargetProperty="Content" Duration="00:00:00.8" RepeatBehavior="Forever">
                        <DiscreteObjectKeyFrame KeyTime="00:00:00.0" Value="Loading"/>
                        <DiscreteObjectKeyFrame KeyTime="00:00:00.2" Value="Loading."/>
                        <DiscreteObjectKeyFrame KeyTime="00:00:00.4" Value="Loading.."/>
                        <DiscreteObjectKeyFrame KeyTime="00:00:00.6" Value="Loading..."/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </Trigger.EnterActions>
    </Trigger>
</ControlTemplate.Triggers>