65.9K
CodeProject 正在变化。 阅读更多。
Home

隆重推出 WPF 的 Ribbon UI 控件

Abhishek Sur
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.82/5 (23投票s)

2010 年 8 月 8 日

CPOL

9分钟阅读

viewsIcon

131380

downloadIcon

21

Ribbon UI 控件集，包含所有在 WPF 应用程序中看起来不错的项目。还提供了一个示例应用程序。

引言

在阅读了 Pete Brown 于 8 月 2 日发布的博文，宣布新的 RibbonUI 功能的博文《宣布：WPF 的 Microsoft Ribbon》后，我想为什么不自己尝试一下这个很酷的控件集呢。于是，我尝试了 Microsoft 刚推出的控件集并创建了一个应用程序。现在是时候介绍这个新控件了，这样您就可以更容易地开始使用它。

Office 2007 中引入的 Ribbon Bar 近来在最新的 UI 开发中非常流行。Microsoft 在其许多应用程序中用更灵活、更易学的 Ribbon 条替换了旧的基于菜单的应用程序工具。因此，现在是其他开发人员在他们自己的应用程序中使用它的时机了。最近发布的 Ribbon UI 功能为我们弥合了这一差距。

在本文中，我将介绍 WPF 中的 Ribbon 控件。如果您不熟悉 WPF，请阅读 WPF 系列文章。

什么是 Ribbon？

Ribbon 是一种工具栏，或者更确切地说是一种命令栏，它在应用程序窗口顶部以选项卡的形式排列不同的命令按钮、图库等。选项卡中的控件可以进一步分组，还可以引入上下文选项卡等。简而言之，Ribbon 取代了 Windows 中存在的工具栏和菜单控件，并为应用程序 UI 提供了坚实的外观。

这是您首次创建应用程序时出现的默认 Ribbon 模板，它还能让您更好地了解新的 RibbonWindow 是什么样子。

如何开始？

现在，要开始创建您的第一个应用程序，您需要

  1. Visual Studio 2010。您可以从此处安装 Visual Studio 试用版。或者您可以从此处尝试 Visual Studio 2010 Express。
  2. 安装 Visual Studio 2010 后，您需要从此处安装 Microsoft Ribbon for WPF。您也可以在 VS 2008 中安装此程序。在这种情况下，您需要显式引用 DLL。
  3. 安装后，启动 Visual Studio 2010，然后从 Visual Studio 项目模板中选择 WPF Ribbon 应用程序。

    从 VS 模板添加新的 RibbonApplication
  4. 选择项目模板后，您的默认应用程序将创建。它会自动为您创建一个 Ribbon 控件 UI，其中包含几个示例按钮，如下所示

    您将看到模板中的示例应用程序
  5. RibbonControlsLibrary.dll 已被引用，并且 Window 实际上继承自 RibbonWindow，后者包含自定义标题栏和状态栏。
  6. 所以是时候开始了。

Ribbon UI 的特点

让我们来探讨 RibbonUI 的每个功能，以便您在创建自己的基于 Ribbon 的应用程序时能够应用它们。

应用程序菜单：每个 Ribbon 应用程序都应该有一个与之关联的应用程序菜单。应用程序菜单由一系列显示菜单项的下拉按钮组成。

ApplicationMenu 的左侧包含 MenuItems，每个菜单项也可能包含其 Submenu。右侧包含由 ApplicationMenu.RecentItems 表示的 RecentItems。

快速访问工具栏：每个 Ribbon 控件都有快速访问工具栏，它是一些小按钮，允许您访问常用命令。快速访问工具栏位于窗口的标题栏中。

超级工具提示：WPF Ribbon bar 引入了增强的工具提示，以尽可能最好的方式描述您的命令。我们称之为 superTooltip。

KeyTips：KeyTips 是每个 Ribbon 独有的功能，用于使用键盘快捷键调用菜单项。您可以为每个选项卡、按钮等定义 KeyTip，当按下 Alt 键与 Key 组合时，它将显示。

自动调整 RibbonItem 大小：每个 Ribbon 的实现方式都使得当空间不足时，Ribbon 将自动调整大小。大 RibbonButton 将转换为小按钮，当空间受限时再次转换为 MenuItem。

组 Ribbon 选项卡：一个 Ribbon 控件可以有多个 RibbonTab。因此，您可以将命令集分组到各个选项卡中。

演示 Ribbon 中的选项卡和组

