彩票走势图

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

翻译|行业资讯|编辑:鲍佳佳|2021-01-19 11:54:41.723|阅读 330 次

概述:要创建一个使用MobileRibbon的移动应用程序,请从一个基本的WPF应用程序开始,并添加对DevComponents.WPF.Mobile的引用。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

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中的示例:

<mobile:Ribbon>     
    <mobile:Ribbon.ToolBarItems>         
        <Button controls:ControlBehavior.ImageSource="Images/smiley.png" Click="FeedBackButton_Click" />         
        <Button controls:ControlBehavior.ImageSource="Images/question.png" Click="QuestionButton_Click" />                     
    </mobile:Ribbon.ToolBarItems>
</mobile:Ribbon>

色带可以折叠。当折叠时,包含所选色带项目内容的底部条带将被隐藏。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的静态属性。通过将其设置为后台项目的命令,您的用户可以从后台打开设置。例如:

<mobile:BackstageItem Header="Settings"                        
                      IsSelectable="False"
                      ClosesBackstage="True" 
                      Command="{x:Static mobile:MobileWindow.OpenSettingsFlyoutCommand}" />
向功能区添加项目

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中的元素进行分组,设置溢出顺序等。


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@capbkgr.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP