Silverlight utility tip series: 3. dynamically draw a rectangle with the Silverlight mouse [Download instance source code]

This section describes how to dynamically draw rectangular frames in Sivlerlight. This technique allows you to customize rectangular frames. The key to this technique is to use its events in a Canvas to draw a rectangle. Note that Canvas is used here because Canvas. Top and Canvas. Left are a good method for locating. When a user wants to dynamically draw a rectangle, the user presses the left mouse button (MouseLeftButtonDown event) to record the Canvas coordinates of the current mouse click, and then moves the mouse (MouseMove event) record the point where the current mouse is moved, and a Rectangle rectangular box is generated dynamically. The rectangle will change the size with the mouse movement. When the left mouse button pops up (MouseLeftButtonUp event), cancel the binding of the MouseLeftButtonDown event.

The following shows the complete source code:

MainPage. xaml. cs

Using System; using System. collections. generic; using System. linq; using System. net; using System. windows; using System. windows. controls; using System. windows. documents; using System. windows. input; using System. windows. media; using System. windows. media. animation; using System. windows. shapes; namespace SLRectangle {public partial class MainPage: UserControl {public MainPage () {InitializeComponent ();} priva Te Rectangle rect; // declare a Rectangle to reference the private Point origPoint; // set the reference private bool isAddMouseEvent = false for a mouse Point; // indicates whether a mouse event is added. /// <summary> /// when the left mouse button is pressed down, a Rectangular Box control is generated, add the corresponding move control event and the left mouse button to pop up the event // </summary> /// <param name = "sender"> </param> // <param name = "e"> </param> private void Handle_MouseLeftButtonDown (object sender, mouseButtonEventArgs e) {rect = new Rectangle (); origPoint = e. getPosition (AddUC); rec T. setValue (Canvas. leftProperty, origPoint. x); // set the start X coordinate rect of the rectangle. setValue (Canvas. topProperty, origPoint. y); // set the start Y coordinate rect of the rectangle. opacity = 1; // sets the transparency rect of the control. fill = new SolidColorBrush (Colors. blue); rect. radiusX = 10; // The rect attribute is set to make the rectangle beautiful. radiusY = 10; AddUC. mouseMove + = Handle_MouseMove; // load the MouseMove event AddUC for the Canvas panel. mouseLeftButtonUp + = Handle_MouseLeftButtonUp; // loads the MouseLeftButtonUp event Ad for the Canvas panel DUC. children. add (rect); // Add a rectangle to the Canvas }/// <summary> // when the left mouse button is drawn, remove the mouse event binding on this page when the mouse is popped up. /// </Summary> /// <param name = "sender"> </param> /// <param name = "e"> </param> private void Handle_MouseLeftButtonUp (object sender, mouseButtonEventArgs e) {AddUC. mouseLeftButtonUp-= Handle_MouseLeftButtonUp; AddUC. mouseMove-= Handle_MouseMove;} // <summary> // when the mouse moves down, the rectangle box control also changes the size to form the corresponding box /// </summary> /// <param name = "sender"> </param> /// <param name = "e"> </param> private void Handle_Mo UseMove (object sender, MouseEventArgs e) {Point curPoint = e. getPosition (AddUC); if (curPoint. x> origPoint. x) {rect. width = curPoint. x-origPoint. x;} if (curPoint. X <origPoint. x) {rect. setValue (Canvas. leftProperty, curPoint. x); rect. width = origPoint. x-curPoint. x;} if (curPoint. y> origPoint. y) {rect. height = curPoint. y-origPoint. y;} if (curPoint. Y <origPoint. y) {rect. setValue (Canv As. topProperty, curPoint. y); rect. height = origPoint. y-curPoint. Y ;}} private void button#click (object sender, RoutedEventArgs e) {// checks whether the mouse has been drawn. If not, bind it to the mouse draw status and set this button to the unavailable status if (isAddMouseEvent = false) {this. addUC. mouseLeftButtonDown + = Handle_MouseLeftButtonDown; isAddMouseEvent = true; this. button1.IsEnabled = false ;}}}}

MainPage. xaml

<UserControl x: Class = "SLRectangle. mainPage "xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "xmlns: d =" http://schemas.microsoft.com/expression/blend/2008 "xmlns: mc =" http://schemas.openxmlformats.org/markup-compatibility/2006 "mc: Ignorable =" d "d: designHeight = "1000" d: DesignWidth = "1000" xmlns: sdk = "http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"> <Grid x: Name = "LayoutRoot"> <Canvas x: name = "AddUC" HorizontalAlignment = "Stretch" Background = "Black" verticalignment = "Stretch" Width = "1920" Height = "1080"> </Canvas> <Button Width =" 97 "Height =" 30 "Content =" click I start to draw a rectangle "x: name = "button1" Margin = "," verticalignment = "Top" HorizontalAlignment = "Left" Click = "button#click"> </Button> </Grid> </UserControl>

In this example, all the notes to be commented have been written in the text. This is a very small trick, but there are still some usage areas in the actual project. For example. We want users to set their own anchor for many machines on a background image with many machines and devices, and then configure relevant machine information for these anchor points. Here we can allow users to draw some rectangles on those machines themselves. Then, after drawing and associating the data, we can save the user's custom configuration interface and the location and size of the rectangle on the page to the database in XML format, you can retrieve the data from the database next time and restore it to display the custom section.

As follows:

This instance is in the VS2010 + Silverlight 4.0 environment. Due to limited time, we have made a new Demo. If you have any mistakes, please advise.

Click here to download: SLRectangle.rar