界面组件Telerik UI for WPF R1 2023新版亮点——让导航栏变得更智能!

界面组件Telerik UI for WPF全新发布了2023年第一个重大版本,本文将详细新版本中的导航组件,欢迎下载使用!

Telerik_KendoUI产品技术交流群:726377843    欢迎一起进群讨论

直观的导航任务

直观的导航对于任何应用程序的成功都是至关重要的,它可以帮助最终用户以快速和简单的方式查找信息,这样的导航会提高用户的满意度,并增加进一步使用应用程序的意愿。

这就是RadOfficeNavigationBar派上用场的地方,让我们一起来详细了解一下吧!

紧凑与否/strong>

首先,有必要介绍可以选择的可能模式,以指定项目的可视化方式。

有一个默认模式,它只显示文本项。还有一个只有图标的紧凑的选项,这是由IsInCompactMode属性启用的。当选择此模式时,RadOfficeNavigationBar将使用每个RadOfficeNavigationBarItem元素的CompactContent、CompactContentTemplate和CompactContentTemplateSelector属性的指定值。

Telerik UI for WPF R1 2023新版图集

但是,如果用更复杂的结构达到下一个层次呢验一下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>

结果如下:

Telerik UI for WPF R1 2023新版图集
预览可用Peek Callout

office导航栏可以显示一个Peek Callout弹出预览窗口,当然它可以满足各种需求。

当用户将鼠标悬停在office导航栏项上时,弹出窗口将出现。它可以显示你选择的内容——想要的任何东西都可以显示,只需要通过设置IsPeekPopupEnabled属性为True来启用它。

Telerik UI for WPF R1 2023新版图集

由于弹出窗口是使用RadCallout,这意味着可以自由地创建各种不同形状的弹出窗口外观并调整每个细节,通过PeekPopupStyle实现完美的Peek Callout布局。

三个点

注意到那三个点了吗击它们会打开导航选项对话框,开发者可以选择控件的模式-压缩或默认,希望显示多少项,以及它们的显示顺序。完成后,请确保单击OK确认所有操作。

Telerik UI for WPF R1 2023新版图集
溢出

拥有太多的项很麻烦,把它们放在一个小的应用空间就更困难了。RadOfficeNavigationBar的溢出菜单可以帮助开发者解决这个问题!它可以帮助您控制导航栏中的可见项和它们出现的顺序。

Telerik UI for WPF R1 2023新版图集
重新排序

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>

Telerik UI for WPF R1 2023新版图集
皮肤改变

office导航栏可以拥有很多不同的皮肤,UI for the WPF主题套件的RadOfficeNavigaion也能提供各种各样的UI,使用ColorThemeGenerator来尝试不同的颜色。

组合

你知道RadOfficeNavigationBar和RadNavigationView形成了一个很棒的组合吗航栏只是一个补充,以导航视图的底部导航面板。我们来看看这是什么样子/p>

Telerik UI for WPF R1 2023新版图集

了解最新Kendo UI最新资讯,请关注Telerik中文网!

标签:

来源:慧都

声明:本站部分文章及图片转载于互联网,内容版权归原作者所有,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2023年1月5日
下一篇 2023年1月5日

相关推荐

发表回复

登录后才能评论