构建类似Office 2007框架的WPF应用程序（2）

五、设计Ribbon

由于之前有用过DevExpress的UI套件，对Ribbon不算陌生。但想使用微软的亲儿子，似乎没有那么便利。

先添加多个RibbonTab，并给各个RibbonTab增加一个Group和Button。代码如下：

        <my:Ribbon Grid.Row="0">
            <my:RibbonTab Header="Tab1">
                <my:RibbonGroup Header="Group1">
                    <my:RibbonButton Name="Button1" Label="Button1"></my:RibbonButton>
                </my:RibbonGroup>
            </my:RibbonTab>
            <my:RibbonTab Header="Tab2">
                 <my:RibbonGroup Header="Group2">
                    <my:RibbonButton Name="Button2" Label="Button2"></my:RibbonButton>
                </my:RibbonGroup>               
            </my:RibbonTab>
            <my:RibbonTab Header="Tab3">
                
            </my:RibbonTab> 
            <my:RibbonTab Header="Tab4">
                
            </my:RibbonTab>             
        </my:Ribbon>

第一个不习惯出来了。Design界面出现的是Tab1的功能区，想鼠标点击其他Tab，没反应。双击一下，结果自动添加了SelectionChanged事件。这事件在后面倒是有用，先留着。

编译后，倒是可以切换Tab。

但设计阶段不能看添加控件的效果，总是很不爽的呀。

经过多次探索，发现了几个可以查看其他RibbonTab的方法。

第一，移动RibbonTab的代码。既然是只能显示第一个Tab，那就把需要显示的Tab移到第一个的位置就可以。经过试验，是可以显示，但移来移去很麻烦。

第二，修改Ribbon控件的SelectedIndex属性值。SelectedIndex默认为0，改为哪个索引号就显示哪个Tab。在设计时修改索引号，在编译前修改为0即可。

第二种方法将就使用吧，不再深究。

六、给Button控件添加图标

图文并茂，会给用户带来亲切感。

这里给上述两个Button控件添加图片。

RibbonButton有添加图标的两个属性LargeImageSource和SmallImageSource，分别处理大小图标。

我创建个Images文件夹，存放各种png图标。直接敲代码：

<my:RibbonButton x:Name="Button1" Label="Button1" LargeImageSource="Images/play.png"/>

Design界面会出现相关图标，编译也没发生错误，但运行时就跳出异常了，如下：

Exception thrown: 'System.Windows.Markup.XamlParseException' in PresentationFramework.dll

Additional information: “在“System.Windows.Baml2006.TypeConverterMarkupExtension”上提供值时引发了异常。”，行号为“18”，行位置为“55”。

开始我还以为是写的路径不对或斜杠不对，多次修改，还是一样异常。

后来想想，我的png图标放在独立文件，没有加载入资源。编译只会检查代码是否符合规范，运行时才会调用资源。如果程序不会自动加载外部文件，那就会出现异常。

于是，手动加载图标资源。添加如下：

添加完成后，在按钮属性的组合框就发现了添加的PNG图标，直接选择即可。

重新 编译，运行正常，如下：

先介绍到这里，打字比敲代码还不习惯……

-------------------

源码下载地址：http://download.csdn.net/detail/mandylover/9737118