Silverlight game development: Reusable drag-and-drop controls

There are various drag-and-drop requirements in the game, ranging from window to icon. In the game interface operation, clicking and dragging occupy most of the user's operations, it is very important to do a drag control. It is more important to do a reusable Drag Control. My implementation methods may be different, but as long as they are effective, on this basis, you can expand a lot of practices.

Some may have already written this article, but the method described in this article is to reuse controls once and for all, you only need a base-class code to fulfill all the requirements-icons, forms, and custom goals. Therefore, this film is not included in tips but in game development categories.

First, you need to understand the drag and drop principle, that is, when you press the mouse to make an identifier, when the mouse moves, modify the target coordinate information in real time, when the mouse is lifted, release the mouse operation, of course, for better coordinate operations, we generally change the parent container to Canvas.

We will focus on the subsequent work. Please understand the previous concepts of the base class and container, so that the subsequent work will be much easier. Considering its reusability, create a basic control to inherit the following control, write some general logic in this base class, and let other classes inherit and reuse. This is one of the basic practices of the game engine.

Create a control named MovableObject in Blend or Visual Studio and modify the control xaml to the following:

<UserControlxmlns="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"x:Class="DragObject.MovableObject"d:DesignWidth="640" d:DesignHeight="480" Width="Auto" Height="Auto"><Grid x:Name="LayoutRoot"><Rectangle Stroke="Black" RadiusX="5" RadiusY="5"><Rectangle.Fill><LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"><GradientStop Color="Transparent"/><GradientStop Color="Black" Offset="1"/></LinearGradientBrush></Rectangle.Fill></Rectangle><Image x:Name="ShowImage" Stretch="Fill"/><Rectangle x:Name="Sel_Rectangle" Stroke="White" StrokeThickness="2" Visibility="Collapsed" RadiusX="5" RadiusY="5"/></Grid></UserControl>

Even though code implementation is not difficult, it is easier to directly use XAML for ease of understanding. You can view its structure.

The above representation includes a bottom, an Image to be displayed, and an Image to be selected when the mouse moves in.

The following is the Coding stage. Open the MovableObject class. The code design is as follows:

Public partial class MovableObject: UserControl {// Save the cursor and determine whether to click the Point? MousePoint = null; public MovableObject () {InitializeComponent (); // The selection box hides Sel_Rectangle.Visibility = System. windows. visibility. collapsed;} // reload protected override void OnMouseMove (MouseEventArgs e) using the mouse movement method {// determine whether to press the left mouse button if (mousePoint! = Null) {// calculate the new position double newTop = e. getPosition (null ). y-mousePoint. value. Y + Canvas. getTop (this); double newLeft = e. getPosition (null ). x-mousePoint. value. X + Canvas. getLeft (this); Canvas. setTop (this, newTop); Canvas. setLeft (this, newLeft); mousePoint = e. getPosition (null);} base. onMouseMove (e);} // reload the protected override void OnMouseLeftButtonUp (MouseButtonEventArgs e) {mousePoint = null; // release the mouse device this. releaseMouseCapture (); base. onMouseLeftButtonDown (e);} // reload the protected override void OnMouseLeftButtonDown (MouseButtonEventArgs e) {mousePoint = e. getPosition (null); // capture the mouse device this. captureMouse (); // The following three rows are used to ensure that the current control is the top-level var parent = this. parent as Panel; parent. children. remove (this); parent. children. add (this); base. onMouseLeftButtonUp (e);} // overload protected override void OnMouseEnter (MouseEventArgs e) {Sel_Rectangle.Visibility = System. windows. visibility. visible; base. onMouseEnter (e);} // overload protected override void OnMouseLeave (MouseEventArgs e) {Sel_Rectangle.Visibility = System. windows. visibility. collapsed; base. onMouseLeave (e );}}

I made some comments to clearly understand the role of this base class. Now I can create a new class that inherits from this class to achieve the purpose of extension.

To this end, I have prepared three different target effects: MyIcon, MyFace, and MyCard)

The icons and images only need to use the Image of the original control, while the custom control is an independent control designed by Blend or other methods. How can we achieve these three effects? Please refer to the following link:

We first create three classes, all of which inherit from MovableObject.

Public class MyIcon: MovableObject

Public class MyFace: MovableObject

Public class MyCard: MovableObject

Enter the corresponding operation logic in their constructors. The complete code is provided below:

public class MyIcon : MovableObject{public MyIcon(){IconIndex = 1;}private int _Iconindex = -1;public int IconIndex{get { return _Iconindex; }set{_Iconindex = value;var uri = new Uri("/DragObject;component/Res/image" + value + ".png", UriKind.Relative);ShowImage.Source = new System.Windows.Media.Imaging.BitmapImage(uri);}}}public class MyFace : MovableObject{public MyFace(){var uri = new Uri("/DragObject;component/Res/nowpaper.jpg", UriKind.Relative);ShowImage.Source = new System.Windows.Media.Imaging.BitmapImage(uri);

 }}public class MyCard : MovableObject{public MyCard(){LayoutRoot.Children.Insert(LayoutRoot.Children.IndexOf(ShowImage), new Card());LayoutRoot.Children.Remove(ShowImage);}}

MyFace directly modifies the Source of ShowImage, and writes an index attribute in MyIcon. This allows you to control ShowImage outside and display the image to be displayed. In MyCard, a new control is provided, and replaced the original ShowImage. MyCard uses a previously created control.

Now, other code is written in the MainPage constructor, but LayoutRoot needs to be changed to Canvas to better control the image position.

Public MainPage () {InitializeComponent (); // Add a custom drag target var icon = new MyIcon (); LayoutRoot. children. add (icon); Canvas. setLeft (icon, 20); Canvas. setTop (icon, 50); icon = new MyIcon () {IconIndex = 3}; LayoutRoot. children. add (icon); Canvas. setLeft (icon, 20); Canvas. setTop (icon, 150); var face = new MyFace (); LayoutRoot. children. add (face); Canvas. setLeft (face, 100); Canvas. setTop (face, 50); var card = new MyCard (); LayoutRoot. children. add (card); Canvas. setLeft (card, 270); Canvas. setTop (card, 50 );}

Now let's run it to see the effect. On this basis, you can create a window or an object to be dragged and only need to inherit and modify it. In the next article, you will create a window and use tips to complete the drag-in operation, don't worry.

The source code of this project is as follows: Click to download it directly.

Author of this article: Nowpaper

Recommended Silverlight game development blog: dark blue right hand