WPF/Silverlight 遊戲開發教程 (14)：打造專屬精靈控件 — XAML 結構、BorderText 描邊文字與視覺樹層級

為何需要自訂精靈控件？

遊戲物件（主角、NPC、怪物、坐騎、障礙物）屬性繁多：座標、名稱、門派、家族、血條、藍條、屬性、裝備、狀態、線程參數等。若全塞進 Tag 字串，解析效率低、擴展性差、維護困難。WPF/Silverlight 的用戶控件天生支援依賴屬性、視覺樹、樣式、模板、動畫、繫結，是封裝遊戲實體的最佳載體。

建立精靈控件專案結構

1. 專案中新增資料夾 Controls
2. 右鍵 → 新增項目 → 用戶控件 (WPF) → 命名 QXSpirit.xaml
3. 編譯後產生 QXSpirit 類別，命名空間 WPFGameCourse.Controls

XAML 視覺樹設計

<UserControl x:Class="WPFGameCourse.Controls.QXSpirit"
             xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:QXControl="clr-namespace:QX.Game.Controls;assembly=QX">
    <Canvas x:Name="Spirit">
        <!-- 角色本體圖片 -->
        <Image x:Name="Body" Width="150" Height="150"/>

        <!-- 頭頂資訊面板：StackPanel 自動垂直排列 -->
        <StackPanel Name="Describtion" Width="150" Height="58" Canvas.Top="-21">
            <!-- 門派 -->
            <QXControl:BorderText x:Name="Faction" Fill="Orchid" FontSize="12" Bold="True"
                Stroke="Black" StrokeThickness="0.1" Text="娥眉大師姐" Height="13"
                HorizontalAlignment="Center" />
            <!-- 家族 -->
            <QXControl:BorderText x:Name="Clan" Fill="DarkOrange" FontSize="12" Bold="True"
                Stroke="Black" StrokeThickness="0.1" Text="破天一劍" Height="13"
                HorizontalAlignment="Center" />
            <!-- 名字 -->
            <QXControl:BorderText x:Name="Name" Fill="SteelBlue" FontSize="12" Bold="True"
                Stroke="Black" StrokeThickness="0.1" Text="愛在後院前" Height="13"
                HorizontalAlignment="Center" />
        </StackPanel>
    </Canvas>
</UserControl>

關鍵設計決策

• Canvas 作為根容器：支援子元素絕對定位（Canvas.Left/Top/ZIndex），適合遊戲實體自由移動。
• Body (Image)：角色主圖，寬高固定 150×150，後續由後台程式動態切換 Source 實現幀動畫。
• Describtion (StackPanel)：置於 Canvas.Top="-21" 懸浮於角色頭頂，內含三行資訊（門派、家族、名字），自動垂直排版。
• 引用外部組件庫 QX.dll：xmlns:QXControl="clr-namespace:QX.Game.Controls;assembly=QX"，使用其中的 BorderText 控件。

BorderText：解決 WPF/Silverlight 中文字模糊的利器

問題背景

WPF/Silverlight 採用向量字體渲染，小字號（如 12px）TextBlock/Label 顯示偏模糊，缺乏銳利感，影響遊戲 UI 質感。

BorderText 實作原理

在文字繪製時加入 描邊：Stroke（顏色）+ StrokeThickness（粗細，double 型支援亞像素）。描邊顏色通常為黑或深色，填充色為亮色，形成類似 Photoshop「描邊」效果，大幅提升可讀性與美觀度。

效果對比

程式碼對比

<!-- 普通 TextBlock -->
<TextBlock FontSize="48" FontFamily="微軟雅黑" Text="深藍色" Foreground="Pink" />

<!-- BorderText -->
<QXControl:BorderText FontSize="48" Stroke="Black" StrokeThickness="1.5"
    Text="深藍色" Fill="Pink" />

右側 BorderText 版本顯著優於左側。後續教程所有遊戲文字均採用 BorderText。

ZIndex 層級規劃

• Map（地圖背景）：ZIndex = -1
• 一般精靈/障礙物：ZIndex = 0~1000（動態依據 Y 座標調整，實現畫家演算法：近遮遠）
• Mask（遮罩層/樹木遮擋）：ZIndex = 10000 固定高層
• UI/HUD：ZIndex > 20000

精靈控件內部 Body 與 Describtion 同層級，依 XAML 宣告順序疊加（Describtion 在後，顯示於上方）。

下章預告

下一章將實作 QXSpirit.xaml.cs 後台邏輯：依賴屬性 X/Y、DispatcherTimer 幀驅動、ImageAddress 圖片源管理，並完成牽引式地圖模式下精靈與障礙物的跟隨渲染邏輯。

1. 上一篇文章： WPF/Silverlight 遊戲開發教程 (15)：精靈控件核心實作 — 依賴屬性、專屬執行緒與地圖跟隨邏輯
2. 下一篇文章： WPF/Silverlight 遊戲開發教程 (13)：牽引式地圖移動模式 — 雙重實作與虛擬攝影機原理

關於C#

C# 陣列屬性、foreach 遍歷與交錯陣列 vs 矩形陣列完整解析

陣列是 C# 中最基礎的資料結構之一。本文系統整理陣列的核心

C# 仿 QQ 面板延伸：水平摺疊拉幕式視窗實作

前言 將垂直 QQ 面板旋轉 90 度，即成為水平摺疊的「拉

LINQ to SQL GroupBy 入門：分組機制、延遲載入與 SQL 轉換原理解析

GroupBy 基本語法 var q = from p i

C# 開發智慧型手機推箱子遊戲 (六) - Pub 靜態類與全域路徑管理

Pub 靜態類：專案的「全域常數中心」 在 Common/P