RIA Silverlight4 控件 MVVM Web开发 Web开发 XAML Silverlight 设计/图形所有主题初学者中级开发 .NET C#

Silverlight 功能区控件快速指南 (第 1 部分)

<b>Kunal Chowdhury «IN»</b>

4.88/5 (21投票s)

2011年1月11日

CPOL

8分钟阅读

129373

2429

Silverlight 功能区控件快速指南 (第 1 部分)

下载功能区控件演示 1 - 25.58 KB

引言

Microsoft Office 2010 具有一个很酷的新功能区控件条，看起来非常丰富，而且比旧的菜单栏更容易使用。您可能知道我们可以使用 WPF 创建这样的功能区，但有人想过是否也可以非常轻松地使用 Silverlight 来创建它吗？

DotNetBar Ribbon Silverlight Control with Office styling

是的，我们可以为我们的 Silverlight 应用程序创建这样的 `Ribbon` UI。因此，如果您想要它用于您的 Silverlight 应用程序，在阅读完这一系列关于 `Ribbon` 控件的文章后，您可以非常轻松地实现它。

Silverlight 功能区控件简介

Devcomponent 有自己的名为 DotNetBar for Silverlight 的组件。它包含一些很棒的控件，如功能区栏、调度程序、导航窗格等。其中，我开始探索 Silverlight 功能区控件的功能。它对我来说看起来非常酷。我想与您分享我的探索。

DotNetBar 包含 Office 2010 风格的功能区控件，具有蓝色、银色、黑色和基于单色的自定义颜色方案。它支持 MVVM 以及 100% 基于代码的控件创建和设置。您可以从 DevComponents 网站下载该库的试用版。以下是下载页面的链接：DotNetBar for Silverlight。

Silverlight 功能区控件的特点

Microsoft Office 2010 风格的外观和感觉。
包含三种不同的颜色方案：蓝色、黑色、银色。
您也可以基于单色自定义颜色方案的生成。
包含一套完整的控件供功能区控件使用
- Button
- ToggleButton
- RadioButton
- 下拉按钮
- 分割按钮
- ComboBox
- MenuItem
- 画廊
- 内嵌式图库
- 布局控件
支持自动功能区大小调整。
支持普通、最小化、折叠和弹出视图，类似于 Office 2010。
Office 2010 风格的后台应用程序菜单。
快速访问工具栏支持。
可自定义的上下文菜单支持。
高级工具提示支持。
可重用资源，因此您可以重用一些预定义的笔刷。
功能区工具栏的自动调整大小。
图库的命令预览也可用。
此库支持完全重样式、重模板。
MVVM 架构支持。

了解更多关于功能区控件的信息

`DevComponents.Silverlight.Ribbon.Ribbon` 是构成 `Ribbon` UI 的所有内容的顶级容器。`Ribbon` 继承自 `ItemsHostControl`，旨在包含 `RibbonTabItem` 的集合。您可以在 `Ribbon` 中放置任何 UI 元素，但在应用程序加载后将不会渲染。

Ribbon 的 `SystemToolbarItems` 是 `UIElement` 的 `ObservableCollection`。集合中的所有项都渲染在 `Ribbon` 的最右侧，与功能区选项卡项处于同一垂直级别。默认情况下，此集合为空。

`QuickAccessToolbarItems` 也是 `UIElement` 的 `ObservableCollection`。放置在此集合中的所有项都渲染在 `Ribbon` 控件边界的左上角。

`Ribbon.BackstageContent` 用于设置在勾选 Backstage（或 File）切换按钮时在 `Popup` 中显示的视图。默认情况下，此属性为 `null`。要获取或设置 backstage 是否打开，请使用 `IsBackStageOpen` 属性。

默认情况下，Backstage 按钮显示文本“`File`”。可以通过 `BackstageButtonContent` 属性更改此设置。要完全隐藏 backstage 按钮，请将 `BackstageButtonVisibility = false`。

`Ribbon` 始终显示当前选中项提供的内容。通过 `SelectedItem` 依赖项属性获取或设置当前选中项。

