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

来源：互联网发布：数组和集合的区别编辑：程序博客网时间：2024/06/14 05:06

随着微软发布新一代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命名空间，主要定义了本窗体的标题、名字、图标、大小等属性，相信有一定编程基础的朋友一眼就能看懂。

<ribbon:RibbonWindow

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">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

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

</ribbon:RibbonWindow>

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

<ribbon:Ribbon x:Name="Ribbon" Margin="0,-7,0,7">

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

<ribbon:Ribbon.ApplicationMenu>

<ribbon:RibbonApplicationMenu SmallImageSource="/ Images/MenueLogo.png">

<ribbon:RibbonApplicationMenuItem Header="返回主界面"

x:Name="menBack"

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

<ribbon:RibbonApplicationMenuItem Header="退出系统"

x:Name="menExit"

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

</ribbon:RibbonApplicationMenu>

</ribbon:Ribbon.ApplicationMenu>

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

<ribbon:RibbonTab x:Name="tabUserInfoReg" <!—定义Tab“读者注册”-->

Header="读者注册">

<ribbon:RibbonGroup x:Name="gupUserInfoReg" <!—定义Group“基本信息”-->

Header="基本信息">

<ribbon:RibbonTextBox x:Name="txtName" TextWrapping="Wrap" ToolTip="输入用户姓名。"/>

<!—定义RibbonTexiBox-->

<ribbon:RibbonRadioButton Content="RibbonRadioButton" Margin="5,5,-20.833,-19"

IsChecked="True" Name="radMale">

<!—定义RibbonRadioButton，设置其相关属性-->

<ribbon:RibbonRadioButton.Background>

</ribbon:RibbonRadioButton.Background>

</ribbon:RibbonRadioButton>

<ribbon:RibbonRadioButton Content="RibbonRadioButton" Margin="49,-24,-64.833,10" RenderTransformOrigin="-4.863,2.176" Name="radFemale">

<ribbon:RibbonRadioButton.Background>

</ribbon:RibbonRadioButton.Background>

</ribbon:RibbonRadioButton>

<ribbon:RibbonTextBox x:Name="txtNum" TextWrapping="Wrap"/>

<ribbon:RibbonTextBox x:Name="txtAge" TextWrapping="Wrap"/>

<ribbon:RibbonTextBox x:Name="txtPhone" TextWrapping="Wrap"/>

<ribbon:RibbonTextBox x:Name="txtAddress" TextWrapping="Wrap"/>

</ribbon:RibbonGroup>

<ribbon:RibbonGroup x:Name="gupActs" Header="基本操作" Margin="0">

<ribbon:RibbonButton x:Name="btnReaderReg" <!—定义RibbonButton-->

LargeImageSource="/Images/Reg.png"

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

<ribbon:RibbonButton x:Name="btnQuit"

LargeImageSource="/Images/Quit.png"

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

</ribbon:RibbonGroup>

</ribbon:RibbonTab>

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

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

<!—“读者信息管理窗体的实现”-->

<ribbon:RibbonWindow <!—定义本窗体的命名空间-->

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">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<!—----------------------------------------------------------------------------------------------------------------------->

<ribbon:Ribbon x:Name="Ribbon" Margin="0,-7,0,7">

<ribbon:Ribbon.ApplicationMenu> <!—定义菜单-->

<ribbon:RibbonApplicationMenu SmallImageSource="/ Images/MenueLogo.png">

<ribbon:RibbonApplicationMenuItem Header="返回主界面"

x:Name="menBack"

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

<ribbon:RibbonApplicationMenuItem Header="退出系统"

x:Name="menExit"

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

</ribbon:RibbonApplicationMenu>

</ribbon:Ribbon.ApplicationMenu>

<ribbon:RibbonTab x:Name="tabUserInfoReg" <!—定义Tab“读者注册”-->

Header="读者注册">

<ribbon:RibbonGroup x:Name="gupUserInfoReg" <!—定义Group“基本信息”-->

Header="基本信息">

<ribbon:RibbonTextBox x:Name="txtName" TextWrapping="Wrap" ToolTip="输入用户姓名。"/>

<!—定义RibbonTexiBox-->

<ribbon:RibbonRadioButton Content="RibbonRadioButton" Margin="5,5,-20.833,-19"

IsChecked="True" Name="radMale">

<!—定义RibbonRadioButton，设置其相关属性-->

<ribbon:RibbonRadioButton.Background>

</ribbon:RibbonRadioButton.Background>

</ribbon:RibbonRadioButton>

<ribbon:RibbonRadioButton Content="RibbonRadioButton" Margin="49,-24,-64.833,10" RenderTransformOrigin="-4.863,2.176" Name="radFemale">

<ribbon:RibbonRadioButton.Background>

</ribbon:RibbonRadioButton.Background>

</ribbon:RibbonRadioButton>

<ribbon:RibbonTextBox x:Name="txtNum" TextWrapping="Wrap"/>

<ribbon:RibbonTextBox x:Name="txtAge" TextWrapping="Wrap"/>

<ribbon:RibbonTextBox x:Name="txtPhone" TextWrapping="Wrap"/>

<ribbon:RibbonTextBox x:Name="txtAddress" TextWrapping="Wrap"/>

</ribbon:RibbonGroup>

<ribbon:RibbonGroup x:Name="gupActs" Header="基本操作" Margin="0">

<ribbon:RibbonButton x:Name="btnReaderReg" <!—定义RibbonButton-->

LargeImageSource="/Images/Reg.png"

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

<ribbon:RibbonButton x:Name="btnQuit"

LargeImageSource="/Images/Quit.png"

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

</ribbon:RibbonGroup>

</ribbon:RibbonTab>

<!—----------------------------------------------------------------------------------------------------------------------->

<ribbon:RibbonTab x:Name="tabReaderInfoSearch"

Header="读者信息查询">

<ribbon:RibbonGroup x:Name="gupBasicInfo" Header="基本信息" >

<ribbon:RibbonTextBox x:Name="txtKey" TextWrapping="Wrap" VerticalAlignment="Top" HorizontalAlignment="Left" Width="106" Margin="0,28,0,0"/>

</ComboBox>

</ribbon:RibbonGroup>

<ribbon:RibbonGroup x:Name="gupActs" Header="基本操作">

<ribbon:RibbonButton x:Name="btnReaderSearch"

LargeImageSource="/ Images/ReaderSearch.png"

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

<ribbon:RibbonButton x:Name="btnReaderAlert"

LargeImageSource="/ UserInfoAlert.png"

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

</ribbon:RibbonGroup>

<!—----------------------------------------------------------------------------------------------------------------------->

</ribbon:RibbonTab>

<ribbon:RibbonTab x:Name="tabReaderInfoDel"

Header="读者注销">

<ribbon:RibbonGroup x:Name="gupReaderInfoDel"

Header="基本信息">

<ribbon:RibbonTextBox TextWrapping="Wrap"/>

</ribbon:RibbonGroup>

<ribbon:RibbonGroup x:Name="gupBasicActs3" Header="基本操作" Margin="0">

<ribbon:RibbonButton x:Name="btnReaderInfoDel"

LargeImageSource="/Images/Exit.png"

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

<ribbon:RibbonButton x:Name="btnReaderQuit"

LargeImageSource="/Images/Quit.png"

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

</ribbon:RibbonGroup>

</ribbon:RibbonTab>

</ribbon:Ribbon>

</Grid>

</ribbon:RibbonWindow>

2011年4月22日星期五