#851 – Using RepeatButtons to Move Something

The RepeatButton functions like a regular Button, but continuously fires Click events while the button remains depressed.

One possible use for a RepeatButton is to move something while the user holds the mouse button down.

Below, we use a pair of RepeatButtons to move a picture around a Canvas.

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Canvas Grid.ColumnSpan="2">
            <Image Source="Augustus.jpg" Height="100"
                   Canvas.Left="{Binding PictureLeft}" Canvas.Top="20"/>
        </Canvas>

        <RepeatButton Grid.Row="1" Content="Left"
                      Padding="10,5" Margin="5" HorizontalAlignment="Center"
                      Click="rptLeft_Click"/>
        <RepeatButton Grid.Row="1" Grid.Column="1" Content="Right"
                      Padding="10,5" Margin="5" HorizontalAlignment="Center"
                      Click="rptRight_Click"/>
    </Grid>
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        public MainWindow()
        {
            this.InitializeComponent();
            this.DataContext = this;
        }

        public event PropertyChangedEventHandler PropertyChanged = delegate { };

        private void RaisePropertyChanged(string propName)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propName));
        }

        private int pictureLeft = 0;
        public int PictureLeft
        {
            get { return pictureLeft; }
            protected set
            {
                pictureLeft = value;
                RaisePropertyChanged("PictureLeft");
            }
        }

        private void rptLeft_Click(object sender, RoutedEventArgs e)
        {
            PictureLeft -= 5;
        }

        private void rptRight_Click(object sender, RoutedEventArgs e)
        {
            PictureLeft += 5;
        }
    }

851-001

Advertisements

#850 – Specifying a Delay and Interval for a RepeatButton

If you hold the left mouse button down after clicking on a RepeatButton control, it will repeatedly fire Click events.

By default, a RepeatButton waits 1/2 sec (500 ms) after firing the first Click event and then begins firing Click events every 33 ms (about 30 times per second).

You can configure these values using the following properties of the RepeatButton:

  • Delay – Initial delay to wait, after first Click event, before repeatedly firing additional events
  • Interval – Time to wait between Click events

Note that the interval between events includes whatever time is spent in executing the Click event handler, unless you perform any required processing on a background thread.  In other words, the clock begins ticking again towards the next interval after you exit from the Click handler for the previous tick.

#849 – You Can Hold a RepeatButton Down

A Button fires its Click event when you press and release the left mouse button.  A RepeatButton, on the other hand, fires Click events continuously, as long as you continue holding the left mouse button down.

For example:

        <RepeatButton Content="Hold Me Down"
                      HorizontalAlignment="Center"
                      Margin="10" Padding="10,5"
                      Click="RepeatButton_Click"/>
        <TextBlock Text="{Binding MyCounter, Mode=OneWay}"
                   HorizontalAlignment="Center"
                   FontSize="48" Margin="20"/>

In the code-behind, we increment a counter every time the Click event is fired.

    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        public MainWindow()
        {
            this.InitializeComponent();
            this.DataContext = this;
        }

        public event PropertyChangedEventHandler PropertyChanged = delegate { };

        private void RaisePropertyChanged(string propName)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propName));
        }

        private int myCounter = 0;
        public int MyCounter
        {
            get { return myCounter; }
            protected set
            {
                if (value != myCounter)
                {
                    myCounter = value;
                    RaisePropertyChanged("MyCounter");
                }
            }
        }

        private void RepeatButton_Click(object sender, RoutedEventArgs e)
        {
            MyCounter++;
        }
    }

The number increases while we hold the left mouse button down.
849-001