通过将 `IsMinimized` 属性设置为 `true` 可以最小化功能区。最小化时，选项卡项可见但内容隐藏。最小化时，可以通过将 `IsPopupOpen` 设置为 `true` 来在弹出窗口中显示内容。如果用户单击最小化功能区中的选项卡，则会选中该选项卡项并打开弹出窗口以显示内容。默认情况下，用户可以通过双击选项卡项在最小化和正常状态之间切换。可以通过将 `DoubleClickTabToggleEnabled = false` 来覆盖此设置。

通过将 `IsCollapsed = true` 可以折叠功能区。折叠时，`Ribbon` 的任何部分都不可见。默认情况下，当托管 Silverlight 应用程序的宽度或高度达到特定最小值时，功能区会自动折叠。这些值在 `RibbonResources` 中定义为 `RibbonCollapseWidth` 和 `RibbonCollapseApplicationHeight`。

准备项目

一旦下载了 `DotNetBar` for Silverlight 库，请将它们安装到您的本地 PC。它有一些很酷的示例。在研究它们之前，让我们一步一步创建自己的示例项目并探索它来学习。

创建一个 Silverlight 应用程序项目。创建后，从安装目录中为项目添加两个 DLL 程序集引用：“DevComponents.Silverlight.Controls.dll”和“DevComponents.Silverlight.Ribbon.dll”。

通常，您会在“Program Files\DotNetBarSilverlight”目录下找到它们。这两个程序集是您开始使用它所必需的。

添加引用后，我建议您使用 MVVM 模式重构您的项目。在本篇文章中，我们不会使用 MVVM，但在未来的文章中它将对您有所帮助。在解决方案根目录下创建“Models”、“Views”、“ViewModels”和“Images”目录。另外，在相应的目录下创建 `MainView.xaml` 和 `MainViewModel.cs` 文件。构建您的解决方案，您会遇到一些构建错误。修复它们以开始下一步。

让您的 `MainViewModel` 继承自 `ViewModelBase`，它是“DevComponents.Silverlight.Controls.ViewModel”命名空间的一部分。如上所示包含命名空间。现在，您的解决方案已准备好进行下一步。

添加功能区控件

一旦您的开发环境准备就绪，包括项目，我们就可以开始编写 XAML 代码，为我们的 Silverlight 应用程序创建一个外观精美的功能区栏控件。打开您的 `MainView.xaml` 页面，并在同一 XAML 页面中添加 XMLNS 命名空间“DevComponents.Silverlight.Ribbon”。

请参考以下屏幕截图

将主“LayoutRoot”网格分成两行。第一行放置功能区栏。如果需要，我们将在第二行稍后使用。

以下是供您参考的 XAML 代码

<UserControl x:Class="DevComponentRibbonDemo.Views.MainView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:r="clr-namespace:DevComponents.Silverlight.Ribbon;
                                assembly=DevComponents.Silverlight.Ribbon"
    mc:Ignorable="d">
    
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        
    </Grid>
</UserControl>

现在，将以下 XAML 代码添加到您的 `LayoutRoot` 中

<r:Ribbon x:Name="ribbon" 
          PersistRibbonState="True"
          IsMinimized="False" IsCollapsed="False"
          BackstageButtonVisibility="Visible" BackstageColor="Blue">
 
</r:Ribbon>

这将为您的页面添加功能区栏控件。构建并运行您的应用程序。您将在应用程序顶部看到以下空的空白功能区栏。

添加功能区选项卡项

`DevComponents.Silverlight.Ribbon.RibbonTabItem` 是构成 `Ribbon` UI 的所有内容的第二个级别容器。这是 `Ribbon` 的主要内容控件。

`Label` 属性设置选项卡项显示的 `string` 值。

使用 `IsSelected` 来获取或设置选项卡项是否被选中。将此属性设置为 `true` 将更改 `Ribbon.SelectedItem` 的值。

`RibbonBarResizeOrder` 用于创建 `RibbonBar` 引用的堆栈，定义当 `Ribbon` 变小或完全展开时它们的收缩顺序。

现在是时候为功能区栏添加一些 `Ribbon` 项了。在 `Ribbon` 控件内使用 `RibbonTabItem` 来添加一些子元素。使用“Label”属性为每个选项卡项指定标签。参考以下代码片段