上下文 Ribbon 选项卡：您还可以拥有上下文 Ribbon 选项卡，这是一种特殊的选项卡，它将根据用户交互显示动态内容。

Ribbon Combobox Gallery Items：Gallery 是一些特殊项，具有特殊功能，如悬停缩放效果、下拉效果等。

因此，Ribbon 具有永无止境的新功能，让我们通过实现它们来定义每个功能。

为什么使用 RibbonWindow 而不是 Window？

RibbonWindow 是 WPF 中从 Window 派生的一个类。RibbonWindow 类具有在其内部绘制快速访问工具栏按钮和上下文 TabGroup 的能力。因此，如果您想支持这些功能，您必须使用 RibbonWindow 而不是普通的 Window。要添加新的 RibbonWindow，只需使用 Ribbon。

选择 RibbonWindow 后，模板将生成一个默认的 Window，如下所示

<ribbon:RibbonWindow x:Class="RibbonTestApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
</ribbon:RibbonWindow>

我们将使用此窗口来实现我们的 RibbonControl。

实现

现在让我们逐一构建包含大多数组件的应用程序

RibbonApplicationMenu

应用程序菜单包含左侧的主菜单项、右侧的辅助窗格和主菜单底部的页脚窗格。

RibbonApplicationMenu 是一个为 RibbonWindow 创建应用程序菜单的控件。每个窗口只能有一个应用程序菜单。应用程序菜单可以包含 RibbonApplicationMenuItem、RibbonApplicationSplitMenuItem、RibbonSeparator 等。您可以嵌套 RibbonApplicationMenuItem 以使项目具有 Submenu。

让我们看看如何构建这个菜单

<ribbon:Ribbon.ApplicationMenu>
    <ribbon:RibbonApplicationMenu SmallImageSource="Images\MyComputer.ico">
        <ribbon:RibbonApplicationMenuItem Header="Desktop" 
        ImageSource="Images\Desktop.ico" KeyTip="D" 
        Click="RibbonApplicationMenuItem_Click"/>

        <ribbon:RibbonApplicationMenuItem Header="Floppy" 
        ImageSource="Images\HardDrive.ico" KeyTip="F">
            <ribbon:RibbonApplicationMenuItem Header="Primary Floppy" 
            ImageSource="Images\FloppyDrive3.ico" KeyTip="P" 
            Click="RibbonApplicationMenuItem_Click" />
            <ribbon:RibbonApplicationMenuItem Header="Secondary Floppy" 
            ImageSource="Images\FloppyDrive5.ico" 
            KeyTip="S" Click="RibbonApplicationMenuItem_Click" />
        </ribbon:RibbonApplicationMenuItem>

        <ribbon:RibbonApplicationMenuItem Header="My Pictures" 
        ImageSource="Images\MyPictures.ico" KeyTip="M" 
        Click="RibbonApplicationMenuItem_Click"/>
        <ribbon:RibbonApplicationMenuItem Header="My Videos" 
        ImageSource="Images\MyVideos.ico" KeyTip="V" 
        Click="RibbonApplicationMenuItem_Click"/>
        <ribbon:RibbonSeparator />
        <ribbon:RibbonApplicationSplitMenuItem Header="Search Program" 
        ImageSource="Images\Search.ico">
            <ribbon:RibbonApplicationMenuItem Header="BMP Images" 
            ImageSource="Images\BMPImage.ico" Click="RibbonApplicationMenuItem_Click"/>
            <ribbon:RibbonApplicationMenuItem Header="JPEG Images" 
            ImageSource="Images\JPEGImage.ico" Click="RibbonApplicationMenuItem_Click"/>
            <ribbon:RibbonApplicationMenuItem Header="GIF Images" 
            ImageSource="Images\GIFImage.ico" Click="RibbonApplicationMenuItem_Click"/>
            <ribbon:RibbonApplicationMenuItem Header="PNG Images" 
            ImageSource="Images\PNGImage.ico" Click="RibbonApplicationMenuItem_Click"/>
        </ribbon:RibbonApplicationSplitMenuItem>

        <ribbon:RibbonApplicationMenu.FooterPaneContent>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Horizontal" 
                HorizontalAlignment="Left" Grid.Column="0">
                    <ribbon:RibbonButton Content="My Music" 
                    SmallImageSource="Images\MyMusic.ico" Click="RibbonButton_Click"/>
                    <ribbon:RibbonButton Content="Web Folders" 
                    SmallImageSource="Images\WebFolders.ico" Click="RibbonButton_Click"/>
                    <ribbon:RibbonButton Content="Settings" 
                    SmallImageSource="Images\Settings.ico" Click="RibbonButton_Click"/>
                </StackPanel>
                <ribbon:RibbonButton SmallImageSource="Images\AudioCD.ico" 
                Label="Exit" HorizontalAlignment="Right" 
                Grid.Column="2" Command="ApplicationCommands.Close" />
            </Grid>
        </ribbon:RibbonApplicationMenu.FooterPaneContent>

        <ribbon:RibbonApplicationMenu.AuxiliaryPaneContent>
            <TextBlock Text="This is the Auxiliary Pane. 
            You can also add RibbonGallery to AuxiliaryPane." />
        </ribbon:RibbonApplicationMenu.AuxiliaryPaneContent>
    </ribbon:RibbonApplicationMenu>

