基于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的技术。
基于WPF系统框架设计(3)-Fluent Ribbon界面布局的更多相关文章
- 基于WPF系统框架设计(2)-Fluent Ribbon之HelloWorld
Fluent/Ribbon是微软在其最新桌面操作系统Windows 7中使用的图形用户界面. Windows平台的进化,伴随着系统图形界面的重新设计.从Windows XP到Windows Vista ...
- 基于WPF系统框架设计(5)-Ribbon整合Avalondock 2.0实现多文档界面设计(二)
AvalonDock 是一个.NET库,用于在停靠模式布局(docking)中排列一系列WPF/WinForm控件.最新发布的版本原生支持MVVM框架.Aero Snap特效并具有更好的性能. Ava ...
- 基于WPF系统框架设计(1)-为什么要仿Office2010 Ribbon?
为什么系统框架设计使用Ribbon导航模式? 这得从Office软件的演变说起.微软为什么最后选择使用Ribbon,也许就是很多系统设计要使用Ribbon做功能导航的原因. 你是否还记得曾经使用过的M ...
- 基于WPF系统框架设计(4)-Ribbon整合Avalondock 2.0实现多文档界面设计(一)
前些时间研究了WPF的一些框架,感觉基于Prism框架的MVVM模式对系统的UI与逻辑分离很好,所以就按照之前Winform的框架设计,用WPF做了一套,感觉比Winform要强很多. MVVM模式和 ...
- 基于WPF系统框架设计(6)-整合MVVM框架(Prism)
应用场景 我们基础的框架已经搭建起来了,现在整合MVVM框架Prism,在ViewModel做一些逻辑处理,真正把界面设计分离出来. 这样方便我们系统开发分工合作,同时提高系统可维护性和灵活性. 具体 ...
- 基于WPF系统框架设计(9)-多值绑定之IMultiValueConverter
应用场景 我想把View层的一个布局控件和功能按钮传到ViewModel层,达到动态变更布局,同时灵活获取功能按钮的属性,让View和ViewModel完全分离,而不受View层影响. 最后我想到使用 ...
- 基于WPF系统框架设计(8)-PasswordBox传值到ViewMode
应用场景 我要做一个系统登录功能,需要传用户名和密码到ViewModel中,可是PasswordBox传值到ViewModel中好像跟TextBox等控件不一样.这里需要用到附加属性. 附加属性:一个 ...
- 基于WPF系统框架设计(7)-TextBox/PasswordBox在ViewModel中支持回车命令
应用场景 我现在做一个系统登录功能,要求在PasswordBox上输完密码后回车,能够响应Enter事件,并执行ViewModel中对应的方法.如果登录成功则隐藏当前窗口显示主窗体,登录失败则焦点返回 ...
- 基于WPF系统框架设计(10)-分页控件设计
背景 最近要求项目组成员开发一个通用的分页组件,要求是这个组件简单易用,通用性,兼容现有框架MVVM模式,可是最后给我提交的成果勉强能够用,却欠少灵活性和框架兼容性. 设计的基本思想 传入数据源,总页 ...
随机推荐
- heap&stack的区别
1. heap (堆)是一个可动态申请的内存空间,一般所有创建的对象和数组都放在这里.stack (栈)是一个先进后出的数据结构,通常用于保存方法(函数)中的参数,局部变量.stack (栈)的空间小 ...
- SQLAlchemy Script
SQLAlchemy: 1.由于sqlalchemy中没有提供choice方法,所以借助SQLAlchemy-Utils组件提供的choice方法 from sqlalchemy_utils impo ...
- Falsk
flask: 1.配置文件的几种方式: 1.app.config['DEBUG'] =True 2.app.config.from_pyfile("setting.py") 3.a ...
- 一个漂亮的PHP验证码
自己导入字体,可以按照自己的额需要随便修改. <?php class Imagecode{ private $width ; private $height; private $counts; ...
- MongoDB快速入门学习笔记4 MongoDB的文档查询操作
先把student删除,再重新插入数据 > db.student.drop() true > db.student.insert([{ "_id" : 1, " ...
- IOS架构
iPhone OS(现在叫iOS)是iPhone, iPod touch 和 iPad 设备的操作系统. 1,Core OS: 是用FreeBSD和Mach所改写的Darwin, 是开源.符合POSI ...
- python - 接口自动化测试 - TestRegister - 注册接口测试用例
# -*- coding:utf-8 -*- ''' @project: ApiAutoTest @author: Jimmy @file: test_register.py @ide: PyChar ...
- hnust 懒人多动脑
问题 F: 懒人得多动脑 时间限制: 1 Sec 内存限制: 128 MB提交: 93 解决: 30[提交][状态][讨论版] 题目描述 小D的家A和学校B都恰好在以点F为焦点的双曲线上,而小D每 ...
- C#控制台程序读取项目中文件路径
//使用appdomain获取当前应用程序集的执行目录 string dir = AppDomain.CurrentDomain.BaseDirectory; //使用path获取当前应用程序集的执行 ...
- mybatis经验