C#開發WPF/Silverlight動畫及遊戲系列教程(Game Tutorial)：(四十五)

C#開發WPF/Silverlight動畫及遊戲系列教程(Game Tutorial)：(四十五)製作精美的可任意拖放對象的物品欄及裝備欄

在通常的網路遊戲中，物品、裝備、技能、快捷按鈕等視窗中的表徵圖都是可以相互拖放的，不同的欄目有著不同的限制，例如技能表徵圖不能拖放到物品欄及裝備欄中，且不是所有的魔法技能都可以拖放（如被動技能等）；而非裝備類的所有物品則無法拖放到角色的裝備欄中。那麼本節我將向大家講解如何在本教程樣本遊戲中添加物品欄及裝備欄，並實現它們之間雙向物品交換的兩種模式：拖放模式和雙擊模式。

首先製作物品欄。這裡我使用的是官方的工具toolkit:ListBoxDragDropTarget，只需設定它的DragDrop.AllowDrop="True"，那麼它內部的ListBox類型容器中的所有Item將均可以被拖放。相關樣本大家可以參考紫色永恒的這篇文章：最新Silverlight Toolkit中的Drag&Drop支援。

僅僅使用ListBox的預設配置還是與實際遊戲中的物品欄容器顯示相距太遠，物品欄直觀上給我們的印象是一個N*M的網格形容器，裡面的對象是表徵圖，對內對外都應能做到任意拖放。為了滿足上述需求，我們還得在ListBox的模版改造上下些工夫。

預設情況下， ListBoxDragDropTarget內部拖放時並不能作用於virtualized容器（ListBox的預設容器），因此我們首先需要重寫ItemsPanel 的ItemsPanelTemplate來實現ListBox內部子物件之間能相互拖放：

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

問題又來了，StackPanel僅能實現水平或豎直方向上的子控制項排列，仔細想想，要是它能折行，不也是一個網格嗎？既要Panel類型，又要具備折行功能，當然非WrapPanel莫屬。下面只需將<StackPanel />換成<toolkit:WrapPanel Orientation="Horizontal" />即可。同時，我們還必須讓該ListBox背景透明且去掉它的捲軸：Background="Transparent" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled"才算完美。

物品欄介面製作完了，如何對它內部進行物品顯示呢？這裡需要用到ObservableCollection<QXIcon>對象作為ListBox的子控制項資料來源，為什麼選擇ObservableCollection<>而不是List<>等普通列表對象呢？因為ObservableCollection<>在內部子物件變化時會即時提交反饋給介面執行重繪更新，而List則不會，大家不妨自行嘗試一下，可以體會到ObservableCollection<>是相當優雅的。

接下來，在遊戲中我為主角定義了一個屬性記錄它現有的所有物品代號，當初始化物品欄時，遊戲將讀取這些代號，並從xml中的物品詳細資料中查出相應的資料，例如：

<Items>
<Item　Code="0"　Categoriy="1"　IconCode="45"　EquipCode="0"　Name="武威之逐日衣"　Description="★★★★☆閃避很高"　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="46"　EquipCode="0"　Name="劍影風紗"　Description="很漂亮哦，防禦很高"　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="47"　EquipCode="0"　Name="滅神之刃"　Description="小心，很容易秒殺"　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="48"　EquipCode="1"　Name="幻影狂刀"　Description="速度極快，殺人無數"　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="49"　EquipCode="0"　Name="腰帶1"　Description="作者無敵懶"　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="50"　EquipCode="1"　Name="腰帶2"　Description="作者無敵懶"　Value="0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0"></Item>
……
</Items>

其中Value值中的資料一一對應影響主角的21個基本屬性，最後將這些賦予QXIcon，再將所有的QXIcon綁定到物品欄的ObservableCollection<QXIcon>中，到此就全部實現了物品欄對主角所持物品的顯示：