WPF中Ribbon控件的使用

时间:2022-02-11 01:57:32

这篇博客将分享如何在WPF程序中使用Ribbon控件。Ribbon可以很大的提高软件的便捷性。

上面截图使Outlook 2010的界面,在Home标签页中,将所属的Menu都平铺的布局,非常容易的可以找到想要的Menu。在Outlook 2003时代,将Home下面的Menu都垂直的排列下来,,操作的便捷程度降低了很多。Ribbon的布局会随着窗体的变化动态的调整。

上面的图片中标注了Ribbon的4个区块。

下面我们就在WPF中使用Ribbon控件来实现一个简单的界面。

1. 添加System.Windows.Controls.Ribbon的引用;

2. XAML Code:

<RibbonWindow x:Class="WpfRibbonWinApp.MainWindow" xmlns="" xmlns:x="" xmlns:d="" xmlns:mc="" xmlns:shell="clr-namespace:System.Windows.Shell;assembly=PresentationFramework" xmlns:local="clr-namespace:WpfRibbonWinApp" mc:Ignorable="d" Title="Ribbon Window App" WindowStartupLocation="CenterScreen" Height="350" Width="525"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Ribbon Grid.Row="0"> <!--Ribbon Quick Access Toolbar--> <Ribbon.QuickAccessToolBar> <RibbonQuickAccessToolBar> <RibbonButton SmallImageSource="Resources\Images\Save_30px.png" /> <RibbonSplitButton SmallImageSource="Resources\Images\Undo_30px.png"> <RibbonSplitMenuItem Header="Undo1" /> <RibbonSplitMenuItem Header="Undo2" /> <RibbonSplitMenuItem Header="Undo3" /> </RibbonSplitButton> <RibbonSplitButton SmallImageSource="Resources\Images\Redo_30px.png"> <RibbonSplitMenuItem Header="Redo1" /> <RibbonSplitMenuItem Header="Redo2" /> <RibbonSplitMenuItem Header="Redo3" /> </RibbonSplitButton> </RibbonQuickAccessToolBar> </Ribbon.QuickAccessToolBar> <!--Ribbon Help Pane Content--> <Ribbon.HelpPaneContent> <RibbonButton SmallImageSource="Resources\Images\Help_30px.png" /> </Ribbon.HelpPaneContent> <!--Ribbon Application Menu--> <Ribbon.ApplicationMenu> <RibbonApplicationMenu KeyTip="F"> <RibbonApplicationMenuItem Header="Save" Width="150" ImageSource="Resources\Images\Save_30px.png"/> <RibbonApplicationMenuItem Header="Options" ImageSource="Resources\Images\Settings_30px.png" /> </RibbonApplicationMenu> </Ribbon.ApplicationMenu> <!--Ribbon Tab #1 Home--> <RibbonTab Header="Home" KeyTip="H"> <RibbonGroup Header="Home"> <RibbonMenuButton LargeImageSource="Resources\Images\Paste_30px.png" Label="Paste" KeyTip="V"> <RibbonMenuItem Header="Keep Text Only" /> <RibbonMenuItem Header="Keep Source Format" /> </RibbonMenuButton> <RibbonButton SmallImageSource="Resources\Images\Undo_30px.png" Label="Copy" /> <RibbonButton SmallImageSource="Resources\Images\Redo_30px.png" Label="Format" /> </RibbonGroup> <RibbonGroup Header="Operation"> <RibbonMenuButton LargeImageSource="Resources\Images\Delete_30px.png" Label="Delete" /> <RibbonMenuButton SmallImageSource="Resources\Images\Save_30px.png" Label="Save" /> <RibbonMenuButton SmallImageSource="Resources\Images\Print_30px.png" Label="Print" /> </RibbonGroup> </RibbonTab> <RibbonTab Header="View" KeyTip="V"> </RibbonTab> <RibbonTab Header="Help"> </RibbonTab> </Ribbon> </Grid> </RibbonWindow>

运行结果: