基于WPF系统框架设计(3)-Fluent Ribbon界面布局

摘要:
流利RowDefinitionHeight=“*”/>RowDefinitionHeight=“自动”/>名称=“ribbon”>QuickAccessMenuItemTarget=“{BindingElementName=BtnModifyPassword}”/>Ribbon.QuickAccessItems>(P) “>(P)”>

一个系统框架除了功能菜单导航,有系统内容显示区域,系统状态栏。

Silver:

ui

Blue:

uiBlue

Black:

uiBlack

系统界面设计,就不进行技术细节介绍了,主题以框架设计为主,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的技术微笑

实例源码

免责声明:文章转载自《基于WPF系统框架设计(3)-Fluent Ribbon界面布局》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇一文读懂PostgreSQL-12分区表rabbitmq系列——(2 多生产多消费)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

win10安装JDK

 1.下载 首先,在官网下载 JDK:Oracle 官网   如上图所示,在 Oracle 官网下载 JDK,有一点需要注意,那就是在咱们下载合适的 JDK 之前,需要先点击“标记1”所在的按钮,选择接受。否则的话,直接点击 JDK 进行下载的时候,将会弹出如下界面: 下载之前,需要先选择“Accept License Agreement”(见上图红色...

java跨域问题

javaWeb项目跨域问题解决方案:   1.简单的servlet项目 1.配置一个filter过滤器,过滤所有的请求,并且设置响应头 package Filter; import javax.servlet.*; import javax.servlet.http.HttpServletResponse; import java.io.IOExcep...

Qt QWidget控件透明动画实现

QWidget控件透明动画实现 要做子控件透明需要用到QGraphicsOpacityEffect类 使用例子如下代码: QGraphicsOpacityEffect * m_pGraphicsOpacityEffect1; QPropertyAnimation * m_pOpacityAnimation1; m_pGraphicsOpacityEf...

springboot中使用h2数据库(内存模式)

使用H2的优点,不需要装有服务端和客户端,在项目中包含一个jar即可,加上初始化的SQL就可以使用数据库了 在springboot中引入,我的版本是2.1.4,里面就包含有h2的版本控制 <!-- 集成h2数据库 --> <dependency> <groupId>c...

Spring Boot 统一异常这样处理和剖析,安否?

话说异常 「欲渡黄河冰塞川,将登太行雪满天」,无论生活还是计算机世界难免发生异常,上一篇文章RESTful API 返回统一JSON数据格式 说明了统一返回的处理,这是请求一切正常的情形;这篇文章将说明如何统一处理异常,以及其背后的实现原理,老套路,先实现,后说明原理,有了上一篇文章的铺底,相信,理解这篇文章就驾轻就熟了 实现 新建业务异常 新建 Bus...

前端js实现打印excel表格

产品原型: 图片.png 功能需求:点击导出考勤表格按钮,会自动下载成Excel格式 图片.png 图片.png jsp页面代码: <div class="tools"> <button type="button" onclick="method5('dataTable')">导出考勤表</but...