彩票走势图

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

翻译|使用教程|编辑:鲍佳佳|2021-01-21 10:30:55.443|阅读 248 次

概述:要创建一个使用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

上文

对GroupBar中的元素进行分组

GroupBar是一个容器,允许您对其他元素进行分组。

GroupBar实现功能区的元素溢出。溢出是将元素从主显示屏中移除并放置在溢出面板中的位置,因为功能区的宽度不足以容纳它们。溢出面板本身包含在弹出窗口中,当用户单击组栏的溢出按钮时,该弹出窗口将打开。如果元素要参与溢出,则它们必须位于GroupBar中。

当组栏上有溢出项时,溢出按钮会显示在未溢出元素的右侧,并且会显示一个字形,指示可以按下该按钮。将组栏中的所有元素都移入溢出后,溢出按钮将显示由组栏的ImageSource属性指定的图像(如果有的话)。

可以通过组栏的PopupTitle属性设置溢出项的标题。

与RibbonItem一样,GroupBar从技术上讲可以包含任何类型的UIElement,但是最好使用专为功能区设计的控件,如上一节中所列。不能放置到组栏中的唯一控件是GalleryBar。像往常一样,在Xaml中,将元素添加为组栏的直接子元素,在同一件事后面的代码中,通过将元素添加到Items集合来完成,并且对于数据绑定方案,将数据对象的集合绑定到ItemsSource属性。

调整父窗口的大小,减小宽度时,并非所选功能区的所有元素都适合可用空间,元素将移入溢出状态。

设置溢出顺序

元素放入组栏溢出面板的顺序由附加的依赖项属性RibbonItem.OverflowIndex确定。此属性是在RibbonItem上定义的,因为尽管溢出是由GroupBar管理的,但是相对于包含的功能区项目定义了序列。该序列从0开始,并且对于每个连续的“跳跃”递增1,并且序列中不能有任何间隙。换句话说,要放入溢出的第一个元素是OverflowIndex为0,其后为index 1的元素,依此类推。允许具有相同索引的多个元素。请注意,序列是在功能区项目中的所有组栏中定义的。例如,假设功能区项目中有两个组栏,即组栏A和组栏B。

为方便起见,所有专门为功能区定义的控件,允许它们成为GroupBar的子控件,尽管它们都映射回了RibbonItem.OverflowIndex附加属性,但它们都有自己的OverflowIndex属性。

看下面的例子。前两个RibbonRadioButton控件将始终位于顶层(它们不会溢出),因为它们不在GroupBar中。要隐藏在溢出中的第一个项目是Show / Hide GroupBar中的最后一个RibbonCheckBox,其OverflowIndex =0。其余的将根据上升的溢出索引进行。两个OverflowIndex为3的RibbonButtons将同时移入溢出状态。请注意,Zoom GroupBar内的第一个RibbonButton没有OverflowIndex的值,表明它将永远不会被放置到溢出中。虽然同一组栏中的最后一个元素的溢出索引为–1,但始终会处于溢出状态。

<mobile:RibbonItem Header="View">
     <mobile:RibbonRadioButton Content="Edit" IsChecked="True" ImageSource="Images/EditModeIcon.png" />
     <mobile:RibbonRadioButton Content="Read" ImageSource="Images/ReadModeIcon.png" />
     <Separator />
     <mobile:GroupBar PopupTitle="Zoom">
         <mobile:RibbonButton Content="100%" ImageSource="Images/100PercentZoomIcon.png" />
         <mobile:RibbonButton OverflowIndex="3" Content="Zoom Out" />
         <mobile:RibbonButton OverflowIndex="3" Content="Zoom In" />
         <mobile:RibbonCheckBox OverflowIndex="-1" IsChecked="True" Content="Enable Auto Zoom" />
     </mobile:GroupBar>
     <Separator />
     <mobile:GroupBar PopupTitle="Show/Hide" ToolTip="Show/Hide">
         <mobile:RibbonCheckBox OverflowIndex="2" Content="Ruler" />
         <mobile:RibbonCheckBox OverflowIndex="1" Content="Grid" />
         <mobile:RibbonCheckBox OverflowIndex="0" Content="Navigation Pane" />
     </mobile:GroupBar>  </mobile:RibbonItem>