<r:Ribbon x:Name="ribbon" 
          PersistRibbonState="True"
          IsMinimized="False" IsCollapsed="False"
          BackstageButtonVisibility="Visible" BackstageColor="Blue">
    <r:RibbonTabItem Label="Edit"></r:RibbonTabItem>
    <r:RibbonTabItem Label="View"></r:RibbonTabItem>
    <r:RibbonTabItem Label="Project"></r:RibbonTabItem>
    <r:RibbonTabItem Label="Build"></r:RibbonTabItem>
</r:Ribbon>

在这里，我们添加了四个不同的 `RibbonTabItem`，分别命名为“Edit”、“View”、“Project”和“Build”。如果您现在运行应用程序，您将在浏览器窗口中看到以下 UI。

选择不同的选项卡项，您会注意到每个选项卡控件都是完全空白的。但是，您可以像在 Office 2010 中一样在每个选项卡之间切换。

一旦准备好，为什么不在一个选项卡控件中添加一些控件呢？让我们开始吧。在其中一个选项卡项中，添加一个 `RibbonBar` 项并在其中放置一些按钮。

添加功能区控件项

功能区选项卡项可以包含任何项。如果您需要一个自动调整大小的面板，请在其中使用另一个 `RibbonBar`。另一种方法是使用 `LayoutControl`。`LayoutControl` 是一种类似多行工具栏的东西，支持多种布局定义。布局定义允许您精确指定每个控件相对于其他控件的渲染位置。布局控件可以具有多个布局定义，每个定义具有不同的宽度。当 `Ribbon` 调整大小时，将根据可用空间使用最合适的布局定义。

`Label` 属性设置在功能区栏底部边缘显示的 `string` 值。

让我们创建一个这样的 UI，其中我们将有一个中等大小的粘贴按钮和两个小尺寸的剪切和复制按钮。

我们将把它们放在“Edit”选项卡项中。对于这种布局类型，我们不需要多行布局。因此，我们可以使用自动调整大小的面板，即在其内部再使用一个 `RibbonBar`。因此，展开控件并添加一个 Split 按钮为用户提供粘贴按钮。还添加了两个普通的 `Ribbon` 按钮用于剪切和复制的外观。

您可以在此处找到完全相同的代码

<r:RibbonTabItem Label="Edit">
  <r:RibbonBar Label="Clipboard">
      <r:SplitButton x:Name="PasteSplitButton" Label="Paste" 
                     LargeImageSource="/DevComponentRibbonDemo;
			component/Images/Paste32.png" 
                     r:Ribbon.ToolTipContent=
			"Paste the copied content from the Clipboard."
                     r:Ribbon.ToolTipHeader="Paste (Ctrl + V)" />
      <r:Button x:Name="CutButton" Label="Cut" 
                SmallImageSource="/DevComponentRibbonDemo;component/Images/Cut16.png" 
                r:Ribbon.ToolTipContent="Cut the selection and put it in the Clipboard." 
                r:Ribbon.ToolTipHeader="Cut (Ctrl + X)" />
      <r:Button x:Name="CopyButton" Label="Copy"
                SmallImageSource="/DevComponentRibbonDemo;component/Images/Copy16.png" 
                r:Ribbon.ToolTipContent="Copy the selection and put it in the Clipboard." 
                r:Ribbon.ToolTipHeader="Paste (Ctrl + V)"/>
  </r:RibbonBar>
</r:RibbonTabItem>

您会注意到，每个按钮都来自功能区库，并且它们具有不同的属性集来显示工具提示、图像、标签等。

现在运行您的应用程序。您将看到功能区控件在屏幕上有三个按钮，分别称为剪切、复制和粘贴。顺便说一句，这些按钮没有功能，因为我们还没有实现它们的功能。

将鼠标悬停在每个控件上方，您会看到一个很棒的工具提示，就像 Office 2010 窗口一样。参考以下屏幕截图

您还可以自定义工具提示以显示更复杂的元素。我们稍后会讨论。

结束语

希望您喜欢阅读 Silverlight 功能区控件的第一部分。这只是一个用于开始使用它的初学者系列。还有更多内容即将推出。在第二部分中，我们将讨论更多关于布局和控件的内容。

示例是使用 DotNetBar 的许可版本创建的。如果您下载源代码并在没有许可证的情况下运行，您可能会在 UI 中收到“无效许可证密钥”警告。

不要忘记为本文投票并分享您的反馈。这将帮助我为您提供更好的文章。

您可以在此处获取此示例的源代码（外部来源）