C# 開發 WPF/Silverlight 動畫與遊戲教學 (44-2)：自訂 TabControl 與選項卡切換實現

編輯：關於C語言

QXTabControl：輕量級選項卡控件完整實現

避開 Silverlight 原生 TabControl 複雜的樣板重寫，採用用戶控件 + QXIcon 實現高自由度選項卡系統。

一、控件結構設計

<UserControl x:Class="QXGameEngine.Control.QXTabControl" ...>
  <Canvas>
    <StackPanel x:Name="Head"/>  <!-- 標籤容器，支援橫向/縱向 -->
    <ContentPresenter x:Name="Body"/>  <!-- 內容呈現區 -->
  </Canvas>
</UserControl>

StackPanel 管理標籤佈局，Orientation 切換橫向/縱向
ContentPresenter 作為萬用內容容器，動態切換面板

二、選項卡項目實現：QXIcon HitModes 模式

參考《劍俠世界》風格，四狀態圖片切換 (預設、懸停、選中、選中懸停)：

case IconTypes.HitModes:
    this.MouseEnter += (s, e) => { Container.Background = Hit ? HitNewBodySource : NewSource; };
    this.MouseLeave += (s, e) => { Container.Background = Hit ? HitBodySource : _BodySource; };
    this.MouseLeftButtonDown += (s, e) => { Hit = !Hit; };
    break;

三、選項卡集合管理與切換事件

List tabItemList = new List();

public delegate void SelectionChangedEventHandler(object sender, QXIcon tabItem);
public event SelectionChangedEventHandler SelectionChanged;

// 點擊邏輯
tabItem.MouseLeftButtonDown += (sender, e) => {
    foreach (QXIcon icon in tabItemList) {
        if (icon == sender) {
            icon.Hit = true;
            icon.Container.Background = icon.HitNewBodySource;
        } else {
            icon.Hit = false;
            icon.Container.Background = icon.BodySource;
        }
    }
    SelectionChanged(this, sender as QXIcon);
    e.Handled = true;
};

四、主角屬性面板整合範例

QXTabControl tc = new QXTabControl() {
    TabItemOrientation = Orientation.Horizontal,
    TabItemHeight = 28,
    BodyLeft = -4,
    BodyTop = 27
};

tc.AddItem(63, 28, 1, "/Image/Icon/39.png", "/Image/Icon/40.png", "/Image/Icon/41.png", "/Image/Icon/42.png", "屬 性");
tc.AddItem(63, 28, 1, "/Image/Icon/39.png", "/Image/Icon/40.png", "/Image/Icon/41.png", "/Image/Icon/42.png", "聲 望");
tc.AddItem(63, 28, 1, "/Image/Icon/39.png", "/Image/Icon/40.png", "/Image/Icon/41.png", "/Image/Icon/42.png", "稱 號");
tc.AddItem(63, 28, 1, "/Image/Icon/39.png", "/Image/Icon/40.png", "/Image/Icon/41.png", "/Image/Icon/42.png", "榮 譽");

tc.SelectionChanged += (sender, item) => {
    QXTabControl tabControl = sender as QXTabControl;
    switch (item.Text) {
        case "屬 性": tabControl.SetBody(leaderAttributePart); break;
        case "聲 望": tabControl.SetBody(new Canvas() { Background = new ImageBrush() { ImageSource = Super.GetImage("/Image/Plate/RoleAttributeBack1.png") }, Width = 350, Height = 389 }); break;
        case "稱 號": tabControl.SetBody(new Canvas() { Background = new ImageBrush() { ImageSource = Super.GetImage("/Image/Plate/RoleAttributeBack2.png") }, Width = 350, Height = 389 }); break;
        default: tabControl.SetBody(null); break;
    }
};