DotNetBar for WPF是一個用于創(chuàng)建專業(yè)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

創(chuàng)建一個移動應用程序

要創(chuàng)建一個使用MobileRibbon的移動應用程序，請從一個基本的WPF應用程序開始，并添加對DevComponents.WPF.Mobile的引用。為了正常工作，MobileRibbon需要生活在一個MobileWindow里面，所以你要把MainWindow的基類改為MobileWindow。一旦您有了一個MobileWindow，下一步就是設置MobileTheme。所選的MobileTheme設置了色帶的主色調(diào)（藍色、綠色、橙色或紫色）。此外，它還定義了一組在整個移動命名空間中使用的全局資源。附加的依賴屬性MobileTheme.ApplicationTheme設置了主題，它可以是內(nèi)置的主題之一，也可以是你定義的自定義主題。下面是一個例子，它將被放在MobileWindow的xaml的主屬性部分。

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

MobileWindow的顯著屬性是：

• ChromeStyle –確定窗口鑲邊的外觀。可能的值為無，默認（標準Windows 10桌面鑲邊），Windows10，Office2013和ExtendedRibbon（鑲邊延伸到功能區(qū)中并且顏色相同）。
• ShowFullScreenButton –確定鑲邊是否具有將窗口置于全屏模式的按鈕。
• ChromeToolBarItems –用于將自定義工具欄項目添加到xaml中的鑲邊或后面的代碼中。（將ChromeToolBarItemsSourcee用于數(shù)據(jù)綁定方案。）

添加設置彈出

在進入功能區(qū)之前，我們先來看看如何在窗口中添加一個SettingsFlyout。雖然布局通常是通過位于ribbon后臺的 "Settings"按鈕打開的，但SettingsFlyout控件本身并不位于ribbon內(nèi)部。相反，它是窗口的一個子控件。SettingsFlyout應該以這樣的方式添加到窗口的根網(wǎng)格中，當打開時，它能夠跨越窗口的全部高度和寬度。例如，如果根網(wǎng)格有2行和2列，那么flyout應該將Grid.RowSpan和Grid.ColumnSpan都設置為2。

添加彈出框后，可以設置其頁眉和頁腳屬性。當未選擇任何項目時，兩者都將顯示在主視圖中，同時顯示項目列表。

SettingsFlyout是SettingsFlyoutItem控件的容器。SettingsFlyoutItem同時具有Content和Header屬性。彈出菜單的主視圖中列出了所有項目的標題，未選擇任何項目時將顯示該視圖。選擇一個項目時，將同時顯示標題和內(nèi)容。

SettingsFlyoutItem不需要Content才有用。在這種情況下，你可以設置一個Command(和可選的CommandParameter)，或者你可以處理項目的Clicked事件并做任何需要的事情。如果你想在一個項目被點擊時關閉飛出，將ClosesFlyout設置為true。如果你需要flyout保持打開，但不希望項目被選中，你也可以將IsSelectable設置為false。

添加功能區(qū)

MobileRibbon應該插入到窗口的根網(wǎng)格的第一行中，并允許跨所有列。

MobileRibbon可以顯示與窗口標題不同的標題。TitleTemplate顯示如何呈現(xiàn)Title。如果您為“標題”設置了一個值但想要隱藏它，請使用HideTitle屬性。

功能區(qū)具有一個內(nèi)部工具欄，您可以在其中放置與主顯示區(qū)分開的按鈕和其他控件-在項目標題的右側(cè)。要將對象放入xaml或后面的代碼中，請使用ToolBarItems屬性。對于數(shù)據(jù)綁定方案，將對象放入綁定到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>

色帶可以折疊。當折疊時，包含所選色帶項目內(nèi)容的底部條帶將被隱藏。Ribbon可以通過IsCollapsed屬性手動折疊和展開。也可以通過AutoCollapseOption屬性將ribbon設置為自動折疊。 AutoCollapseOption是一個枚舉，可能的值為None和WhenSelectedRibbonItemClicked。如果設置為后者，那么顧名思義，當用戶點擊已經(jīng)選中的ribbon項目時，ribbon將自動折疊。WhenSelectedRibbonItemClicked是AutoCollapseOption的默認值。

設置后臺將在下一節(jié)介紹。但ribbon本身也有與后臺相關的屬性，這里就不贅述了。默認情況下，如果你設置了一個后臺，那么用來打開后臺的按鈕就會被顯示出來，如果沒有后臺，按鈕就不會被顯示出來。可以通過ShowBackstageButton屬性來覆蓋這個行為。后臺按鈕的內(nèi)容是通過BackstageButtonContent來設置的，而BackstageButtonContentTemplate則顯示了如何渲染它。如果你需要知道后臺是否打開，使用IsBackstageOpen。