在溢出中排列元素

无论项目实际以何种顺序移入溢出区,它们总是以其原始顺序放入溢出区面板中。这无法更改。但是,可以指定将相邻的项目放置在同一行中。这是通过附加的依赖类型为Object的依赖项属性GroupBar.OverlowRow完成的。具有相同值的OverflowRow的相邻元素将共享同一行。

要将分隔符放置在溢出面板中但不在主显示屏中显示的行之间,请在两个条目之间插入一个OverflowSeparator控件。

带有画廊的物品选择

Gallery是带有SelectedItem以及其他相关属性和事件的ItemsControl。画廊中的项目有两种本机容器类型,GalleryItem和GalleryCategory。画廊可以包含一个或另一个的集合,或两者结合的集合。可以选择GalleryItem。另一方面,无法选择GalleryCategory。其功能仅是组织项目的一种手段。GalleryCategory本身是一个ItemsControl,其本机容器类型也是GalleryItem。属于子类别的画廊项目是完全可以选择的,就好像它们是父画廊本身的子项目一样。选择包含在类别中的项目时,该项目(或作为其容器的项目)将成为父库的选定项目。

可以通过属性SelectedItem设置或读取画廊的所选项目。与SelectedItem相关的属性是SelectedIndex和Value。SelectedIndex是相对于画廊的Items集合的所选项目的索引。在使用类别的情况下,所选索引从一个类别的结尾到下一个类别的开头依次连续。

值由所选项目与ValuePath属性一起确定。如果未设置ValuePath,则Value将等于SelectedItem。如果设置,它指定相对于SelectedItem持有的对象的属性路径,该路径是Value的值。请注意,如果无法将Value解析为图库中包含的项目(或图库中的类别所包含的项目),则SelectedItem将设置为null,SelectedIndex设置为-1。

Gallery和GalleryCategory都具有ItemsPanelOption属性,可能的值是VerticalSttack,HorizontalStack,VerticalWrap和HorizontalWrap。此属性是定义自定义ItemsPanel的捷径(尽管如果需要,您仍然可以使用ItemsPanel。)

使用GalleryCategory的Header属性指定类别标题,并使用HeaderTemplate显示如何呈现它。

GalleryItem是具有IsSelected属性的控件。将IsSelectable设置为false将使该项目不可选择。如果需要,可以使用Command和CommandParameter,以及路由事件“选定”,“未选定”和“单击”。Content和ContentTemplate定义,以及ImageSource定义视觉外观。

有几个选项可用于自定义图库项目的外观。一种是使用父库的ItemContainerStyle属性,即使它们在类别中,该属性也将应用于它们。若要为不同类别中的项目定义不同的样式,请使用GalleryCategory的ItemContainerStyle属性。如果在Gallery或GalleryCategory上设置了ItemTemplate,则将其用作画廊项目的ContentTemplate。最后,总是有可能定义一个针对GalleryItem的隐式样式。

当使用Gallery的ItemContainerStyle属性时,该样式将应用于它所包含的GalleryCategory或GalleryItem控件,具体取决于样式TargetType。

默认情况下,画廊项目在按下时是动画的。若要关闭此行为,请使用属性DontAnimateWhenPressed。

您可能会注意到Gallery是一个扁平容器,类似于ListBox,并且不适合功能区的主工具栏。它必须显示在弹出窗口中。有两个从Gallery继承的控件,它们适合功能区的主工具栏,并使用弹出窗口显示Gallery项目。这些是GalleryBar和ComboBox。可以用于在弹出窗口中显示图库的另一个控件是RibbonPopupButton。接下来介绍这些控件。

使用GalleryBar快速访问。

GalleryBar控件被设计为RibbonItem的直接后代。换句话说,它不能放置在GroupBar中,因此它将始终位于顶层,并且本身不能移入溢出状态。但是它确实有其自身的溢出。