</ribbon:Ribbon.ApplicationMenu>

在上面的代码中，我为桌面、MyPicture、My Video 等声明了一些 RibbonApplicationMenuItem。您可以单击它们中的每一个来调用 Click EventHandler。我们将图像路径直接指定给菜单项的 ImageSource。

RibbonApplicationMenuItem

要定义 Submenu，您可以在单个 MenuItem 中根据需要创建任意数量的 RibbonApplicationMenuItem。就像上面的代码一样，我将 Primary Floppy 和 Secondary Floppy 嵌套在 Floppy MenuItem 中。KeyTip 定义了热键，您可以通过按键盘上的 Alt 键访问它。

带有子菜单的普通菜单项

RibbonApplicationSplitMenuItem

另一方面，RibbonApplicationSplitMenuItem 与普通的 RibbonApplicationMenuItem 略有不同。如果您查看我在示例应用程序中提供的第二个 Submenu，您会发现它实际上是一个菜单项，将带有带分隔符的拆分按钮。

拆分菜单项

对于 SplitMenuItem，您可以将其用作 MenuItem，也可以用它来选择其 SubMenuItems。

RibbonSeparator

RibbonSeparator 允许您在两组项目之间产生分隔。您可以在 MenuItems 或 RibbonGroups 中使用它。

RibbonApplicationMenu.AuxiliaryPaneContent

AuxilaryPane 通常用于列出应用程序访问的所有最近项目的 GalleryItems。RibbonMenu 的右侧空白区域称为 AuxillaryPane。在示例应用程序中，我放置了一个 TextBlock 以在 AuxillaryPane 中写入几行。

RibbonApplicationMenu.FotterPaneContent

另一方面，FooterPaneContent 允许访问 Menu 的页脚。我已经在 FooterPane 上添加了一些 RibbonButtons。

RibbonTab

Ribbon 的主要部分是 RibbonTab。每个 RibbonTab 包含一组 RibbonGroup，每个 RibbonGroup 又包含独立的控件。一个 Ribbon 可以有多个与之关联的 RibbonTab。

<ribbon:RibbonTab ContextualTabGroupHeader="ContextualHeader" Header="Selected">
    <ribbon:RibbonGroup>
        <ribbon:RibbonButton LargeImageSource="Images\HelpFile.ico"
                                Label="Help" />
    </ribbon:RibbonGroup>
</ribbon:RibbonTab>
<ribbon:RibbonTab Header="View">
                
</ribbon:RibbonTab>
<ribbon:RibbonTab Header="Insert">

</ribbon:RibbonTab>
<ribbon:RibbonTab Header="Format">

</ribbon:RibbonTab>

因此，它将定义一些 RibbonTab，即 View、Insert、Format 和 Selected。您必须注意到第一个 RibbonTab 包含一个 RibbonGroup。RibbonGroup 将生成一个帮助按钮。

上下文选项卡

您还必须注意，如果您为 RibbonTab 指定 ContextualTabGroupHeader，它将从 RibbonWindow 的 TitleBar 生成上下文选项卡。ContextualRibbonTab 通常不可见，但只要用户采取某些操作以显示单独的上下文 Ribbon，它就会出现。

<ribbon:Ribbon.ContextualTabGroups>
    <ribbon:RibbonContextualTabGroup Header="ContextualHeader"
                                        Visibility="Visible"
                                    Background="Orange" />

</ribbon:Ribbon.ContextualTabGroups>

