Silverlight Learning Series (5)

1) memories
Yesterday we talked about the reuse of styles in Silverlight controls. Style reuse can effectively reduce the same Code . It can also make the code on the custom control page more concise and clear.
2) mouse events on textbox
Here we will talk about the mouse event of textbox. Of course, it is not just for this control in a narrow sense. I just want to use this as an example. Of course, you can do the mouse event on more controls. For example, on a button.
The code in the XAML file is as follows:

  < Textbox Grid. Column = "1" Fontsize = "15"  
Background = "White" Mouseenter = "Textbox_mouseenter"
Mouseleave = "Textbox_mouseleave" />

Just like the button events in the Silverlight series (II), right-click textbox_mouseenter and textbox_mouseleave and select "navigate to event processing ".Program".
Compile an event handler:

Private   Void Textbox_mouseenter ( Object Sender, mouseeventargs e ){
Textbox txtbox = Sender As Textbox;
Txtbox. Background =   New solidcolorbrush (colors. Red);
}

private void textbox_mouseleave ( Object sender, mouseeventargs e) {
textbox txtbox = sender as textbox;
txtbox. background = New solidcolorbrush (colors. yellow);
}

The following figure shows the effect of moving the cursor up:

The following figure shows the effect of mouse removal:

Of course, the above mouse events are the most common and intuitive mouse events. Next let's take a look at how to manage events in the code. That is to say, it is equivalent to registering events in the background code. We still use the original textbox to do this. Article Here, we remove the mouseenter = "textbox_mouseenter" mouseleave = "textbox_mouseleave" event declarations in the XAML file, and then to register the event in the background code, we need to add an X: Name attribute to textbox in XAML and set it to "txtbox ". < Textbox X: Name = "Txtbox" Grid. Column = "1" Fontsize = "15"  
Background = "White" />

Then register the event in the background code: Public mainpage (){
Initializecomponent ();
Txtbox. mouseenter + = new mouseeventhandler (textbox_mouseenter );
Txtbox. mouseleave + = new mouseeventhandler (textbox_mouseleave );
}

Textbox_mouseenter and textbox_mouseleave remain unchanged, so the running effect is the same as above.

In many cases, we need to obtain the mouse movement data, such as the mouse coordinates, which we will use in GIS systems, or similar scenarios such as Google Maps. We use the second method of event registration to obtain data.
First, the code in XAML:

< Textbox X: Name = "Txtbox" Grid. Column = "1" Fontsize = "15"  
Background = "White" />

< Canvas >
< Textblock Canvas. Left = "300" Canvas. Top = "100" X: Name = "Yeantxt"  
Margin = "10" Foreground = "White" Text = "Coordinates of the mouse" />
</ Canvas >

Use a textblock such as yeantxt to display the coordinates of the mouse. Here I add a canvas to the grid, because if you want to add textblock directly, you need to add a row to the grid and then write the grid. row = ..... to be lazy, I added a canvas and set the canvas of textblock. left and canvas. top to locate.
In the background code (this is really not called the background code, because there is no codebehind concept in Silverlight. net web applications are unified. For the moment, we are talking about the background code, but the readers must be clear that what is actually not codebehind, in this series, I will also describe the Event code as the background code), write the mouse movement event: Public Mainpage (){
Initializecomponent ();
Txtbox. mouseenter + =   New Mouseeventhandler (textbox_mouseenter );
Txtbox. mouseleave + =   New Mouseeventhandler (textbox_mouseleave );
Txtbox. mousemove + = New Mouseeventhandler (txtbox_mousemove );
}

Private   Void Txtbox_mousemove ( Object Sender, mouseeventargs e ){
Point P = E. getposition ( Null );
Yeantxt. Text = String. Format ( " Mouse Coordinate Position: X: {0}, Y: {1} " , P. x, P. y );
}

Register the event in mainpage, write the Event code, declare a coordinate point in the code, and then use E. getposition to obtain the mouse coordinate. Isn't it easy !!
Here, our null parameter indicates that the mouse we get is for the entire Silverlight plug-in, that is, for the browser screen.
The running result is as follows:

Of course, we can take the mouse position for textbox itself, which may be more useful. Then we can directly change the null parameter to the X: name of the textbox. Private   Void Txtbox_mousemove ( Object Sender, mouseeventargs e ){
Point P = E. getposition (txtbox );
Yeantxt. Text = String. Format ( " Mouse Coordinate Position: X: {0}, Y: {1} " , P. x, P. y );
}

The running effect is of course the cursor position with textbox as the boundary:

Finally, Event Routing in Silverlight can be divided into three types: Direct routing, bubble routing, and tunnel routing. In Silverlight, the routing method is bubble routing. Of course, most of the bubble routing methods are bubble routing. I will not introduce the other two routing methods here. You can view them in the msdn Event Routing. Here we will talk about the bubble routing. The bubble routing can obtain and process subnode events in the parent node. For example. I have a border control in the canvas and a button control in the border. Then, if I set a button_click event in the canvas, I click the button, but I did not set the button_click event in the button to process the event, and it was not set in the border. At this time, this event can be handled in a bubble mode like button-> border-> canvas to the outermost node.
For our project, we add a mouseleftbuttondown event to the canvas. If we click the left mouse button on the control in the middle of the canvas, if the mouseleftbuttondown event is not declared in the intermediate control, the event will be routed to the canvas for processing. Check the code in XAML:

< Canvas Background = "Blue" X: Name = "Yeancanvas" Mouseleftbuttondown = "Yeancanvas_mouseleftbuttondown" >
< Rectangle Canvas. Left = "300" Canvas. Top = "300" X: Name = "Yeanrec"  
Width = "150" Height = "100" Fill = "Green" />
< Textblock Canvas. Left = "300" Canvas. Top = "100" X: Name = "Yeantxt"  
Margin = "10" Foreground = "White" Text = "Coordinates of the mouse" />
</ Canvas >

Here, yeantxt is used to display information, and yeanrec is used to display a rectangle of that event. Of course, yeantxt can also be used for demonstration. I wrote a nonsense. Haha.
When processing the mouseleftbuttondown event:

Private   Void Yeancanvas_mouseleftbuttondown ( Object Sender, mousebuttoneventargs e ){
Yeantxt. Text =   " Click: " + (E. originalsource As Frameworkelement). Name
+ " Coordinates: X, Y = "   + E. getposition (E. originalsource As Frameworkelement). tostring ();
}

Check the display effect:

When you click a rectangle, the click rectangle is displayed in yeantxt, and the coordinate is.... At this time, the mouse click event is routed to the outermost node.

When you click canvas, the canvas is clicked, and the coordinate is... this is your own event!
Let's get here today ...... It's too late to go to work tomorrow ......
Today, we talked about the mouse event. Let's summarize it. I have summarized four types. Leave some for yourself to think about the four types. Haha.