GalleryBar有两个集合。第一,它从Gallery继承的Items集合显示在弹出窗口中。另一个是QuickAccessItems集合。它用于显示在顶层的项目,而无需打开弹出窗口。这个想法是放置在QuickAccessItems中的项目是Items集合中项目的子集。选择快速访问项目也会导致选择相应的图库项目,反之亦然。请注意,快速访问项仅需要与图库项具有相等的值。如果引用相等是不可能的,则没有必要。可以使用Xaml或代码将项目直接添加到QuickAccessItems集合。要在数据绑定方案中定义集合,请创建一个集合并将其绑定到QuiclAccessItemsSource属性。以下是一个Xaml示例,该示例显示了如何添加具有相应图库项目的快速访问。请注意,图库项目的“内容”将用于在快速访问中的项目与其对应的图库项目之间建立相等性。

<mobile:GalleryBar PopupTitle="Styles" ToolTip="Styles" QuickAccessOverflowIndexes="5,6,11">
     <mobile:GalleryBar.QuickAccessItems>
         <mobile:GalleryItem Content="Normal" IsSelected="True" />
         <mobile:GalleryItem Content="No Spacing" />
         <mobile:GalleryItem Content="Heading 1" FontSize="18" Foreground="Blue" />
     </mobile:GalleryBar.QuickAccessItems>
     <mobile:GalleryItem Content="Normal" />
     <mobile:GalleryItem Content="No Spacing" />
     <mobile:GalleryItem Content="Heading 1" FontSize="21" Foreground="LightSkyBlue" />
     <mobile:GalleryItem Content="Heading 2" FontSize="18" Foreground="LightSkyBlue" />
     <mobile:GalleryItem Content="Title" FontSize="24" />
</mobile:GalleryBar>

使用QuickAccessItemContainerStyle和QuickAccessItemTemplate属性可自定义快速访问库项目的外观或其内容。

与上面讨论的GroupBar类似,GalleryBar有一个溢出,用于快速访问项目。使用QuickAccessOverflowIndexes(可枚举的整数值)来指定将项目移入溢出的顺序。这些值将按顺序应用于快速访问项,这样索引列表中的第一个值将应用于最后一个快速访问项。重要的是要注意,索引是相对于父RibbonItem的,与分配给GroupBar中项目的溢出索引完全相同。

使用图库栏的溢出按钮打开显示图库本身的弹出窗口,该按钮显示在快速访问项目的右侧。只要快速访问区域中有可见的项目,此按钮的内容将是一个下拉字形。当所有项目都移入溢出状态时,将显示图像。该图像通过GalleryBar的ImageSource属性设置。

使用IsDropDownOpen以编程方式打开弹出窗口。

您可以使用属性MaximumPopupHeight指定弹出窗口的最大高度。

使用PopupTitle和PopupTitleTemplate指定弹出窗口的标题以及如何呈现它,与GroupBar相同。

使用RibbonComboBox

RibbonComboBox是从Gallery继承的另一个控件。它不是WPF ComboBox的后代。原因主要是支持类别。RibbonComboBox确实从标准ComboBox借用了很多属性,并且行为方式大致相同。

请注意,RibbonComboBox的本机容器类型是RibbonComboBoxItem。将其用作隐式样式定义的TargetType或设置为ItemContainerStyle值的样式。

为方便起见,提供了Header属性。默认情况下,标题显示在实际组合框的左侧。HeaderTemplate显示如何呈现Header。

IsDropDownOpen获取或设置组合框的下拉菜单是否打开。MaxDropDownHeight指定下拉菜单的最大高度。

IsEditable指定所选内容显示在TextBox中还是作为弹出按钮的内容显示。如果IsEditable为true,则将IsReadOnly应用于TextBox并确定用户是否可以输入文本。

要获取或设置可编辑文本框的文本,请使用Text属性。请注意,文本代表组合框的值,而不是其SelectedItem(除非两者相同)。如果用户输入的文本转换为图库中包含的值,则将选择该项目。如果该值不在图库中,则SelectedItem设置为null。如果从文本到值的转换失败,则可编辑文本框中的文本将还原为开始编辑时的文本。

