WPF-VisualStudio-C#-Fluent.Ribbon8.0.0学习

概述

Fluent.Ribbon 是一个开源的 .NET 控件库，专门用于创建具有现代化 Microsoft Office 风格用户界面的 WPF（Windows Presentation Foundation）应用程序。它实现了 Office 中的 "Fluent Design" 设计语言和 Ribbon 界面模式。项目地址

包

包名：Fluent.Ribbon 版本：8.0.0

包名：MahApps.Metro.IconPacks.Material 版本：4.0.0

包名：MahApps.Metro 版本：2.0.0

App.xaml

设置主题

xml 复制代码

<prism:PrismApplication x:Class="OsisBim.Shell.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             ShutdownMode="OnMainWindowClose"
             xmlns:prism="http://prismlibrary.com/">
    <!--主题配置文件-->
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Fluent;Component/Themes/Generic.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</prism:PrismApplication>

MainWindow.xaml

把"Window"标记改为"Fluent:RibbonWindow"

xml 复制代码

<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"
        xmlns:controlzEx="urn:controlzex" 
        xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks" 
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes" 
        
        Title="MainWindow" Height="350" Width="525">
    <Grid>
     
    </Grid>
</Fluent:RibbonWindow>

MainWindow.xaml.cs

把继承Window改成继承RibbonWindow

csharp 复制代码

    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : RibbonWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }

Fluent:Ribbon每个控件的概述

xml 复制代码

<Fluent:Ribbon x:Name="ribbon">
	<!--上下文选项卡组是一种特殊选项卡，仅在特定上下文（如选中图片、表格等）时显示。
	例如在 Word 中选中图片时，会动态出现"图片工具"选项卡。-->
	<Fluent:Ribbon.ContextualGroups>
	
	</Fluent:Ribbon.ContextualGroups>
    <!--启动屏幕是点击 Ribbon 左上角的"文件"按钮时弹出的全屏菜单。
   通常用于放置文件操作（如新建、保存、打印）、设置和退出命令。-->
   <Fluent:Ribbon.StartScreen>
   
   </Fluent:Ribbon.StartScreen>
    <!--作用：定义 应用程序菜单（早期版本的 Backstage）。
   说明：
   位于 Ribbon 左上角，通常包含文件操作和全局设置。
   在较新版本中，建议使用 StartScreen 替代 Menu 以实现更现代的 Backstage 视图。-->
   <Fluent:Ribbon.Menu>
       
   </Fluent:Ribbon.Menu>
   <!--作用：向 Ribbon 窗口的 标题栏工具栏 添加控件。
   说明：
   这些控件会显示在窗口标题栏的右侧（如最小化/最大化按钮旁边）。 
   常用于放置全局工具（如搜索框、设置按钮等）。-->
   <Fluent:Ribbon.ToolBarItems>

   </Fluent:Ribbon.ToolBarItems>
   <!--作用：定义 快速访问工具栏（QAT） 的内容。
`           说明：
`           快速访问工具栏通常位于 Ribbon 上方或标题栏中，提供常用命令（如保存、撤销）的快速访问。
`           用户可以通过右键菜单自定义 QAT 的内容。-->
   <Fluent:Ribbon.QuickAccessItems>

   </Fluent:Ribbon.QuickAccessItems>
   <!--作用：定义 Ribbon 的 主选项卡。
   说明：
   每个 RibbonTabItem 代表一个功能分组（如"开始"、"插入"等）。
   选项卡内包含多个 RibbonGroupBox，每个组框组织一组相关控件。-->
   <Fluent:RibbonTabItem>

   </Fluent:RibbonTabItem>
</Fluent:Ribbon>

示例

xml 复制代码

<!-- 定义 Ribbon 的菜单区域 -->
<Fluent:Ribbon.Menu>
    <!-- 使用 Grid 作为菜单的布局容器 -->
    <Grid>
        <!-- Backstage 视图（类似 Office 的文件菜单） -->
        <Fluent:Backstage Name="Backstage">
            <!-- Backstage 选项卡容器 -->
            <Fluent:BackstageTabControl>
                <!-- Backstage 中的"打开"按钮 -->
                <Fluent:Button Header="打开" Command="{Binding OpenCommands}">
                    <!-- 设置按钮图标 -->
                    <Fluent:Button.Icon>
                        <!-- 使用 Material Design 图标（书本打开图标） -->
                        <MaterialExtension p23:MaterialExtension.Kind="BookOpen" 
                    xmlns:p23="clr-namespace:MahApps.Metro.IconPacks;assembly=MahApps.Metro.IconPacks.Material" 
                    xmlns="clr-namespace:MahApps.Metro.IconPacks;assembly=MahApps.Metro.IconPacks.Material"/>
                    </Fluent:Button.Icon>
                </Fluent:Button>
            </Fluent:BackstageTabControl>
        </Fluent:Backstage>
    </Grid>
</Fluent:Ribbon.Menu>

下图为效果图，下图中的文件按钮有很多不同的样式，在< Fluent:Ribbon.Menu >的内部放< Fluent:Backstage >时就是当前的样式（其他样式：< Fluent:ApplicationMenu > 暂时不知道是否还有其他样式）

xml 复制代码

            <!--作用：定义 Ribbon 的 主选项卡。
            说明：
            每个 RibbonTabItem 代表一个功能分组（如"开始"、"插入"等）。
            选项卡内包含多个 RibbonGroupBox，每个组框组织一组相关控件。-->
            <Fluent:RibbonTabItem Header="BIM模型">
                <Fluent:RibbonGroupBox Header="LongLongGroup"
                                       IsLauncherVisible="False">
                    <DatePicker />
                </Fluent:RibbonGroupBox>
            </Fluent:RibbonTabItem>