Ribbon 控件有一个名为 ContextualTabGroups 的属性，您可以使用它来分组每个 RibbonContextualTabGroup 并更改其可见性。Ribbon ContextualTabGroup 允许您在运行时访问每个 ContextualTabs。在我的示例应用程序中，我为 ContextualHeader ContextualTab 指定了 Visibility=Visible。因此，当您启动应用程序时它将出现。

RibbonGroup

每个 RibbonGroup 都有一个 GroupHeader，它位于 Group 的底部，项目可以是大型按钮类型或小型按钮类型。Button 的大小会根据我们传递的图像自动识别。

<ribbon:RibbonGroup Header="Control Panel">
    <ribbon:RibbonButton LargeImageSource="Images\ControlPanel.ico"
                            Label="Settings Folder" 
                            ToolTipTitle="Settings Folder"
                            ToolTipDescription="Helps you change settings of 
                            the folder and also allows you to change certain system settings"
                            ToolTipImageSource="Images\MyDocuments.ico"/>

    <ribbon:RibbonButton SmallImageSource="Images\ConfigurationSettings.ico"
                            Label="Config" 
                            ToolTipTitle="Configuration Settings"
                            ToolTipDescription="Allows you to change 
                            Configuration settings for the current selection"
                            ToolTipImageSource="Images\MyBriefcase.ico"/>
    <ribbon:RibbonButton SmallImageSource="Images\NetworkConnections.ico"
                            Label="Network"
                            ToolTipTitle="Network Settings"
                            ToolTipDescription="Allows you to change 
                            Network settings for the current selection"
                            ToolTipImageSource="Images\Helpandsupport.ico"/>
    <ribbon:RibbonButton SmallImageSource="Images\ProgramGroup.ico"
                            Label="Programs" 
                            ToolTipTitle="Program Settings"
                            ToolTipDescription="You can change the Program settings"
                            ToolTipImageSource="Images\TextDocument.ico"/>
                
</ribbon:RibbonGroup>

在这里，我们为第一个按钮提到了 LargeImageSource，而其他按钮定义了 SmallImageSource。您可以看到，我们使用 Label 来显示标签文本，而不是 RibbonButton 的内容。RibbonButton 将 Label Text 暴露给接口。

超级工具提示

RibbonButton 有三个属性用于显示超级工具提示。每个超级工具提示都可以有一个 Title，您可以使用 ToolTipTitle 指定。ToolTipDescription 用于描述文本，ToolTipImageSource 用于在 Description 的左侧显示 Image。

当鼠标悬停在“设置”文件夹上时，超级工具提示会出现在 RibbonTab 的正下方。

RibbonSplitButton

就像 RibbonSplitMenuItem 一样，RibbonSplitButton 有一个 Button 和一个与之关联的菜单。每个 RibbonSplitButton 都是一个普通的 RibbonButton 和一个 Menu 的组合。您可以单独访问 Button，也可以用它从菜单中获取项目。

<ribbon:RibbonSplitButton Label="WorkGroup" 
LargeImageSource="Images\Workgroup.ico">
    <ribbon:RibbonMenuItem Header="Folder Options" 
    ImageSource="Images\FolderOptions.ico" />
    <ribbon:RibbonMenuItem Header="Printers and Fax" 
    ImageSource="Images\printersFaxes.ico"/>
    <ribbon:RibbonMenuItem Header="Network Service" 
    ImageSource="Images\NetworkService.ico"/>
</ribbon:RibbonSplitButton>

RibbonSplitButton 可以在其内容中包含 RibbonMenu。当点击按钮时，menuitems 将被列出。

其他 Ribbon UI 控件

Ribbon 还可以包含许多其他 UI 元素。RibbonTextBox、RibbonToggleButton、RibbonCheckBox 是其中的一些示例。您可以像通常一样使用它们。

<ribbon:RibbonCheckBox Label="Single Check" />
 <ribbon:RibbonToggleButton Label="Entire Network" 
 SmallImageSource="Images\EntireNetwork.ico"  />
 <ribbon:RibbonTextBox Label="Run" 
 SmallImageSource="Images\RUN.ico" />
 <ribbon:RibbonComboBox Label="Folders" 
 SmallImageSource="Images\SharingOverlay.ico" 
 ItemsSource="{Binding Path=FolderItems}" />
<ribbon:RibbonTwoLineText LineStackingStrategy="BlockLineHeight" 
Text="Two lines of Text"/>

