现在我们就可以编译这个项目,我们会得到一个常规菜单式界面的普通Windows应用程序。这种呆板的界面是不是有些看得厌烦了呢?现在,我们就来为这个应用程序改头换面,添加上时尚的Ribbon界面。在上文中,我们已经介绍过Ribbon界面的描述是通过xml文件来实现的,所以我们新添加一个XML文件到项目中,然后将其编辑如下:
<Application xmlns="http://schemas.microsoft.com/windows/2009/Ribbon">
<Application.Commands>
<Command Name="TabHome" Symbol="cmdTabHome" Id="30000" />
</Application.Commands>
<Application.Views>
<Ribbon>
<Ribbon.Tabs>
<Tab CommandName="TabHome">
</Tab>
</Ribbon.Tabs>
</Ribbon>
</Application.Views>
</Application>
<Application.Commands>
<Command Name="TabHome" Symbol="cmdTabHome" Id="30000" />
</Application.Commands>
<Application.Views>
<Ribbon>
<Ribbon.Tabs>
<Tab CommandName="TabHome">
</Tab>
</Ribbon.Tabs>
</Ribbon>
</Application.Views>
</Application>
在这个XML文件中我们可以看到,整个XML文件被分成了两个部分:命令(Commands)和视图(Views)。命令部分会定义各个控件的属性,包括命令的名字(Name),符号(Symbol),标签文本,图标,命令提示等等。这里需要特别注意的是,控件的名字会在下面的视图部分用到,用来指示同一个控件,而控件的符号,则会在对控件消息进行处理时用到,用来指示消息来自哪一个控件。一个更加完整的命令部分看起来像下面这个样子:
<Application.Commands>
<!--Tab页面-->
<Command Name="TabHome" Symbol="cmdTabHome" Id="30000" LabelTitle="主页" />
<!--主要分组-->
<Command Name="GroupMain" Symbol="cmdGroupMain" Id="30001" LabelTitle="组控件"/>
<Command Name="MyButton" Symbol="cmdMyButton" Id="30002" LabelTitle="按钮控件">
<Command.TooltipTitle>按钮控件</Command.TooltipTitle>
<Command.TooltipDescription>点击这个按钮控件,获得当前系统时间。</Command.TooltipDescription>
<Command.LargeImages>
<Image Source="Button_Image.bmp"/>
</Command.LargeImages>
<Command.SmallImages>
<Image Source="Button_Image.bmp"/>
</Command.SmallImages>
</Command>
</Application.Commands>
<!--Tab页面-->
<Command Name="TabHome" Symbol="cmdTabHome" Id="30000" LabelTitle="主页" />
<!--主要分组-->
<Command Name="GroupMain" Symbol="cmdGroupMain" Id="30001" LabelTitle="组控件"/>
<Command Name="MyButton" Symbol="cmdMyButton" Id="30002" LabelTitle="按钮控件">
<Command.TooltipTitle>按钮控件</Command.TooltipTitle>
<Command.TooltipDescription>点击这个按钮控件,获得当前系统时间。</Command.TooltipDescription>
<Command.LargeImages>
<Image Source="Button_Image.bmp"/>
</Command.LargeImages>
<Command.SmallImages>
<Image Source="Button_Image.bmp"/>
</Command.SmallImages>
</Command>
</Application.Commands>
在这段代码中,我们定义了一个Tab分页TabHome,然后定义了一个分组GroupMain,最后,我们还定义了一个按钮MyButton,同时定义了这个按钮的标签文本,工具提示,大小图标等。
XML文件的命令部分负责控件的定义,而在视图部分,则是将上面定义的各种命令进行布局,将他们组织到各种控件容器中去,比如分页,分组,工具栏和应用程序菜单等等。同时,视图部分还负责将控件跟各个具体的控件类型绑定起来。一个完整的视图部分看起来像这个样子:
<Application.Views>
<Ribbon>
<Ribbon.Tabs>
<Tab CommandName='TabHome'>
<Group CommandName='GroupMain' SizeDefinition='OneButton'>
<Button CommandName='MyButton'/>
</Group>
</Tab>
</Ribbon.Tabs>
</Ribbon>
</Application.Views>
<Ribbon>
<Ribbon.Tabs>
<Tab CommandName='TabHome'>
<Group CommandName='GroupMain' SizeDefinition='OneButton'>
<Button CommandName='MyButton'/>
</Group>
</Tab>
</Ribbon.Tabs>
</Ribbon>
</Application.Views>
上面的XML文件很好地反映了控件之间的嵌套关系:Tab页面包含一个分组,而这个分组又包含一个按钮控件。这样,我们就将我们在命令部分定义的各个控件布局到了Ribbon面板上。