Telerik UI for WPF擁有超過100個控件來創(chuàng)建美觀、高性能的桌面應用程序，同時還能快速構建企業(yè)級辦公WPF應用程序。UI for WPF支持MVVM、觸摸等，創(chuàng)建的應用程序可靠且結構良好，非常容易維護，其直觀的API將無縫地集成Visual Studio工具箱中。

想要為您的WPF應用程序創(chuàng)建一個智能導航欄？讓它像微軟Outlook應用程序那樣使用？不用到處尋找了，Telerik UI for WPF R1 2023中新發(fā)布的這個RadOfficeNavigationBar組件也許能幫您做到！

Telerik UI for WPF在最新的R1 2023中發(fā)布了一個RadOfficeNavigationBar組件，這個組件可以為任何WPF應用程序創(chuàng)建更直觀的導航，同時具有可單擊的導航項，每個導航項都提供了調用特定功能的能力，并顯示一個完全可自定義的Peek彈出窗口，其中包含有用的信息。

Telerik_KendoUI產品技術交流群：726377843    歡迎一起進群討論

直觀的導航任務

直觀的導航對于任何應用程序的成功都是至關重要的，它可以幫助最終用戶以快速和簡單的方式查找信息，這樣的導航會提高用戶的滿意度，并增加進一步使用應用程序的意愿。

這就是RadOfficeNavigationBar派上用場的地方，讓我們一起來詳細了解一下吧!

緊湊與否？

首先，有必要介紹可以選擇的可能模式，以指定項目的可視化方式。

有一個默認模式，它只顯示文本項。還有一個只有圖標的緊湊的選項，這是由IsInCompactMode屬性啟用的。當選擇此模式時，RadOfficeNavigationBar將使用每個RadOfficeNavigationBarItem元素的CompactContent、CompactContentTemplate和CompactContentTemplateSelector屬性的指定值。

但是，如果用更復雜的結構達到下一個層次呢？實驗一下ContentTemplate：

<telerik:RadOfficeNavigationBar HorizontalAlignment="Left" HorizontalContentAlignment="Left" Background="White">
<telerik:RadOfficeNavigationBarItem Content="Mail">
<telerik:RadOfficeNavigationBarItem.ContentTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<telerik:RadGlyph Glyph="&#xe809;" Foreground="#9A59B5"/>
<TextBlock Text="{Binding}" Foreground="#8D44AD" Margin="5 0 0 0"/>
</StackPanel>
</DataTemplate>
</telerik:RadOfficeNavigationBarItem.ContentTemplate>
</telerik:RadOfficeNavigationBarItem>
<telerik:RadOfficeNavigationBarItem Content="Calendar">
<telerik:RadOfficeNavigationBarItem.ContentTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<telerik:RadGlyph Glyph="&#xe63f;" Foreground="#3598DB"/>
<TextBlock Text="{Binding}" Foreground="#297FB8" Margin="5 0 0 0"/>
</StackPanel>
</DataTemplate>
</telerik:RadOfficeNavigationBarItem.ContentTemplate>
</telerik:RadOfficeNavigationBarItem>
<telerik:RadOfficeNavigationBarItem Content="Contacts">
<telerik:RadOfficeNavigationBarItem.ContentTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<telerik:RadGlyph Glyph="&#xe801;" Foreground="#2DCC70"/>
<TextBlock Text="{Binding}" Foreground="#27AE61" Margin="5 0 0 0"/>
</StackPanel>
</DataTemplate>
</telerik:RadOfficeNavigationBarItem.ContentTemplate>
</telerik:RadOfficeNavigationBarItem>
</telerik:RadOfficeNavigationBar>

結果如下：

預覽可用Peek Callout

office導航欄可以顯示一個Peek Callout彈出預覽窗口，當然它可以滿足各種需求。

當用戶將鼠標懸停在office導航欄項上時，彈出窗口將出現(xiàn)。它可以顯示你選擇的內容——想要的任何東西都可以顯示，只需要通過設置IsPeekPopupEnabled屬性為True來啟用它。

由于彈出窗口是使用RadCallout，這意味著可以自由地創(chuàng)建各種不同形狀的彈出窗口外觀并調整每個細節(jié)，通過PeekPopupStyle實現(xiàn)完美的Peek Callout布局。

三個點

注意到那三個點了嗎?單擊它們會打開導航選項對話框，開發(fā)者可以選擇控件的模式-壓縮或默認，希望顯示多少項，以及它們的顯示順序。完成后，請確保單擊OK確認所有操作。

溢出

擁有太多的項很麻煩，把它們放在一個小的應用空間就更困難了。RadOfficeNavigationBar的溢出菜單可以幫助開發(fā)者解決這個問題！它可以幫助您控制導航欄中的可見項和它們出現(xiàn)的順序。

重新排序

IsDragReorderEnabled屬性可以幫助開發(fā)者在不使用導航選項對話框的情況下來改變項目的排列順序，啟用它就可以了。另一個重要的事情是為每個RadOfficeNavigationBarItem元素設置DragDropManager.AllowCapturedDrag附加屬性。

<telerik:RadOfficeNavigationBar x:Name="radOfficeNavigationBar" IsDragReorderEnabled="True" Grid.Row="3" Margin="30" HorizontalAlignment="Left" HorizontalContentAlignment="left">
<telerik:RadOfficeNavigationBar.ItemContainerStyle>
<!--Set BasedOn property if NoXaml assemblies are used: BasedOn="{StaticResource RadOfficeNavigationBarItemStyle}"-->
<Style TargetType="telerik:RadOfficeNavigationBarItem">
<Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True"/>
<Setter Property="MinWidth" Value="50"/>
</Style>
</telerik:RadOfficeNavigationBar.ItemContainerStyle>
<telerik:RadOfficeNavigationBar.Items>
<telerik:RadOfficeNavigationBarItem Content="Mail "/>
<telerik:RadOfficeNavigationBarItem Content="Calendar "/>
<telerik:RadOfficeNavigationBarItem Content="People"/>
<telerik:RadOfficeNavigationBarItem Content="Notes"/>
<telerik:RadOfficeNavigationBarItem Content="Tasks"/>
</telerik:RadOfficeNavigationBar.Items>
</telerik:RadOfficeNavigationBar>

皮膚改變

office導航欄可以擁有很多不同的皮膚，UI for the WPF主題套件的RadOfficeNavigaion也能提供各種各樣的UI，使用ColorThemeGenerator來嘗試不同的顏色。

組合

你知道RadOfficeNavigationBar和RadNavigationView形成了一個很棒的組合嗎？導航欄只是一個補充，以導航視圖的底部導航面板。我們來看看這是什么樣子?