翻译|使用教程|编辑:鲍佳佳|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等控件。
接上文
对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常用组件:
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@capbkgr.cn
文章转载自: