在VS2012 中Ribbon for WPF的介绍和使用教程

参考：参考1
参考2
自Office2007开始，软件都逐渐地采用了Ribbon界面，一方面是时尚，如同许多厂商声称的那样，是 state of arts，另外，通过调查表明，Ribbon界面比传统的下拉栏菜单方式的工作效率提高了不少。到目前为止Ribbon界面只更新到了VS2010，在结合了众多工程师前辈的基础上，介绍一下Ribbon在VS2012版本中的使用。首先 下载 MSI安装程序。


在安装完Ribon控件库，就可以在程序中使用Ribbon工具栏了。下图所示：Ribbon工具栏主要分为Tab(Home,Insert)、Group(Clipboard)、Application Button、Quick Access Toolbar四大部分，本篇先介绍Quick Access Toolbar相关的开发。

首先RibbonControlsLibrary.dll（本人在C:\Program Files (x86)\Microsoft Ribbon for WPF\V4.0中） 加入项目，在XAML 中添加Ribbon 控件的命名空间，在Ribbon 库中提供了供大家使用，可以将原来的 标签替换之。这时要注意要在“MainWindow.xaml.cs”中更改根元素，命名空间添加“using System.Windows.Controls.Ribbon; ”如下：

public partial class MainWindow : RibbonWindow
{
        public MainWindow()
        {
            InitializeComponent();
        }
}

XAML Code：

<RibbonWindow 
        x:Class="WpfApplication4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Custom="http://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon"
     
        Title="WpfApplication4" Height="450" Width="800"
        WindowStartupLocation="CenterScreen">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Ribbon x:Name="ribbon" FocusManager.IsFocusScope="True">
            <!--快捷工具栏-->
            <Ribbon.QuickAccessToolBar>
                <RibbonQuickAccessToolBar>
                    <RibbonButton SmallImageSource=".\Images\Calculate1.png"/>
                    <RibbonButton SmallImageSource=".\Images\Calculate1.png"/>
                    <RibbonSplitButton SmallImageSource=".\Images\Calculate1.png"><!--出现一个倒三角，下拉可选择-->
                        <RibbonSplitMenuItem Header="Undo1" />
                        <RibbonSplitMenuItem Header="Undo2" />
                        <RibbonSplitMenuItem Header="Undo3" />
                    </RibbonSplitButton>
                </RibbonQuickAccessToolBar>                
            </Ribbon.QuickAccessToolBar>
            <!--Ribbon Help Pane Content-->
            <Ribbon.HelpPaneContent>
                <RibbonButton SmallImageSource=".\Images\Calculate1.png" />
            </Ribbon.HelpPaneContent>
            <!--Ribbon Application Menu-->
            <Ribbon.ApplicationMenu>
                <RibbonApplicationMenu KeyTip="F">
                    <!--KeyTip表示快捷键-->
                    <RibbonApplicationMenuItem Header="Save" Width="150" ImageSource=".\Images\Calculate1.png"/>
                    <RibbonApplicationMenuItem Header="Options" ImageSource=".\Images\Calculate1.png" />
                </RibbonApplicationMenu>
            </Ribbon.ApplicationMenu>
            <!--Ribbon Tab #1 Home-->
            <RibbonTab Header="Home" KeyTip="H">
                <RibbonGroup Header="Home">
                    <RibbonMenuButton **LargeImageSource**=".\Images\Calculate1.png" Label="Paste" KeyTip="V">
                        <RibbonMenuItem Header="Keep Text Only" />
                        <RibbonMenuItem Header="Keep Source Format" />
                    </RibbonMenuButton>

                    <RibbonButton **SmallImageSource**=".\Images\Calculate1.png" Label="Copy" />
                    <RibbonButton SmallImageSource=".\Images\Calculate1.png" Label="Format" />
                </RibbonGroup>

                <RibbonGroup Header="Operation">
                    <RibbonMenuButton LargeImageSource=".\Images\Calculate1.png" Label="Delete" />
                    <RibbonMenuButton SmallImageSource=".\Images\Calculate1.png" Label="Save" />
                    <RibbonMenuButton SmallImageSource=".\Images\Calculate1.png" Label="Print" />
                </RibbonGroup>
            </RibbonTab>
            <RibbonTab Header="View" KeyTip="V">

            </RibbonTab>

            <RibbonTab Header="Help">

            </RibbonTab>
        </Ribbon>
    </Grid>
</RibbonWindow>

运行结果：

XAML代码中标粗的LargeImageSource和SmallImageSource对应的RibbonButton在大小上是有区别的。另外，如果需要在一个Ribbon Tab下有不同的功能分类，可以使用Ribbon Group进行划分。

另外上面的运行结果截图的窗体很怪异，左右两边明显很宽。这个问题在Windows 8一下的平台是不存在的。可以通过下面的方式解决。设置WindowsChrome。

  xmlns:shell="clr-namespace:System.Windows.Shell;assembly=PresentationFramework"

    <WindowChrome.WindowChrome>
        <WindowChrome GlassFrameThickness="{x:Static shell:WindowChrome.GlassFrameCompleteThickness}" />
    </WindowChrome.WindowChrome>

想要实现这种界面可以使用Fluent Ribbon,首先需要下载Fluent.all