基于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="ImagesGray.png" LargeIcon="ImagesGrayLarge.png" Name="BtnQueryUser" />
                    <Fluent:Button Header="添加用户" Command="{Binding AddFunctionCommand}" Icon="ImagesGreen.png" LargeIcon="ImagesGreenLarge.png" Name="BtnAddUser" />
                    <Fluent:Button Header="更新用户" Command="{Binding OpenCommand}" Icon="ImagesGray.png" LargeIcon="ImagesGrayLarge.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="ImagesGray.png" LargeIcon="ImagesGrayLarge.png" Name="BtnQueryRole" />
                    <Fluent:Button Header="添加角色" Command="{Binding AddFunctionCommand}" Icon="ImagesGreen.png" LargeIcon="ImagesGreenLarge.png" Name="BtnAddRole" />
                    <Fluent:Button Header="更新角色" Command="{Binding OpenCommand}" Icon="ImagesGray.png" LargeIcon="ImagesGrayLarge.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="ImagesGray.png" LargeIcon="ImagesGrayLarge.png" Name="BtnQueryDept" />
                    <Fluent:Button Header="添加部门" Command="{Binding AddFunctionCommand}" Icon="ImagesGreen.png" LargeIcon="ImagesGreenLarge.png" Name="BtnAddDept" />
                    <Fluent:Button Header="更新部门" Command="{Binding OpenCommand}" Icon="ImagesGray.png" LargeIcon="ImagesGrayLarge.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="Imagessystemlog.ico" LargeIcon="Imagessystemlog.ico" Name="BtnSecManager" />
                    <Fluent:Button Header="更改密码" Command="{Binding OpenCommand}" Icon="ImageschangePassword.ico" LargeIcon="ImageschangePassword.ico" Name="BtnModifyPassword" />
                </Fluent:RibbonGroupBox>
                <Fluent:RibbonGroupBox Header="System Group">
                    <Fluent:Button Header="   退出系统  " Width="80" Command="{Binding AddFunctionCommand}" Icon="Imagesclose.png" LargeIcon="Imagesclose.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的技术。

实例源码