C# 開發 WPF/Silverlight 動畫與遊戲教學 (45-1)：物品欄與裝備欄拖放系統設計 (上)

物品欄與裝備欄雙向拖放系統架構設計

網遊核心 UI 系統：物品、裝備、技能、快捷列圖標皆支援拖放交互，且有嚴格類型限制 (技能不可放物品欄、非裝備不可穿戴等)。

一、物品欄核心實現：ListBoxDragDropTarget + WrapPanel

基礎設定：

<toolkit:ListBoxDragDropTarget x:Name="dragDropTarget" AllowDrop="True">
  <ListBox x:Name="listBox" Background="Transparent" 
    ScrollViewer.HorizontalScrollBarVisibility="Disabled"
    ScrollViewer.VerticalScrollBarVisibility="Disabled">
    <ListBox.ItemsPanel>
      <ItemsPanelTemplate>
        <toolkit:WrapPanel Orientation="Horizontal" />  <!-- 關鍵：替換預設 StackPanel -->
      </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
  </ListBox>
</toolkit:ListBoxDragDropTarget>

關鍵點：

1. WrapPanel 實現網格狀自動換行 (StackPanel 無法換行)
2. 背景透明 + 隱藏捲軸 → 純淨網格容器視覺

二、資料綁定：ObservableCollection 優勢

ObservableCollection itemIcons = new ObservableCollection();
listBox.ItemsSource = itemIcons;

優於 List<T>：集合變更 (增/刪/移動) 自動觸發 UI 更新，無需手動 Refresh。

三、物品數據結構與 XML 範例

<Items>
  <Item Code="0" Category="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 Code="1" Category="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 Code="2" Category="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" />
  ...
</Items>

• Value：21 個屬性修正值，對應角色基礎屬性
• EquipCode：0=非裝備/消耗品，1=可裝備
• Category：分類索引 (0=武器、1=防具、2=飾品等)

四、初始化流程

1. 讀取角色持有物品代碼列表
2. 查詢 XML 獲取完整屬性
3. 建構 QXIcon (圖片、Tooltip、Tag 攜帶完整物品數據)
4. 加入 ObservableCollection 綁定顯示

下一節將講解裝備欄不規則佈局與雙向拖放驗證邏輯。