DotNetBar for WPF是一個(gè)用于創(chuàng)建專業(yè)WPF應(yīng)用并擁有超過38個(gè)原生WPF控件的工具箱，其中包含了新的日程安排控件、Wpf-Ribbon控件、具有Office樣式的Ribbon控件和Wpf-Dock控件以及具有OfficeOutlook樣式的Navigation Pane控件等。對(duì)于日期輸入，DotNetBar for WPF還提供了Date/Time Picker、Numeric Input、Month-calendar以及TabNavigation等控件。

點(diǎn)擊下載最新版DotNetBar for WPF

創(chuàng)建一個(gè)移動(dòng)應(yīng)用程序

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

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

MobileWindow的顯著屬性是：

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

添加設(shè)置彈出

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

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

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

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

添加功能區(qū)

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

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

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

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

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

添加后臺(tái)

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

Backstage是BackStageItem控件的容器。BackStageItem與上述的SettingsFlyoutItem非常相似。實(shí)際上，兩者之間的唯一區(qū)別是SettingsFlyoutItem具有其ClosesFlyout屬性，而BackstageItem具有名為ClosesBackstage的屬性。由于它們?cè)诠δ苌舷嗤虼怂鼈兊男袨橄嗤⑶乙韵嗤姆绞绞褂谩?

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

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

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

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

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

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

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

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

其中，GroupBar通常是功能區(qū)項(xiàng)目的子項(xiàng)，因?yàn)樗撬衅渌?xiàng)目（GalleryBar除外）的容器，并且支持溢出。

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

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