当Text的值更改时,将引发TextChanged路由事件。事件处理程序是RoutedPropertyChangedEventHandler <string>。这是在MainWindow中为TextChanged添加处理程序的示例。下一行来自窗口的构造函数:

AddHandler(RibbonComboBox.TextChangedEvent, 
           new RoutedPropertyChangedEventHandler<string>(RibbonComboBox_TextChanged), false);  

And here is the handler itself:

private void RibbonComboBox_TextChanged(object sender, RoutedPropertyChangedEventArgs<string> args)  {
     var comboBox = (RibbonComboBox)args.OriginalSource;
     // Loops through all categories.
     foreach (GalleryCategory category in comboBox.Categories)
     { }
     // Loop through all items, from all categories.
     foreach(object item in comboBox.AllItems)
     { }  }

当组合框可编辑且不是只读时,支持自动完成。属性AutoCompleteOption可以打开或关闭自动完成功能,并定义其行为。该属性是一个标志枚举,其可能值为Off,ReadOnly,FreeText和DontConvertCase。关禁用自动完成。ReadOnly启用自动完成功能,同时将输入限制为图库所包含的值。FreeText启用自动完成功能,并允许用户输入任何文本。可以将DontConvertCase设置为ReadOnly或FreeText,以使自动完成区分大小写。

像所有旨在放置在RibbonItem或GroupBar中的功能区控件一样,RibbonComboBox同时具有OverflowIndex属性和SharedOverflowRow属性。这些在上面有关GroupBar的部分中进行了详细讨论。

RibbonPopupButton –通用下拉菜单。

RibbonPopupButton是一个HeaderedItemsControl,带有一个切换按钮和一个弹出窗口。选中切换按钮后,将打开弹出窗口以显示项目。

除了ContentPresenter外,RibbonPopupButton没有特定的本机容器类型。您可以将任何所需的内容放入其中-任何类型的Visual或任何类型的对象。如果某项不是可视项(即是数据对象或视图模型对象),请确保关联一个显示如何渲染它的DataTemplate。(要为对象定义DataTemplate,请使用ItemTemplate或ItemTemplateSelector属性,或为对象类型定义隐式DataTemplates。)

可以将RibbonPopupButton放在另一个RibbonPopupButton内。当第二个按钮的弹出窗口打开时,它将替换其父级的弹出窗口,并且在弹出窗口的标题旁边将有一个后退按钮,允许用户关闭第二个弹出窗口并返回到第一个弹出窗口。

使用IsOpen属性获取或设置弹出窗口是否打开。MaximumPopupHeight和MaximumPopupWidth定义弹出窗口的大小。与往常一样,PopupTitle设置弹出内容的标题,而PopupTitleTemplate显示如何呈现它。如果需要,可以使用PopupPadding设置弹出内容的填充。

切换按钮的内容由Header和HeaderTemplatte属性定义。使用ImageSource添加一个没有标题的图片。或者,为了获得更大的灵活性,可以使用Icon和IconTemplate代替ImageSource。默认样式添加了默认的下拉字形。

Qt常用组件

  • QtitanRibbon| 下载试用: 遵循Microsoft Ribbon UI Paradigm for Qt技术的Ribbon UI组件,致力于为Windows、Linux和Mac OS X提供功能完整的Ribbon组件。
  • QtitanChart | 下载试用 :是一个C ++库,代表一组控件,这些控件使您可以快速地为应用程序提供漂亮而丰富的图表。并且支持所有主要的桌面操作系统。
  • QtitanDataGrid | 下载试用 :这个Qt数据网格组件使用纯C++创建,运行速度极快,处理大数据和超大数据集的效果突出。QtitanDataGrid完全集成了QtDesigner,因而极易适应其他相似的开发环境,保证100%兼容Qt GUI。

标签:

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

文章转载自:

为你推荐

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


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP