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

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

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

Telerik_KendoUI產(chǎn)品技術(shù)交流群：726377843    歡迎一起進(jìn)群討論

直觀的導(dǎo)航任務(wù)

直觀的導(dǎo)航對(duì)于任何應(yīng)用程序的成功都是至關(guān)重要的，它可以幫助最終用戶以快速和簡(jiǎn)單的方式查找信息，這樣的導(dǎo)航會(huì)提高用戶的滿意度，并增加進(jìn)一步使用應(yīng)用程序的意愿。

這就是RadOfficeNavigationBar派上用場(chǎng)的地方，讓我們一起來詳細(xì)了解一下吧!

緊湊與否？

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

有一個(gè)默認(rèn)模式，它只顯示文本項(xiàng)。還有一個(gè)只有圖標(biāo)的緊湊的選項(xiàng)，這是由IsInCompactMode屬性啟用的。當(dāng)選擇此模式時(shí)，RadOfficeNavigationBar將使用每個(gè)RadOfficeNavigationBarItem元素的CompactContent、CompactContentTemplate和CompactContentTemplateSelector屬性的指定值。

但是，如果用更復(fù)雜的結(jié)構(gòu)達(dá)到下一個(gè)層次呢？實(shí)驗(yàn)一下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>

結(jié)果如下：

預(yù)覽可用Peek Callout

office導(dǎo)航欄可以顯示一個(gè)Peek Callout彈出預(yù)覽窗口，當(dāng)然它可以滿足各種需求。

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

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

三個(gè)點(diǎn)

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

溢出

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

重新排序

IsDragReorderEnabled屬性可以幫助開發(fā)者在不使用導(dǎo)航選項(xiàng)對(duì)話框的情況下來改變項(xiàng)目的排列順序，啟用它就可以了。另一個(gè)重要的事情是為每個(gè)RadOfficeNavigationBarItem元素設(shè)置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導(dǎo)航欄可以擁有很多不同的皮膚，UI for the WPF主題套件的RadOfficeNavigaion也能提供各種各樣的UI，使用ColorThemeGenerator來嘗試不同的顏色。

組合

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