基於WPF系統框架設計(3)-Fluent Ribbon界面佈局

一個系統框架除了功能菜單導航，有系統內容顯示區域，系統狀態欄。

Silver:

Blue:

Black:

系統界面設計，就不進行技術細節介紹了，主題以框架設計爲主，Xaml源碼參考:

<Fluent:RibbonWindow x:Class="TLAgent.SecurityManager.WPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://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" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <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}" Icon="Images\Gray.png" LargeIcon="Images\GrayLarge.png" Name="BtnQueryRole" />
                    <Fluent:Button Header="添加角色" Command="{Binding AddFunctionCommand}" Icon="Images\Green.png" LargeIcon="Images\GreenLarge.png" Name="BtnAddRole" />
                    <Fluent:Button Header="更新角色" Command="{Binding OpenCommand}" Icon="Images\Gray.png" LargeIcon="Images\GrayLarge.png" 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}" Icon="Images\Gray.png" LargeIcon="Images\GrayLarge.png" Name="BtnQueryDept" />
                    <Fluent:Button Header="添加部門" Command="{Binding AddFunctionCommand}" Icon="Images\Green.png" LargeIcon="Images\GreenLarge.png" Name="BtnAddDept" />
                    <Fluent:Button Header="更新部門" Command="{Binding OpenCommand}" Icon="Images\Gray.png" LargeIcon="Images\GrayLarge.png" 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>
        <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>

換膚仍是調接口ChangeTheme來實現換膚功能。

namespace TLAgent.SecurityManager.WPF
{
    /// <summary>
    /// Interaction logic for App.xaml
    /// </summary>
    public partial class App : Application
    {
        protected override void OnStartup(StartupEventArgs e)
        {
            ThemeManager.ChangeTheme(ThemeStyle.Black);
            base.OnStartup(e);
        }
    }
}

後續總結一些關於MVVM的技術。

實例源碼