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

#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.