Label 用于在 Ribbon 中显示文本，SmallImageSource/LargeImageSource 用于显示关联的图像。

RibbonTwoLineText 用于在 Ribbon 中显示 Text。

RibbonGallery

RibbonGallery 可以与 ComboBox 相关联。RibbonGallery 是 Ribbon 栏的一个特殊组件，它具有非常丰富的可视化界面。

<ribbon:RibbonComboBox Label="1" 
      SmallImageSource="Images/DVDDrive.ico"
      IsEditable="True" >
    <ribbon:RibbonGallery SelectedValue="Green"
                          SelectedValuePath="Content"
                          MaxColumnCount="1">
        <ribbon:RibbonGalleryCategory>
           <ribbon:RibbonGalleryItem Content="Green" 
           Foreground="Green" />
            <ribbon:RibbonGalleryItem Content="Blue" 
            Foreground="Blue" />
           <ribbon:RibbonGalleryItem Content="Orange" 
           Foreground="Orange" />
       </ribbon:RibbonGalleryCategory>
    </ribbon:RibbonGallery>
 </ribbon:RibbonComboBox>

RibbonComboBox 承载了一个包含三个 RibbonGalleryItems 的 RibbonGallery。

画廊项目

comboBox 列出了其中的图库项目。这是图库项目最简单的用法。

快速访问工具栏

另一个重要功能是 Ribbon 控件的 QuickAccessToolBar 功能。每个 RibbonWindow 都可以有一个快速访问工具栏，它会在窗口的标题栏中列出自己。要定义 QuickAccessToolBar，我们使用 Ribbon 的 QuickAccessToolBar 属性。RibbonQuickAccessToolBar 控件有助于在 QuickAccess 工具栏中列出控件。

<ribbon:Ribbon.QuickAccessToolBar>
    <ribbon:RibbonQuickAccessToolBar HorizontalAlignment="Right">
        <ribbon:RibbonButton SmallImageSource="Images\RAMDrive.ico" KeyTip="R" />
        <ribbon:RibbonButton SmallImageSource="Images\OpenFolder.ico" KeyTip="O"/>
        <ribbon:RibbonButton SmallImageSource="Images\MyRecentDocuments.ico" KeyTip="R"/>
    </ribbon:RibbonQuickAccessToolBar>
</ribbon:Ribbon.QuickAccessToolBar>

当空间受限时，QuickAccessToolbar 会自动生成一个 Menu。

ContextMenu

与普通 ContextMenu 类似，Ribbon contextMenu 也可以修改以创建您自己的自定义 ContextMenu。RibbonContextMenu 用于代替普通 ContextMenu 来列出每个单独的 RibbonMenuItems。

<ribbon:Ribbon.ContextMenu>
    <ribbon:RibbonContextMenu>
        <ribbon:RibbonMenuButton SmallImageSource="Images\RecycleBinf.ico" 
        Label="Special ContextMenu Option" />
        <ribbon:RibbonMenuButton SmallImageSource="Images\RecycleBine.ico" 
        Label="Normal ContextMenu Option" />
        <ribbon:RibbonMenuButton SmallImageSource="Images\RemovableDrive.ico" 
        Label="Extra ContextMenu Option" />
    </ribbon:RibbonContextMenu>
</ribbon:Ribbon.ContextMenu>

最小化 RibbonBar

RibbonBar 会自动持有几个属性。其中之一就是最小化 RibbonBar。当您最小化 RibbonBar 时，RibbonBar 将像菜单一样出现，这允许您将窗口的全部空间用于其他控件。

要最小化 Ribbon，只需右键单击任何 RibbonTab 并选择 Minimize。窗口将显示如上所示。

注意

Ribbon 控件支持 ICommand 接口，因此您可以使用命令绑定构建应用程序。在示例应用程序中，为了简单起见，我没有使用命令接口。您可以像使用 WPF 按钮一样使用它。

结论

RibbonUIControls 最近被引入，以使 WPF 应用程序能够使用 RibbonWindow。在本文中，我演示了该库引入的每个功能，以便帮助任何开发人员轻松掌握该功能。

很高兴尝试最近推出的这款酷炫丰富的 controlset。我希望您会喜欢这篇文章，并且这篇文章将对您长期有帮助。

感谢您的阅读。我期待收到您宝贵的反馈。

© . All rights reserved.