翻譯|使用教程|編輯:鮑佳佳|2021-01-21 10:30:55.443|閱讀 337 次
概述:要創建一個使用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。畫廊可以包含一個或另一個的集合,或兩者結合的集合??梢赃x擇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集合中項目的子集。選擇快速訪問項目也會導致選擇相應的圖庫項目,反之亦然。請注意,快速訪問項僅需要與圖庫項具有相等的值。如果引用相等是不可能的,則沒有必要??梢允褂肵aml或代碼將項目直接添加到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@fc6vip.cn
文章轉載自: