程序设计之五：Ribbon UI的实现（XMAL）

          随着微软发布新一代Microsoft .NET Framework 4.0架构，我们开发Win7风格的应用程序就变得非常简单了。当然，这一切都得归功于微软的工程师，在他们已经定义好的Ribbon基类文件RibbonControlsLibrary.dll中，我们可以实现标准风格的Ribbon程序界面。

         Ribbon UI，即Ribbon用户界面，相信只要用过微软Office 2007的朋友，对它会非常熟悉吧。Ribbon UI完全能替代传统的Windows用户界面，来完成程序功能的实现，并且能极大地提高工作效率。

         我在经过一段时间的研究之后，决定对不久前编写的图书管理系统加以改进，在界面上全面启用Ribbon界面。当然，我也只是非常粗略地“学习”了这个类库的使用，很多高级的功能都还不能理解。鉴于网上针对这一方面的资料比较少，而且极大部分还是老外写的，给一些向我一样的新手带来了不少麻烦，我便考虑，写下这篇“图文并茂”的学习笔记，在方便大家交流的同时，也给自己日后的复习提供参照。本文所采用的平台是Microsoft Visual Studio 2010。

         我能力有限，不能保证在本文中不会出现错误，对于有讲述不到的地方，还请提出。本文主要针对新手，同时也接受老鸟拍砖~

         好了，下面进入正题。首先，请看图1。这是我设计的读者信息管理界面，图2、图3和图4是这个窗体的实际运行效果。

图 1

图 2

图 3

图 4

         接下来，我以“读者注册”为例，介绍Ribbon UI的主要构成（本文主要介绍ApplicationMenu、Tab和Group）。我们先来看图5

图 5

         在标准的Ribbon UI设计中，整个窗体应当包含一个ApplicationMenu，若干Tab和若干Group。至于快捷启动栏QuickAccessBar，就不在本文的讲述范围之内。下面我简单介绍下射三个部分。

应用菜单（ApplicationMenu），包含了一些常用的按钮，在本案例中，我设计了图6所示的两个按钮。

图 6

         标签（Tab）和组（Group），标签由若干组构成，每个组又由一些基本的Ribbon控件组成，可以说，Ribbon控件是整个Ribbon UI的基本元素。

         说了这么多，下面就该讲讲如何来实现这个Ribbbon UI了。在进行Ribbon开发前，我们得获得微软Office UI的授权。点击下列网址，进入Office授权网页，如图7所示。

http://msdn.microsoft.com/en-us/office/aa973809.aspx

图 7

         点击红色框选部分，用Windows Live ID 登录并填写个人信息，进入下载页面获得“WPF Ribbon Control”的下载地址。在获得RibbonControlsLibrary.dll后，我们便可以编写出具有Ribbon界面的程序了。此外，我们还可以通过下载Microsoft Ribbon for WPF来获得授权，具体的获得方法，可自行上网搜索，本文不再另外提供了。

         首先，在创建了WPF Ribbon Application后，我们会发现，系统已经自动生成了程序的代码框架。在这里，所有的WPF程序，其界面都是由XMAl语言代码所生成的。

         下列代码，是系统自动定义的Ribbon命名空间，主要定义了本窗体的标题、名字、图标、大小等属性，相信有一定编程基础的朋友一眼就能看懂。

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:ribbon="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"

xmlns:d=http://schemas.microsoft.com/expression/blend/2008 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="UserManage"

Title="读者信息管理"

x:Name="UserManage"

Width="640" Height="480" WindowStartupLocation="CenterScreen" Icon="/ Images/Logo.ico">

……………………………………………………

         下面，我们就来实现这个ApplicationMenu。找到类似于如下的代码行。

         在它的后面下面定义一个ApplicationMenu，并设置它的图标，另外又定义了两个菜单项menBack和menExit，具体代码如下：

x:Name="menBack"

ImageSource="/Images/BactToMain.png"/>

x:Name="menExit"

ImageSource="/ Images/Exit.png"/>

         接着，定义Tab和Group，下面的代码是“读者注册”的这一Tab的实现。仔细观察，会看出，总共定义了两个Group，“基本信息”和“基本操作”。

Header="读者注册">

Header="基本信息">

                                          

                                                                                            

                                               IsChecked="True" Name="radMale">     

LargeImageSource="/Images/Reg.png"

Label="注册" Height="Auto" Margin="0,5,0,-6" Content="" />

LargeImageSource="/Images/Quit.png"

Label="取消" Height="Auto" Margin="0,5,0,-6" Content="" />

         讲到这里，本文也要收尾了，本文的主要目的是实现Ribbon界面，并不是具体地去为每一个控件编写相应的功能。关于Ribbon UI的应用非常广泛，本文只是粗略地介绍了它的使用方法。其实，通过安装Microsoft Visual Studio 2010旗舰版或者Microsoft Expression 4旗舰版，我们可以非常方便地实现Ribbon界面，毕竟“所见即所得”的方式更加易懂易学。

         各位读者，看完了本文的讲解，您是否对于Ribbon UI的实现有了一个初步的印象了呢？最后，我附上实现“读者信息管理”窗体界面的完整代码。

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:ribbon="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"

xmlns:d=http://schemas.microsoft.com/expression/blend/2008 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="UserManage"                                                                        

Title="读者信息管理"

x:Name="UserManage"

Width="640" Height="480" WindowStartupLocation="CenterScreen" Icon="/ Images/Logo.ico">

                   

x:Name="menBack"

ImageSource="/Images/BactToMain.png"/>

x:Name="menExit"

ImageSource="/ Images/Exit.png"/>

Header="读者注册">

Header="基本信息">

                                          

                                                                                            

                                                                 IsChecked="True" Name="radMale">     

LargeImageSource="/Images/Reg.png"

Label="注册" Height="Auto" Margin="0,5,0,-6" Content="" />

LargeImageSource="/Images/Quit.png"

Label="取消" Height="Auto" Margin="0,5,0,-6" Content="" />

Header="读者信息查询">

                              LargeImageSource="/ Images/ReaderSearch.png"

                              Label="查询" Height="Auto" Margin="0,5,0,-6" Content="" />

                         

                              LargeImageSource="/ UserInfoAlert.png"

                              Label="修改读者信息" Height="Auto" Margin="0,5,0,-6" />

Header="读者注销">

Header="基本信息">

                                                 LargeImageSource="/Images/Exit.png"

                                                 Label="注销¨²" Height="Auto" Margin="0,5,0,-6" Content="" />

LargeImageSource="/Images/Quit.png"

                                                 Label="取销¨²" Height="Auto" Margin="0,5,0,-6" Content="" />

2011年4月22日星期五