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

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

Telerik UI for WPF在最新的R1 2023中發布了一個RadOfficeNavigationBar組件，這個組件可以為任何WPF應用程序創建更直觀的導航，同時具有可單擊的導航項，每個導航項都提供了調用特定功能的能力，并顯示一個完全可自定義的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導航欄項上時，彈出窗口將出現。它可以顯示你選擇的內容——想要的任何東西都可以顯示，只需要通過設置IsPeekPopupEnabled屬性為True來啟用它。

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

三個點

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

溢出

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

重新排序

IsDragReorderEnabled屬性可以幫助開發者在不使用導航選項對話框的情況下來改變項目的排列順序，啟用它就可以了。另一個重要的事情是為每個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形成了一個很棒的組合嗎？導航欄只是一個補充，以導航視圖的底部導航面板。我們來看看這是什么樣子?