#688 – Moving an Element with the Mouse

Here’s a short example that uses the MouseDown, MouseMove and MouseUp events to move a user interface element around on the screen.  We place a Label in a Canvas and then bind its position to a couple of properties that keep track of the desired X and Y position of the label.  The properties derive from a base position for the label, plus the current mouse position.

Here’s the XAML:

        <Label Content="Feast" Background="ForestGreen" Padding="12,7"
               Canvas.Left="{Binding XPosition}" Canvas.Top="{Binding YPosition}"
               MouseDown="Feast_MouseDown"  MouseUp="Feast_MouseUp" MouseMove="Feast_MouseMove"/>

And the code:

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

        private Point BasePoint = new Point(0.0, 0.0);
        private double DeltaX = 0.0;
        private double DeltaY = 0.0;
        private bool moving = false;
        private Point PositionInLabel;

        public double XPosition
            get { return BasePoint.X + DeltaX; }

        public double YPosition
            get { return BasePoint.Y + DeltaY; }

        private void Feast_MouseDown(object sender, MouseButtonEventArgs e)
            Label l = e.Source as Label;
            if (l != null)
                moving = true;
                PositionInLabel = e.GetPosition(l);

        private void Feast_MouseMove(object sender, MouseEventArgs e)
            if (moving)
                Point p = e.GetPosition(null);
                DeltaX = p.X - BasePoint.X - PositionInLabel.X;
                DeltaY = p.Y - BasePoint.Y - PositionInLabel.Y;

        private void Feast_MouseUp(object sender, MouseButtonEventArgs e)
            Label l = e.Source as Label;
            if (l != null)
                BasePoint.X += DeltaX;
                BasePoint.Y += DeltaY;
                DeltaX = 0.0;
                DeltaY = 0.0;
                moving = false;

        public event PropertyChangedEventHandler PropertyChanged;

        private void RaisePropertyChanged(string prop)
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(prop));

The end result looks something like this:


#682 – Panel Elements Only Fire Mouse Events When Background Is Set

If you create an element derived from Panel, like Canvas, and wire up any of the mouse-related events, you’ll notice that you don’t see your events unless you’ve set the Background property of the Panel.  You will, however, see the routed events when a child element of the canvas originates the event.

In the example below, we don’t see MouseMove event on the Canvas unless we’re moving the mouse over one of the child Buttons.

    <Canvas MouseMove="Canvas_MouseMove">
        <Button Content="Preston Sturges" MouseMove="Button_MouseMove"
                Canvas.Left="10" Canvas.Top="10"/>
        <Button Content="John Ford" MouseMove="Button_MouseMove"
                Canvas.Left="10" Canvas.Bottom="10"/>
        <Button Content="Michael Curtiz" MouseMove="Button_MouseMove"
                Canvas.Right="10" Canvas.Top="10"/>

If you do want to see mouse events on a Panel, you need to explicitly set its Background property.  If you don’t want a background color, you can just set the property to Transparent.

    <Canvas MouseMove="Canvas_MouseMove" Background="Transparent">

#681 – No Mouse Events When Visibility is Hidden, Collapsed or Hidden

User interface elements will not receive mouse-based events when the element’s Visibility property is Collapsed or Hidden (rather than Visible).

        <Button Content="Visibility = Collapsed" Visibility="Collapsed"
                HorizontalAlignment="Center" Margin="5" />
        <Button Content="Visibility = Hidden" Visibility="Hidden"
                HorizontalAlignment="Center" Margin="5" />
        <Button Content="Visibility = Visible" Visibility="Visible"
                HorizontalAlignment="Center" Margin="5" />

When we move the mouse of the space where the button whose Visibility is Hidden, we don’t see the MouseMove event firing.

#653 – MouseMove Events

Most controls in WPF inherit a series of mouse input events from the UIElement class.  This includes the PreviewMouseMove (tunneling) and MouseMove (bubbling) events.

The MouseMove events indicate that the user is moving the mouse across the element in question.  As the user moves the mouse, the event fires for the control that the mouse is over.

Because these events propagate, however, the events will also tunnel down to the control that the mouse is over and then bubble back up the logical tree.

For example, if we have a TextBox inside a StackPanel that is inside a Window and we move the mouse around within the TextBox, we’ll see the following events fired:

  • PreviewMouseMove on Window
  • PreviewMouseMove on StackPanel
  • PreviewMouseMove on TextBox
  • MouseMove on TextBox
  • MouseMove on StackPanel
  • Mousemove on Window


#230 – Changing a Radial Gradient as Mouse Moves Over a Control

Here’s an example of one way to change a radial gradient at runtime, based on mouse movements.

The radial gradient is defined in the XAML:

		<Button x:Name="btnActiveGradient" Content="Click Me" Width="120" Height="30" Margin="30"
			Style="{DynamicResource ButtonStyle1}" >
				<RadialGradientBrush x:Name="gradRadial" RadiusX="0.25">
					<GradientStop Color="AliceBlue" Offset="0.0"/>
					<GradientStop Color="LightSteelBlue" Offset="1.0"/>

We also need to disable the default rendering of the button while the mouse is over it.  We can do this by changing the RenderMouseOver property of the ButtonChrome object–found in the button’s control template–to False.

Finally, we add some code to the button’s MouseMove and MouseLeave events, to change the gradient’s origin and center as we move the mouse.

        private void btnActiveGradient_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
            Point pt = Mouse.GetPosition(btnActiveGradient);
            gradRadial.GradientOrigin = new Point(pt.X / btnActiveGradient.Width, pt.Y / btnActiveGradient.Height);
            gradRadial.Center = gradRadial.GradientOrigin;

        private void btnActiveGradient_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
            gradRadial.GradientOrigin = new Point(0.5, 0.5);   // Default
            gradRadial.Center = gradRadial.GradientOrigin;