C # development Wpf/silverlight animation and games series Tutorials (Game Tutorial): (45)

C # Development of Wpf/silverlight Animation and games series (Game Tutorial): (45) The production of exquisite can be arbitrarily drag and drop objects and equipment bar

In the usual online games, items, equipment, skills, shortcut buttons and other icons in the window can be dragged and placed, different columns have different restrictions, such as the skill icon can not be dragged and placed in the article bar and equipment bar, and not all magic skills can be dragged and put (such as passive skills, etc.) , not all items in the equipment class can be dragged into the character's equipment bar. In this section, I'll show you how to add the items column and the device bar to the tutorial example game and implement two modes of two-way item exchange between them: drag-and-drop mode and double-click mode.

First make the item bar. Here I use the official tool Toolkit:listboxdragdroptarget, just set its dragdrop.allowdrop= "True", then all the item in the ListBox type container inside it can be dragged and dropped. For a related example, you can refer to the Purple Eternity article: Drag&drop support in the latest Silverlight toolkit.

Only use the default configuration of the ListBox or with the actual game of the items bar container display is too far away, the object column intuitively give us the impression is a n*m grid descriptor, the inside object is an icon, internal and external should be able to do arbitrary drag and drop. In order to meet the above requirements, we have to work on the template version of the ListBox.

By default, Listboxdragdroptarget internal drag and drop does not work on the virtualized container (the default container for the listbox), so we first need to rewrite the Itemspanel Itemspaneltemplate to implement a drag-and-drop between child objects within the listbox:

<toolkit:ListBoxDragDropTarget　x:Name="dragDropTarget"　window:DragDrop.AllowDrop="True">
　<ListBox　x:Name="listBox"　……>
　　<ListBox.ItemsPanel>
　　　<ItemsPanelTemplate>
　　　　<StackPanel　/>
　　　</ItemsPanelTemplate>
　　</ListBox.ItemsPanel>
　</ListBox>
</toolkit:ListBoxDragDropTarget>

The problem again, StackPanel can only achieve horizontal or vertical direction of the child control arrangement, think about it, if it can be folded line, is not a grid? Not only the panel type, but also the function of folding line, of course, WrapPanel mo. Just replace the <stackpanel/> with <toolkit:wrappanel orientation= "Horizontal"/>. At the same time, we must also make the listbox background transparent and remove its scroll bar: background= "Transparent" scrollviewer.horizontalscrollbarvisibility= "Disabled" Scrollviewer.verticalscrollbarvisibility= "Disabled" is perfect.

The article bar interface is finished, how to show it inside? Here you need to use the Observablecollection<qxicon> object as a child control data source for the ListBox, why choose observablecollection<> instead of list<> What about normal list objects? Because observablecollection<> in the internal child object changes will be submitted immediately feedback to the interface to perform redraw updates, and the list is not, you may wish to try it, you can experience the observablecollection<> is quite elegant.

Next, in the game I defined a property for the protagonist to record all of its existing code names, when the object column, the game will read the code, and from the XML in the details of the object to find the appropriate data, such as:

<Items>
<item code= "0" categoriy= "1" iconcode= "equipcode=" 0 "name=" the Daily clothes of Wuwei "description=" ★★★★☆ Dodge very High "value=" 0,0,0,0,200,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 "></Item>
<item code= "1" categoriy= "1" iconcode= "equipcode=" 0 "name=" Sword Shadow Wind Yarn "description=" very beautiful Oh, defense is very high "value=" 0,0,0,0,0,0,0,0,0,200,0,0,0,0,0,0,0,0,0,0,0 "></Item>
<item code= "2" categoriy= "0" iconcode= "equipcode=" 0 "name=" The Blade of the Gods "description=" beware, it is easy to kill "value=" 0,1450,8044,10,10,0,0,0,0,0,0,0,0,0,0,20,0,0,0,0,0 "></Item>
<item code= "3" categoriy= "0" iconcode= "equipcode=" 1 "name=" phantom Crazy Knife "description=" very fast, killing countless "value=" 0,300,400,10,10,0,-200,0,0,0,0,0,0,0,0,20,0,0,0,0,0 "></Item>
<item code= "4" categoriy= "2" iconcode= "equipcode=" 0 "name=" Belt 1 "description=" the author is Invincible lazy "value=" 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 "></Item>
<item code= "5" categoriy= "2" iconcode= "equipcode=" 1 "name=" Belt 2 "description=" the author is Invincible lazy "value=" 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 "></Item>
......
</Items>

Where the value of the value of one by one corresponding to the impact of the 21 basic attributes of the protagonist, and finally give these qxicon, and then bind all Qxicon to the observablecollection<qxicon> of the item bar, This is the realization of the article bar to the protagonist of the display of objects: