0

0

WPF 4 Ribbon 开发 之 快捷工具栏(Quick Access Toolbar)

php中文网

php中文网

发布时间:2016-06-07 15:43:17

|

2323人浏览过

|

来源于php中文网

原创

在Office 2007 和Windows 7 两款产品中微软开始引入了一种新概念:“Ribbon 工具栏”,Ribbon 工具栏的界面设计模式可以使用户方便快捷的找到所需的工具,同时这种直观的设计形式有助于用户发现软件其他功能特性,以便更好的了解应用程序的功能。 设计Ribbon

     在office 2007 和windows 7 两款产品中微软开始引入了一种新概念:“ribbon 工具栏”,ribbon 工具栏的界面设计模式可以使用户方便快捷的找到所需的工具,同时这种直观的设计形式有助于用户发现软件其他功能特性,以便更好的了解应用程序的功能。

WPF 4 Ribbon 开发 之 快捷工具栏(Quick Access Toolbar)

     设计Ribbon 的目的本身就是要替代以往的老式工具栏,使应用程序的使用更加便捷。当然微软也为开发人员提供了Ribbon 工具栏的控件库(WPF Ribbon Control),方便大家开发出带有类似Office 2007 Ribbon 工具栏的应用程序。

获得Office UI 授权

     在进行Ribbon 开发前首先需要获得Office UI 授权,并下载Ribbon 控件库(DLL)。进入授权页面点击“License the Office UI”。

WPF 4 Ribbon 开发 之 快捷工具栏(Quick Access Toolbar)

     用Windows Live ID 登录并填写个人信息,进入下载页面获得“WPF Ribbon Control”(注,该程序目前只是CTP 版本)。除此之外也可以下载其他相关资料。

WPF 4 Ribbon 开发 之 快捷工具栏(Quick Access Toolbar)

Ribbon 界面结构

     下载Ribbon 控件库后,就可以在程序中使用Ribbon 工具栏了。正式开发前我们先来看看Ribbon 工具栏的基本结构。下图为Office 2007 Ribbon 工具栏,其中主要分为Tab(Home、Insert 等),Group(Clipboard、Font、Paragraph 等)、Application ButtonQuick Access Toolbar 四大部分。本篇将介绍快捷工具栏(Quick Access Toolbar)相关的开发内容。

WPF 4 Ribbon 开发 之 快捷工具栏(Quick Access Toolbar)

快捷工具栏开发

 WPF 4 Ribbon 开发 之 快捷工具栏(Quick Access Toolbar)

<span><</span><span>r</span><span>:</span><span>RibbonWindow </span><span>x</span><span>:</span><span>Class</span><span>="WPF4RibbonDemo.MainWindow"
        </span><span>xmlns</span><span>="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        </span><span>xmlns</span><span>:</span><span>x</span><span>="http://schemas.microsoft.com/winfx/2006/xaml"
        </span><span>xmlns</span><span>:</span><span>r</span><span>="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
        </span><span>Height</span><span>="360" </span><span>Width</span><span>="500">
    </span><span>... ...
</span><span></</span><span>r</span><span>:</span><span>RibbonWindow</span><span>>
</span>

     接下在快捷工具栏位置添加三个按键,分别实现以下功能:“保存文档”、“清空文档”和“帮助”。其实Ribbon 本身就是一个Command 工具栏,我们可以在中为三个按键定义好相应的内容。

Wand AI
Wand AI

一个无代码AI平台,帮助组织快速创建基于AI的业务解决方案

下载

WPF 4 Ribbon 开发 之 快捷工具栏(Quick Access Toolbar)

     在下面代码中CanExecute 用于判断是否执行Command,Executed 用于执行Command 的相关事件。SmallImageSource、LargeImageSource 用于设置工具栏大小图标,便于在窗口大小调整时随之变化。

<span><</span><span>r</span><span>:</span><span>RibbonWindow.Resources</span><span>>
    <</span><span>r</span><span>:</span><span>RibbonCommand </span><span>x</span><span>:</span><span>Key</span><span>="SaveCommand" </span><span>LabelTitle</span><span>="Save"
                     </span><span>CanExecute</span><span>="SaveCommand_CanExecute"
                     </span><span>Executed</span><span>="SaveCommand_Executed"
                     </span><span>SmallImageSource</span><span>="Images/Save.png"
                     </span><span>LargeImageSource</span><span>="Images/Save.png"
                     </span><span>ToolTipTitle</span><span>="Save" </span><span>ToolTipDescription</span><span>="Save document" />
    <</span><span>r</span><span>:</span><span>RibbonCommand </span><span>x</span><span>:</span><span>Key</span><span>="ClearCommand" </span><span>LabelTitle</span><span>="Clear"
                     </span><span>CanExecute</span><span>="ClearCommand_CanExecute"
                     </span><span>Executed</span><span>="ClearCommand_Executed"
                     </span><span>SmallImageSource</span><span>="Images/Clear.png"
                     </span><span>LargeImageSource</span><span>="Images/Clear.png" 
                     </span><span>ToolTipTitle</span><span>="Clear" </span><span>ToolTipDescription</span><span>="Clear all texts" />
    <</span><span>r</span><span>:</span><span>RibbonCommand </span><span>x</span><span>:</span><span>Key</span><span>="HelpCommand" </span><span>LabelTitle</span><span>="Help"
                     </span><span>CanExecute</span><span>="HelpCommand_CanExecute"
                     </span><span>Executed</span><span>="HelpCommand_Executed"
                     </span><span>SmallImageSource</span><span>="Images/Help.png"
                     </span><span>LargeImageSource</span><span>="Images/Help.png" 
                     </span><span>ToolTipTitle</span><span>="Help" </span><span>ToolTipDescription</span><span>="Help Center" />
</</span><span>r</span><span>:</span><span>RibbonWindow.Resources</span><span>></span>
<span><</span><span>DockPanel</span><span>>
    <</span><span>r</span><span>:</span><span>Ribbon </span><span>DockPanel.Dock</span><span>="Top" </span><span>FocusManager.IsFocusScope</span><span>="True" </span><span>Title</span><span>="WPF4 Notepad">
        <</span><span>r</span><span>:</span><span>Ribbon.QuickAccessToolBar</span><span>>
            <</span><span>r</span><span>:</span><span>RibbonQuickAccessToolBar</span><span>>
                <</span><span>r</span><span>:</span><span>RibbonButton </span><span>r</span><span>:</span><span>RibbonQuickAccessToolBar.Placement</span><span>="InCustomizeMenuAndToolBar"
                                </span><span>Command</span><span>="{</span><span>StaticResource </span><span>SaveCommand</span><span>}" />
                <</span><span>r</span><span>:</span><span>RibbonButton </span><span>r</span><span>:</span><span>RibbonQuickAccessToolBar.Placement</span><span>="InCustomizeMenuAndToolBar"
                                </span><span>Command</span><span>="{</span><span>StaticResource </span><span>ClearCommand</span><span>}" />
                <</span><span>r</span><span>:</span><span>RibbonButton </span><span>r</span><span>:</span><span>RibbonQuickAccessToolBar.Placement</span><span>="InCustomizeMenuAndToolBar"
                                </span><span>Command</span><span>="{</span><span>StaticResource </span><span>HelpCommand</span><span>}" />
            </</span><span>r</span><span>:</span><span>RibbonQuickAccessToolBar</span><span>>
        </</span><span>r</span><span>:</span><span>Ribbon.QuickAccessToolBar</span><span>><br>    </<span>r</span><span>:</span><span>Ribbon<span>></span></span>
</</span><span>DockPanel</span><span>>
</span>

     上面程序中RibbonQuickAccessToolBar.Placement 用于设置快捷工具栏是否允许用户自定义调节。如下图所示可以将Help 按键从快捷工具栏中取消显示。若不设置该值则默认为不能调整,即工具栏中按键内容是固定的。

WPF 4 Ribbon 开发 之 快捷工具栏(Quick Access Toolbar)

     最后,为所有RibbonCommand 事件添加C# 代码完成事件内容,其中文档保存对话框可以使用Windows API Code Pack 的CommonSaveFileDialog 类完成文档保存功能。

<span>private void </span>SaveCommand_CanExecute(<span>object </span>sender, <span>CanExecuteRoutedEventArgs </span>e)
{
    e.CanExecute = <span>true</span>;
}

<span>private void </span>SaveCommand_Executed(<span>object </span>sender, <span>ExecutedRoutedEventArgs </span>e)
{
    <span>ShellContainer </span>sc = <span>KnownFolders</span>.DocumentsLibrary <span>as </span><span>ShellContainer</span>;
    <span>CommonSaveFileDialog </span>csfd = <span>new </span><span>CommonSaveFileDialog</span>();
    csfd.InitialDirectoryShellContainer = sc;
    csfd.DefaultExtension = <span>".txt"</span>;
    csfd.Filters.Add(<span>new </span><span>CommonFileDialogFilter</span>(<span>"Text Files"</span>, <span>"*.txt"</span>));
    <span>if </span>(csfd.ShowDialog() == <span>CommonFileDialogResult</span>.OK)
    {
        <span>File</span>.WriteAllText(csfd.FileName, txtBox.Text);
    }
}

<span>private void </span>ClearCommand_CanExecute(<span>object </span>sender, <span>CanExecuteRoutedEventArgs </span>e)
{
    e.CanExecute = <span>true</span>;
}

<span>private void </span>ClearCommand_Executed(<span>object </span>sender, <span>ExecutedRoutedEventArgs </span>e)
{
    txtBox.Text = <span>null</span>;
}

<span>private void </span>HelpCommand_CanExecute(<span>object </span>sender, <span>CanExecuteRoutedEventArgs </span>e)
{
    e.CanExecute = <span>true</span>;
}

<span>private void </span>HelpCommand_Executed(<span>object </span>sender, <span>ExecutedRoutedEventArgs </span>e)
{
    <span>MessageBox</span>.Show(<span>"You have clicked the help button."</span>);
}

运行效果图:

WPF 4 Ribbon 开发 之 快捷工具栏(Quick Access Toolbar)

WPF 4 Ribbon 开发 之 快捷工具栏(Quick Access Toolbar)

     至此,快捷工具栏的开发内容就讲到这里,下篇将介绍如何开发应用程序菜单(Application Menu),也就是上图左上角记事本图标中的内容。敬请关注… …

相关资料

1. Office UI Licensing Developer Center
http://msdn.microsoft.com/en-us/office/aa973809.aspx

2. Ribbons
http://msdn.microsoft.com/en-us/library/cc872782.aspx

3. WPF Ribbon Preview
http://www.codeplex.com/wikipage?ProjectName=wpf&title=WPF%20Ribbon%20Preview

4. WPF 4 (VS 2010 and .NET 4.0 Series)
http://weblogs.asp.net/scottgu/archive/2009/10/26/wpf-4-vs-2010-and-net-4-0-series.aspx

5. Ribbon Feature Walkthrough
http://windowsclient.net/wpf/wpf35/wpf-35sp1-ribbon-walkthrough.aspx?PageIndex=1

6. Introducing the Windows Ribbon Framework
http://msdn.microsoft.com/en-us/library/dd316910(VS.85).aspx

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

928

2026.02.13

微博网页版主页入口与登录指南_官方网页端快速访问方法
微博网页版主页入口与登录指南_官方网页端快速访问方法

本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。

307

2026.02.13

Flutter跨平台开发与状态管理实战
Flutter跨平台开发与状态管理实战

本专题围绕Flutter框架展开,系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示,帮助开发者构建流畅、可维护的跨平台移动应用。

183

2026.02.13

TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

29

2026.02.13

Redis高可用架构与分布式缓存实战
Redis高可用架构与分布式缓存实战

本专题围绕 Redis 在高并发系统中的应用展开,系统讲解主从复制、哨兵机制、Cluster 集群模式及数据分片原理。内容涵盖缓存穿透与雪崩解决方案、分布式锁实现、热点数据优化及持久化策略。通过真实业务场景演示,帮助开发者构建高可用、可扩展的分布式缓存系统。

103

2026.02.13

c语言 数据类型
c语言 数据类型

本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

54

2026.02.12

雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法
雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法

本专题系统整理雨课堂网页版官方入口及在线登录方式,涵盖账号登录流程、官方直连入口及平台访问方法说明,帮助师生用户快速进入雨课堂在线教学平台,实现便捷、高效的课程学习与教学管理体验。

17

2026.02.12

豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法
豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法

本专题汇总豆包AI官方网页版入口及在线使用方式,涵盖智能写作工具、图片生成体验入口和官网登录方法,帮助用户快速直达豆包AI平台,高效完成文本创作与AI生图任务,实现便捷智能创作体验。

764

2026.02.12

PostgreSQL性能优化与索引调优实战
PostgreSQL性能优化与索引调优实战

本专题面向后端开发与数据库工程师,深入讲解 PostgreSQL 查询优化原理与索引机制。内容包括执行计划分析、常见索引类型对比、慢查询优化策略、事务隔离级别以及高并发场景下的性能调优技巧。通过实战案例解析,帮助开发者提升数据库响应速度与系统稳定性。

92

2026.02.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Node.js 教程
Node.js 教程

共57课时 | 11.9万人学习

Rust 教程
Rust 教程

共28课时 | 6.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号