Repeat Button in Blazor Button Component

4 Aug 20262 minutes to read

A Repeat Button is a type of Button in which the click event is triggered at regular time intervals from the pressed state until the released state.

The following example demonstrates how to implement a Repeat Button using both mouse and touch events.

@using Syncfusion.Blazor.Buttons
@using System.Timers

<div id="button">
    <SfButton Content="Button" oncontextmenu="return false;" @onmousedown='OnMouseDown ' @ontouchstart='OnMouseDown ' @onmouseup='OnMouseUp' @ontouchend='OnMouseUp'></SfButton>
</div>
<div id="preview">@EventName Event triggered - @Count times</div>

@code {
    public string EventName = "";
    public int Count = 0;
    private static Timer aTimer;
    public void Click(Object source, System.Timers.ElapsedEventArgs e)
    {
        EventName = "Click";
        Count++;
        InvokeAsync(StateHasChanged);
    }
    public void OnMouseDown ()
    {
        aTimer = new System.Timers.Timer();
        aTimer.Interval = 200;
        aTimer.Elapsed += Click;
        aTimer.AutoReset = true;
        aTimer.Start();
    }
    public void OnMouseUp()
    {
        aTimer.Stop();
        aTimer.Dispose();
    }
}

<style>
    #preview {
        float: right;
        padding: 0 350px 0 0;
    }
</style>
Repeat Button in Blazor Button Component

How it works

  1. On OnMouseDown , a System.Timers.Timer is started with a 200 ms interval.
  2. Each tick of the timer invokes Click, which increments the counter and updates the UI.
  3. On OnMouseUp, the timer is stopped and disposed.
  4. The component also implements IDisposable to ensure the timer is released when the component is removed from the page.

See also