找回密码
 立即注册
首页 业界区 业界 Microsoft Ribbon for WPF 正式发布

Microsoft Ribbon for WPF 正式发布

尹心菱 2025-5-29 19:35:37
     之前写过几篇关于WPF4 中开发Ribbon 工具栏的文章,其中利用的是WPF Ribbon Control 控件库,开发出类似Office 2007 样式的Ribbon 工具栏。当然CodePlex 也提供了Fluent Ribbon Control Suite 项目可以写出Office 2010 样式的工具栏应用程序。8月2日微软正式发布了Microsoft Ribbon for WPF,该Ribbon 控件是100%完全属于的WPF 工具,并支持WPF3.5 SP1 以及WPF4。
  下载安装

       首先下载 MSI 安装程序。Microsoft Ribbon for WPF Source and Samples.msi 程序包括一些源码及实例,安装后VS2010 版的项目开发包MicrosoftRibbonForWPFSourceAndSamples.zip 会释放在C:\Program Files\Microsoft Ribbon for WPF\v3.5.40729.1 目录中。
       Microsoft Ribbon for WPF.msi 程序就是我们真正需要的东西,程序安装后打开VS2010 新建项目,在Windows 模板中可以看到"WPF Ribbon Application" 的选项。
  
1.png

  
2.png

  VS2010 演示

  新建项目后,一个默认Ribbon 模型已经为我们编写好了。
  
3.png

  看看XAML 代码,与原来用过的WPF Ribbon Control 也无太多差异。
  1. <ribbon:RibbonWindow x:Class="WpfRibbonApplicationVS2010.MainWindow"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:ribbon="clr-namespace:Microsoft.Windows.Controls.Ribbon;<br>                      assembly=RibbonControlsLibrary"
  5.         Title="MainWindow" x:Name="RibbonWindow" Width="640" Height="480">
  6.     <Grid x:Name="LayoutRoot">
  7.         <Grid.RowDefinitions>
  8.             <RowDefinition Height="Auto"/>
  9.             <RowDefinition Height="*"/>
  10.         </Grid.RowDefinitions>
  11.         <ribbon:Ribbon x:Name="Ribbon">
  12.             <ribbon:Ribbon.ApplicationMenu>
  13.                 <ribbon:RibbonApplicationMenu SmallImageSource="Images\SmallIcon.png">
  14.                     <ribbon:RibbonApplicationMenuItem Header="Hello _Ribbon"
  15.                                                       x:Name="MenuItem1"
  16.                                                       ImageSource="Images\LargeIcon.png"/>
  17.                 </ribbon:RibbonApplicationMenu>
  18.             </ribbon:Ribbon.ApplicationMenu>
  19.             <ribbon:RibbonTab x:Name="HomeTab"
  20.                               Header="Home">
  21.                 <ribbon:RibbonGroup x:Name="Group1"
  22.                                     Header="Group1">
  23.                     <ribbon:RibbonButton x:Name="Button1"
  24.                                          LargeImageSource="Images\LargeIcon.png"
  25.                                          Label="Button1" />
  26.                     <ribbon:RibbonButton x:Name="Button2"
  27.                                          SmallImageSource="Images\SmallIcon.png"
  28.                                          Label="Button2" />
  29.                     <ribbon:RibbonButton x:Name="Button3"
  30.                                          SmallImageSource="Images\SmallIcon.png"
  31.                                          Label="Button3" />
  32.                     <ribbon:RibbonButton x:Name="Button4"
  33.                                          SmallImageSource="Images\SmallIcon.png"
  34.                                          Label="Button4" />
  35.                 </ribbon:RibbonGroup>
  36.             </ribbon:RibbonTab>
  37.         </ribbon:Ribbon>
  38.     </Grid>
  39. </ribbon:RibbonWindow>
复制代码
Blend4 演示

     更令人兴奋的是该Ribbon 库同样支持Blend4,这样可以更方便的设计Ribbon 工具栏样式。打开Blend4 新建项目也能看到"WPF Ribbon Application"的选项。
4.png

在控件库里也有不少的Ribbon 控件供大家使用。
5.png

在当前项目基础上,拖拽一个RibbonTab 进来,并将Tab 命名为"MyTab"。
6.png
 
7.png

在设计窗口调整MyTab 区域范围。
8.png

Tab 标签设计完成后,继续在MyTab 中添加MyGroup 组,为了设计方便先将Home 标签隐藏。
9.png

调整MyGroup 区域范围。
10.png

在MyGroup 中添加RibbonButton 和RibbonCheckBox 控件,并为RibbonButton 设置一个Small 图标。
11.png

12.png

接下来为添加RibbonButton 和RibbonCheckBox 一些简单的事件。
  1. private void ribbonButton_Click(object sender, RoutedEventArgs e)
  2. {
  3.     // TODO: Add event handler implementation here.
  4.     MessageBox.Show("Button Clicked.");
  5. }
复制代码
13.png
  1. private void RibbonCheckBox_Checked(object sender, RoutedEventArgs e)
  2. {
  3.     // TODO: Add event handler implementation here.
  4.     MessageBox.Show("Checked.");
  5. }
复制代码
14.png
  1. private void RibbonCheckBox_Unchecked(object sender, RoutedEventArgs e)
  2. {
  3.     // TODO: Add event handler implementation here.
  4.     MessageBox.Show("UnChecked.");
  5. }
复制代码
15.png

     通过上面的简单的演示,本次微软发布的Ribbon  for WPF 的确为我们开发Ribbon 工具栏省了不少事,不必为繁琐的嵌套XAML 代码发愁了。感兴趣的朋友可以阅读MicrosoftRibbonForWPFSourceAndSamples.zip 中的源代码学习更为复杂的Ribbon 工具栏。
16.png

17.png

相关参考

1. Ribbon for WPF
2. WPF 4 Ribbon 开发 之 快捷工具栏(Quick Access Toolbar)
3. WPF 4 Ribbon 开发 之 应用程序菜单(Application Menu)
4. WPF 4 Ribbon 开发 之 标签工具栏(Tab Toolbar)

来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
您需要登录后才可以回帖 登录 | 立即注册