WPF 企業級框架實戰（3）：Fluent Ribbon 界面佈局與三套主題無縫切換

前言

繼 HelloWorld 後，本文完成企業級應用標準框架的 三大核心區域佈局：Ribbon 導航列、內容顯示區、狀態列，並實現 Silver / Blue / Black 三套 Office 2010 風格主題一鍵切換。

三大區域架構圖

三種主題效果**：

MainWindow.xaml：完整宣告式佈局

<Fluent:RibbonWindow x:Class="TLAgent.SecurityManager.WPF.MainWindow"
        xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Fluent="clr-namespace:Fluent;assembly=Fluent"
        Title="用戶權限管理系統" Height="350" Width="525"
        Icon="/TLAgent.SecurityManager.WPF;component/Images/usergroup.ico">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>  <!-- Ribbon -->
            <RowDefinition Height="*"/>     <!-- 內容區 -->
            <RowDefinition Height="Auto"/>  <!-- StatusBar -->
        </Grid.RowDefinitions>

        <!-- Ribbon -->
        <Fluent:Ribbon Grid.Row="0" AutomaticStateManagement="True" x:Name="ribbon">
            <Fluent:Ribbon.QuickAccessItems>
                <Fluent:QuickAccessMenuItem Target="{Binding ElementName=BtnSecManager}"/>
                <Fluent:QuickAccessMenuItem Target="{Binding ElementName=BtnModifyPassword}"/>
            </Fluent:Ribbon.QuickAccessItems>

            <Fluent:RibbonTabItem Header="用戶管理" ReduceOrder="(P),(P),(P),(P),(P)">
                <Fluent:RibbonGroupBox Header="User Group">
                    <Fluent:Button Header="查詢用戶" Command="{Binding OpenCommand}"
                                   Icon="Images\Gray.png" LargeIcon="Images\GrayLarge.png" Name="BtnQueryUser"/>
                    <Fluent:Button Header="添加用戶" Command="{Binding AddFunctionCommand}"
                                   Icon="Images\Green.png" LargeIcon="Images\GreenLarge.png" Name="BtnAddUser"/>
                    <Fluent:Button Header="更新用戶" Command="{Binding OpenCommand}"
                                   Icon="Images\Gray.png" LargeIcon="Images\GrayLarge.png" Name="BtnModifyUser"/>
                </Fluent:RibbonGroupBox>
            </Fluent:RibbonTabItem>

            <Fluent:RibbonTabItem Header="角色管理" ReduceOrder="(P),(P),(P),(P),(P)">
                <Fluent:RibbonGroupBox Header="Role Group">
                    <Fluent:Button Header="查詢角色" Command="{Binding OpenCommand}" ... Name="BtnQueryRole"/>
                    <Fluent:Button Header="添加角色" Command="{Binding AddFunctionCommand}" ... Name="BtnAddRole"/>
                    <Fluent:Button Header="更新角色" Command="{Binding OpenCommand}" ... Name="BtnModifyRole"/>
                </Fluent:RibbonGroupBox>
            </Fluent:RibbonTabItem>

            <Fluent:RibbonTabItem Header="部門管理" ReduceOrder="(P),(P),(P),(P),(P)">
                <Fluent:RibbonGroupBox Header="Department Group">
                    <Fluent:Button Header="查詢部門" Command="{Binding OpenCommand}" ... Name="BtnQueryDept"/>
                    <Fluent:Button Header="添加部門" Command="{Binding AddFunctionCommand}" ... Name="BtnAddDept"/>
                    <Fluent:Button Header="更新部門" Command="{Binding OpenCommand}" ... Name="BtnModifyDept"/>
                </Fluent:RibbonGroupBox>
            </Fluent:RibbonTabItem>

            <Fluent:RibbonTabItem Header="系統管理" ReduceOrder="(P),(P),(P),(P),(P)">
                <Fluent:RibbonGroupBox Header="Security Group">
                    <Fluent:Button Header="系統日誌" Command="{Binding AddFunctionCommand}"
                                   Icon="Images\systemlog.ico" LargeIcon="Images\systemlog.ico" Name="BtnSecManager"/>
                    <Fluent:Button Header="更改密碼" Command="{Binding OpenCommand}"
                                   Icon="Images\changePassword.ico" LargeIcon="Images\changePassword.ico" Name="BtnModifyPassword"/>
                </Fluent:RibbonGroupBox>
                <Fluent:RibbonGroupBox Header="System Group">
                    <Fluent:Button Header="退出系統" Width="80" Command="{Binding AddFunctionCommand}"
                                   Icon="Images\close.png" LargeIcon="Images\close.png"/>
                </Fluent:RibbonGroupBox>
            </Fluent:RibbonTabItem>
        </Fluent:Ribbon>

        <!-- 內容區 (此處預留，後續整合 AvalonDock) -->
        <Grid Grid.Row="1" />

        <!-- StatusBar -->
        <Fluent:StatusBar HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Grid.Row="2">
            <Fluent:StatusBarItem Title="Words Width" Value="150" HorizontalAlignment="Left">
                <TextBlock Text="Message" />
            </Fluent:StatusBarItem>
        </Fluent:StatusBar>
    </Grid>
</Fluent:RibbonWindow>

主題切換：統一入口 ThemeManager.ChangeTheme

// App.xaml.cs
public partial class App : Application
{
    protected override void OnStartup(StartupEventArgs e)
    {
        ThemeManager.ChangeTheme(ThemeStyle.Black); // 啟動時套用預設主題
        base.OnStartup(e);
    }
}

// 任意位置切換 (如設定視窗、快捷鍵)
ThemeManager.ChangeTheme(ThemeStyle.Silver);

ThemeManager 實作核心**：合併 ResourceDictionary，同時替換 Fluent Ribbon 與 AvalonDock (若已整合) 的主題資源。

設計要點總結

1. ReduceOrder="(P),(P),(P),(P),(P)"：控制 Ribbon 群組在視窗縮小時的壓縮優先序 (P=Populate, 彈出選單)。
2. QuickAccessMenuItem Target Binding：將 Ribbon 按鈕固定至快速存取工具列，使用者可自訂常用功能。
3. Backstage (Application Menu)：取代傳統檔案選單，承載應用程式層級操作 (退出、設定、資訊)。
4. Command 綁定而非 Click 事件**：為 MVVM 整合鋪路，ViewModel 統一處理業務邏輯。
5. 主題集中管理**：避免硬編碼 ResourceDictionary 路徑，支援運行期熱切換。

範例原始碼**：TLAgent.SecurityManager.WPF.Layout.Demo.rar