添加后臺

功能區(qū)的后臺由Backstage控件實現(xiàn)。要將后臺添加到功能區(qū)，請創(chuàng)建一個Backstage控件，并將其設置為功能區(qū)的Backstage屬性的值。或者，您可以將數(shù)據(jù)對象綁定到Backstage屬性，并使用在其根目錄處帶有Backstage的隱式DataTemplate。

Backstage是BackStageItem控件的容器。BackStageItem與上述的SettingsFlyoutItem非常相似。實際上，兩者之間的唯一區(qū)別是SettingsFlyoutItem具有其ClosesFlyout屬性，而BackstageItem具有名為ClosesBackstage的屬性。由于它們在功能上相同，因此它們的行為相同并且以相同的方式使用。

關于Backstage和SettingsFlyout值得注意的是，通常使用Backstage中的按鈕來打開設置彈出窗口。為了實現(xiàn)這一點，已將名為OpenSettingsFlyoutCommand的RoutedCommand定義為MobileWindow的靜態(tài)屬性。通過將其設置為后臺項目的命令，您的用戶可以從后臺打開設置。例如：

<mobile:BackstageItem Header="Settings"                        
                      IsSelectable="False"
                      ClosesBackstage="True" 
                      Command="{x:Static mobile:MobileWindow.OpenSettingsFlyoutCommand}" />

MobileRibbon是MobileRibbonItem控件的容器。在Xaml中，MobileRibbonItem控件可以作為Ribbon的子控件直接添加。在后面的代碼中，你會把它們添加到ribbon的Items集合中。在數(shù)據(jù)綁定方案中，創(chuàng)建一個數(shù)據(jù)對象集合，并將其綁定到ribbon的ItemsSource屬性。

RibbonItem的Header屬性指定了在ribbon的標簽部分顯示的對象。使用HeaderTemplate來展示如何渲染Header。

當用戶點擊一個ribbon項的頭部時，它的Click事件會被觸發(fā)，它的Command會被執(zhí)行（如果它有Command的話），并被選中。要以編程方式設置一個ribbon項是否被選中，請使用它的IsSelected屬性。當IsSelected屬性發(fā)生變化時，無論是通過用戶操作還是編程，ribbon項都會根據(jù)情況引發(fā)Selected/Unselected事件。這兩個事件都是路由事件。

從技術上講，可以將任何類型的UIElement添加到RibbonItem的Items集合中，并在選擇RibbonItem時顯示。元素可以作為直接子級添加到Xaml中。對于后面的代碼，請使用Items集合，對于數(shù)據(jù)綁定方案，請創(chuàng)建數(shù)據(jù)對象的集合并將其綁定到ItemsSource屬性。RibbonItem沒有ItemTemplate屬性，因此，如果確實將數(shù)據(jù)對象放入其中，則還需要定義一個隱含的DataTemplate，以數(shù)據(jù)對象的Type為目標，該Type顯示應如何呈現(xiàn)它們。

即使可以將任何類型的UIElement添加到RibbonItem，也要實現(xiàn)與功能區(qū)的內(nèi)置樣式和行為的兼容性，請使用專門為其設計和實現(xiàn)的控件。這些是：

• GroupBar –用于將彼此相關的其他元素分組的容器。有一個按鈕，用于打開一個彈出窗口以顯示溢出項。
• 畫廊–用于收集可選項目的容器，一次可以選擇一個（或零個）。支持項目類別。
• GalleryBar –具有按鈕的畫廊，該按鈕可打開用于顯示其項目的彈出窗口。可以在主顯示中顯示項目的子集。
• RibbonComboBox –功能正常的組合框，但基于Gallery以便支持類別。
• RibbonPopupButton –一個項目集合的容器，顯示為一個按鈕。當按下按鈕時，將打開一個彈出窗口以顯示項目。
• RibbonButton –用屬性和功能擴展ButtonBase（在Windows.Controls.Primitives中），以支持與功能區(qū)的兼容性并簡化您（程序員）的工作。
• RibbonToggleButton –從RibbonButton派生的切換按鈕。
• RibbonRadioButton –從RibbonToggleButton派生的單選按鈕。
• RibbonCheckBox –從RibbonToggle Butt派生的復選框。

其中，GroupBar通常是功能區(qū)項目的子項，因為它是所有其他項目（GalleryBar除外）的容器，并且支持溢出。

使用分隔符在功能區(qū)項目的兩個元素之間放置一條垂直線。

下一章節(jié)將繼續(xù)講解對GroupBar中的元素進行分組，設置溢出順序等。