What's New
Q & A
Tip Jar
C# Helper...
Follow VBHelper on Twitter
MSDN Visual Basic Community
TitleDraw a rubberband rectangle with XAML in Visual Basic 2008
DescriptionThis example shows how to draw a rubberband rectangle with XAML in Visual Basic 2008.
KeywordsXAML, WPF, Visual Basic 2008, rubberband, rubberband rectangle
When the user presses the left mouse button, the following code creates a new Rectangle object. The Stroke property determines how the rectangle's border is drawn. The Fill property determines how it is filled.

The call to e.GetPosition returns the mouse position relative to the control you pass it, in this case the Canvas canLine.

Notice the bizarre calls to Canvas.SetTop and Canvas.SetLeft. In XAML, the rectangle's Canvas.Top and Canvas.Left properties determine the control's position on the Canvas that contains it. Those are not really properties of the Rectangle object (they are provided by the Canvas) so you need to use this weird method to set their values. (Yes, this seems very strange. I suspect the WPF developers were overly influenced by XAML's structure rather than following the pattern used by previous controls where you would simply set the rectangle's Top and Left properties. Whatever.)

After creating the Rectangle, the code adds it to the Canvas control canRectangle.

Private start_point As Point
Private new_rectangle As Rectangle = Nothing

' Start the new Rectangle.
Private Sub canRectangle_MouseLeftButtonDown(ByVal sender _
    As Object, ByVal e As _
    System.Windows.Input.MouseButtonEventArgs) Handles _
    new_rectangle = New Rectangle()
    new_rectangle.Stroke = Brushes.Purple
    new_rectangle.Fill = Brushes.Green
    new_rectangle.Width = 0
    new_rectangle.Height = 0

    start_point = e.GetPosition(canRectangle)
    Canvas.SetTop(new_rectangle, start_point.Y)
    Canvas.SetLeft(new_rectangle, start_point.X)

End Sub
When the mouse moves, the following code adjusts the rectangle's size. You cannot set the Width or Height properties to negative numbers so the code must figure out what the smaller X and Y coordinates are and use them for the control's upper left corner.
' Change the Rectangle's size.
Private Sub canRectangle_MouseMove(ByVal sender As Object, _
    ByVal e As System.Windows.Input.MouseEventArgs) Handles _
    If new_rectangle IsNot Nothing Then
        Dim pt As Point = e.GetPosition(canRectangle)

        Canvas.SetTop(new_rectangle, Math.Min(pt.Y, _
        Canvas.SetLeft(new_rectangle, Math.Min(pt.X, _
        new_rectangle.Width = Math.Abs(pt.X - start_point.X)
        new_rectangle.Height = Math.Abs(pt.Y - _
    End If
End Sub
When the user releases the left mouse button, the following code sets new_rectangle to Nothing so future MouseMove events don't affect it.
' Finish the Rectangle.
Private Sub canRectangle_MouseLeftButtonUp(ByVal sender As _
    Object, ByVal e As _
    System.Windows.Input.MouseButtonEventArgs) Handles _
    new_rectangle = Nothing
End Sub
Copyright © 1997-2010 Rocky Mountain Computer Consulting, Inc.   All rights reserved.