.NET 4.0+

WPF Button Controls - RepeatButton

by Richard Carr, published at http://www.blackwasp.co.uk/WPFRepeatButton.aspx

The sixty-second part of the Windows Presentation Foundation Fundamentals tutorial continues the examination of the WPF button controls. This article describes the RepeatButton, which raises multiple events when clicked.

RepeatButton

In the previous article in this series we looked at the Button control. This common control generally allows the user to issue a command, such as saving edited data or processing some information.

In this article we'll look at a second style of button, provided by the RepeatButton class. A RepeatButton looks and behaves in a similar manner to a standard button. The key difference is that the user can hold the mouse button down whilst the pointer is over the button to repeatedly perform an action. For the programmer, the repeating button works in much the same way as the standard button. When first clicked, the Click event is raised. If the mouse button is held down, the Click event is triggered repeatedly.

To demonstrate, create a new WPF application in Visual Studio. Name the project, "RepeatButtonDemo". Once loaded, replace the XAML in the main window with that shown below:

<Window x:Class="RepeatButtonDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="RepeatButton Demo"
        Height="100"
        Width="200">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        
        <ProgressBar Name="Progress Margin="2" />
        <RepeatButton Grid.Row="1"
                      Margin="2"
                      Click="RepeatButton_Click">Click / Hold</RepeatButton>
    </Grid>
</Window>

The window includes two controls in a Grid. We'll use the ProgressBar to show a change when the button's Click event is raised. For each occurrence of the event we'll increase the bar's value, cycling to zero once the bar is full.

To create this functionality, add the following method behind the window:

private void RepeatButton_Click(object sender, RoutedEventArgs e)
{
    double value = Progress.Value + 5;
    if (value > Progress.Maximum)
    {
        value = 0;
    }
    Progress.Value = value;
}

Run the program and try clicking the button and holding the mouse button down over it to see the results.

Delay and Interval

You might have noticed that the delay between the first and second Click events is a different length to the delay between any further events. The time between the events matches that of the keyboard settings configured by the user for the operating system. However, if this does not fit the purpose of your buttons, you can change the two durations.

The time between the first and second clicks is set using the Delay property. The gap between further click events can be configured using the Interval property. Both are integers that represent a time in milliseconds.

To demonstrate, modify the XAML for the RepeatButton as shown below. This sets the initial delay to one second. Subsequent events will be raised at a rate of ten per second.

<RepeatButton Grid.Row="1"
              Margin="2"
              Delay="1000"
              Interval="100"
              Click="RepeatButton_Click">Click / Hold</RepeatButton>

Run the program again and try the button with the new settings.