zoukankan      html  css  js  c++  java
  • Fluent Ribbon界面布局

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

    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);
            }
        }
    }
  • 相关阅读:
    shell进行mysql统计
    java I/O总结
    Hbase源码分析:Hbase UI中Requests Per Second的具体含义
    ASP.NET Session State Overview
    What is an ISAPI Extension?
    innerxml and outerxml
    postman
    FileZilla文件下载的目录
    how to use webpart container in kentico
    Consider using EXISTS instead of IN
  • 原文地址:https://www.cnblogs.com/happyyftk/p/6904305.html
Copyright © 2011-2022 走看看