WPF/Silverlight 遊戲開發教程 (二十二-1)：重構啟動 — 統一代碼風格、引入 CSS 思維、消除磁盤碎片化代碼

第 21 節模式大變身雖表面游刃有餘，但代碼內部日益鬆散、結構稀疏，如同 Windows 磁盤碎片堆積。代碼發出求救信號 — 是時候亮劍，進行第一次親密重構。

重構切入點：InitMapSurface() 風格混亂樣本

// 前 3 行：MapSurface.屬性 = 值
MapSurface.Width = 1750;
MapSurface.Height = 1440;
MapSurface.Source = ...;

// 後 3 行：Canvas.SetXXX / SetValue 混用
Carrier.Children.Add(MapSurface);
Canvas.SetLeft(MapSurface, -320);
Canvas.SetTop(MapSurface, -200);
MapSurface.SetValue(Canvas.ZIndexProperty, -1); // 為何不寫 Canvas.SetZIndex？

不足 10 行已達「神出鬼沒」地步，唯有作者能維護。重構三步走：

1. 分析：三行 Canvas 代碼本質

• Canvas.SetLeft → 圖片左上角距視窗 X 距離
• Canvas.SetTop → 圖片左上角距視窗 Y 距離
• Canvas.ZIndexProperty → 圖層深度 (層次)

賦值範圍均為整數 (正/負/零)。

2. 思考：WPF/Silverlight 共用 XAML 的啟示

桌面與瀏覽器兩種形態共用表現層設計，讓人聯想到網頁 CSS 佈局模型。

3. 比較：CSS left/top/z-index 與 Canvas 異曲同工

網頁 position:absolute + left/top/z-index 實現絕對定位；Canvas 內部佈局同為基於點的絕對定位 — 兩者仿若一物。

下節將基於此洞察，為 QXMap 封裝 Left/Top/ZIndex 屬性，統一代碼風格，讓代碼插上翅膀自由飛翔。