界面开发控件DotNetBar for WPF教程：MobileRibbon快速入门指南

DotNetBar for WPF是一个用于创建专业WPF应用并拥有超过38个原生WPF控件的工具箱，其中包含了新的日程安排控件、Wpf-Ribbon控件、具有Office样式的Ribbon控件和Wpf-Dock控件以及具有OfficeOutlook样式的Navigation Pane控件等。对于日期输入，DotNetBar for WPF还提供了Date/Time Picker、Numeric Input、Month-calendar以及TabNavigation等控件。

点击下载最新版DotNetBar for WPF

创建一个移动应用程序

要创建一个使用MobileRibbon的移动应用程序，请从一个基本的WPF应用程序开始，并添加对DevComponents.WPF.Mobile的引用。为了正常工作，MobileRibbon需要生活在一个MobileWindow里面，所以你要把MainWindow的基类改为MobileWindow。一旦您有了一个MobileWindow，下一步就是设置MobileTheme。所选的MobileTheme设置了色带的主色调（蓝色、绿色、橙色或紫色）。此外，它还定义了一组在整个移动命名空间中使用的全局资源。附加的依赖属性MobileTheme.ApplicationTheme设置了主题，它可以是内置的主题之一，也可以是你定义的自定义主题。下面是一个例子，它将被放在MobileWindow的xaml的主属性部分。

mobile:MobileTheme.ApplicationTheme="{x:Static mobile:MobileTheme.BlueTheme}"

MobileWindow的显着属性是：

• ChromeStyle –确定窗口镶边的外观。可能的值为无，默认（标准Windows 10桌面镶边），Windows10，Office2013和ExtendedRibbon（镶边延伸到功能区中并且颜色相同）。
• ShowFullScreenButton –确定镶边是否具有将窗口置于全屏模式的按钮。
• ChromeToolBarItems –用于将自定义工具栏项目添加到xaml中的镶边或后面的代码中。（将ChromeToolBarItemsSourcee用于数据绑定方案。）

添加设置弹出

在进入功能区之前，我们先来看看如何在窗口中添加一个SettingsFlyout。虽然布局通常是通过位于ribbon后台的 "Settings"按钮打开的，但SettingsFlyout控件本身并不位于ribbon内部。相反，它是窗口的一个子控件。SettingsFlyout应该以这样的方式添加到窗口的根网格中，当打开时，它能够跨越窗口的全部高度和宽度。例如，如果根网格有2行和2列，那么flyout应该将Grid.RowSpan和Grid.ColumnSpan都设置为2。

添加弹出框后，可以设置其页眉和页脚属性。当未选择任何项目时，两者都将显示在主视图中，同时显示项目列表。

SettingsFlyout是SettingsFlyoutItem控件的容器。SettingsFlyoutItem同时具有Content和Header属性。弹出菜单的主视图中列出了所有项目的标题，未选择任何项目时将显示该视图。选择一个项目时，将同时显示标题和内容。

SettingsFlyoutItem不需要Content才有用。在这种情况下，你可以设置一个Command(和可选的CommandParameter)，或者你可以处理项目的Clicked事件并做任何需要的事情。如果你想在一个项目被点击时关闭飞出，将ClosesFlyout设置为true。如果你需要flyout保持打开，但不希望项目被选中，你也可以将IsSelectable设置为false。

添加功能区

MobileRibbon应该插入到窗口的根网格的第一行中，并允许跨所有列。

MobileRibbon可以显示与窗口标题不同的标题。TitleTemplate显示如何呈现Title。如果您为“标题”设置了一个值但想要隐藏它，请使用HideTitle属性。

功能区具有一个内部工具栏，您可以在其中放置与主显示区分开的按钮和其他控件-在项目标题的右侧。要将对象放入xaml或后面的代码中，请使用ToolBarItems属性。对于数据绑定方案，将对象放入绑定到ToolBarItemsSource属性的集合中。这是xaml中的示例：

色带可以折叠。当折叠时，包含所选色带项目内容的底部条带将被隐藏。Ribbon可以通过IsCollapsed属性手动折叠和展开。也可以通过AutoCollapseOption属性将ribbon设置为自动折叠。 AutoCollapseOption是一个枚举，可能的值为None和WhenSelectedRibbonItemClicked。如果设置为后者，那么顾名思义，当用户点击已经选中的ribbon项目时，ribbon将自动折叠。WhenSelectedRibbonItemClicked是AutoCollapseOption的默认值。

设置后台将在下一节介绍。但ribbon本身也有与后台相关的属性，这里就不赘述了。默认情况下，如果你设置了一个后台，那么用来打开后台的按钮就会被显示出来，如果没有后台，按钮就不会被显示出来。可以通过ShowBackstageButton属性来覆盖这个行为。后台按钮的内容是通过BackstageButtonContent来设置的，而BackstageButtonContentTemplate则显示了如何渲染它。如果你需要知道后台是否打开，使用IsBackstageOpen。

添加后台

功能区的后台由Backstage控件实现。要将后台添加到功能区，请创建一个Backstage控件，并将其设置为功能区的Backstage属性的值。或者，您可以将数据对象绑定到Backstage属性，并使用在其根目录处带有Backstage的隐式DataTemplate。

Backstage是BackStageItem控件的容器。BackStageItem与上述的SettingsFlyoutItem非常相似。实际上，两者之间的唯一区别是SettingsFlyoutItem具有其ClosesFlyout属性，而BackstageItem具有名为ClosesBackstage的属性。由于它们在功能上相同，因此它们的行为相同并且以相同的方式使用。

关于Backstage和SettingsFlyout值得注意的是，通常使用Backstage中的按钮来打开设置弹出窗口。为了实现这一点，已将名为OpenSettingsFlyoutCommand的RoutedCommand定义为MobileWindow的静态属性。通过将其设置为后台项目的命令，您的用户可以从后台打开设置。例如：

向功能区添加项目

MobileRibbon是MobileRibbonItem控件的容器。在Xaml中，MobileRibbonItem控件可以作为Ribbon的子控件直接添加。在后面的代码中，你会把它们添加到ribbon的Items集合中。在数据绑定方案中，创建一个数据对象集合，并将其绑定到ribbon的ItemsSource属性。

RibbonItem的Header属性指定了在ribbon的标签部分显示的对象。使用HeaderTemplate来展示如何渲染Header。

当用户点击一个ribbon项的头部时，它的Click事件会被触发，它的Command会被执行（如果它有Command的话），并被选中。要以编程方式设置一个ribbon项是否被选中，请使用它的IsSelected属性。当IsSelected属性发生变化时，无论是通过用户操作还是编程，ribbon项都会根据情况引发Selected/Unselected事件。这两个事件都是路由事件。

将元素添加到功能区项目。

从技术上讲，可以将任何类型的UIElement添加到RibbonItem的Items集合中，并在选择RibbonItem时显示。元素可以作为直接子级添加到Xaml中。对于后面的代码，请使用Items集合，对于数据绑定方案，请创建数据对象的集合并将其绑定到ItemsSource属性。RibbonItem没有ItemTemplate属性，因此，如果确实将数据对象放入其中，则还需要定义一个隐含的DataTemplate，以数据对象的Type为目标，该Type显示应如何呈现它们。

即使可以将任何类型的UIElement添加到RibbonItem，也要实现与功能区的内置样式和行为的兼容性，请使用专门为其设计和实现的控件。这些是：

• GroupBar –用于将彼此相关的其他元素分组的容器。有一个按钮，用于打开一个弹出窗口以显示溢出项。
• 画廊–用于收集可选项目的容器，一次可以选择一个（或零个）。支持项目类别。
• GalleryBar –具有按钮的画廊，该按钮可打开用于显示其项目的弹出窗口。可以在主显示中显示项目的子集。
• RibbonComboBox –功能正常的组合框，但基于Gallery以便支持类别。
• RibbonPopupButton –一个项目集合的容器，显示为一个按钮。当按下按钮时，将打开一个弹出窗口以显示项目。
• RibbonButton –用属性和功能扩展ButtonBase（在Windows.Controls.Primitives中），以支持与功能区的兼容性并简化您（程序员）的工作。
• RibbonToggleButton –从RibbonButton派生的切换按钮。
• RibbonRadioButton –从RibbonToggleButton派生的单选按钮。
• RibbonCheckBox –从RibbonToggle Butt派生的复选框。

其中，GroupBar通常是功能区项目的子项，因为它是所有其他项目（GalleryBar除外）的容器，并且支持溢出。

使用分隔符在功能区项目的两个元素之间放置一条垂直线。

下一章节将继续讲解对GroupBar中的元素进行分组，设置溢出顺序等。