Remove From My Forums

WPF Ribbon 前台Resources如何改写到资源字典中？

问题

登录进行投票

WPF 4 Ribbon 开发之应用程序菜单（Application Menu）

在上一篇中我们完成了快捷工具栏的开发，本篇将讲解应用程序菜单开发的相关内容。如下图所示，点击程序窗口左上角的记事本图标（Application Button）会显示出应用程序菜单（Application Menu）列表，列表中的按键即为软件的一些基本功能。

ApplicationMenu

RibbonCommand

以“Open”按键为例，首先仍然需要在<RibbonWindow.Resources>中定义其<RibbonCommand>内容。

<r:RibbonCommand x:Key="OpenCommand" LabelTitle="Open"
                 CanExecute="OpenCommand_CanExecute"
                 Executed="OpenCommand_Executed"
                 SmallImageSource="Images/Open.png"
                 LargeImageSource="Images/Open.png"
                 ToolTipTitle="Open" 
                 ToolTipDescription="Open document" />

为<RibbonCommand>添加Command 事件实现打开文档功能：

private void OpenCommand_CanExecute(object sender, CanExecuteRoutedEventArgs e)
{
    e.CanExecute = true;
}

ApplicationMenu

<RibbonCommand>完成后继续在<Ribbon>中添加<RibbonApplicationMenu>用于设置菜单列表中的内容。其中<RibbonApplicationMenuItem>即为菜单按键，将相应的<RibbonCommand>添加到Command 属性中。另，按键之间可用<Separator>作为分隔。

<r:Ribbon DockPanel.Dock="Top" FocusManager.IsFocusScope="True" Title="WPF4 Notepad">
    <r:Ribbon.ApplicationMenu>
        <r:RibbonApplicationMenu Command="{StaticResource AppMenuCommand}">
            <r:RibbonApplicationMenuItem Command="{StaticResource OpenCommand}" />
            <r:RibbonApplicationMenuItem Command="{StaticResource SaveCommand}" />
            <Separator/>
            <r:RibbonApplicationSplitMenuItem Command="{StaticResource SendAsCommand}">
                <r:RibbonApplicationMenuItem Command="{StaticResource MailCommand}" />
                <r:RibbonApplicationMenuItem Command="{StaticResource TwitterCommand}" />
            </r:RibbonApplicationSplitMenuItem>
            <Separator/>
            <r:RibbonApplicationMenuItem Command="{StaticResource CloseCommand}" />
        </r:RibbonApplicationMenu>
    </r:Ribbon.ApplicationMenu>
</r:Ribbon>

上面代码中对于存在子菜单的按键（例如，SendAs 按键）可用<RibbonApplicationSplitMenuItem>对其进行扩展。子菜单标题内容可通过<RibbonCommand>的LabelDescription 属性进行设置（如下代码）。

<r:RibbonCommand x:Key="SendAsCommand" LabelTitle="SendAs"
                 LabelDescription="Send this text to the World"
                 CanExecute="SendAsCommand_CanExecute"
                 SmallImageSource="Images/SendAs.png"
                 LargeImageSource="Images/SendAs.png"
                 ToolTipTitle="SendAs" 
                 ToolTipDescription="Send this text to the World" />

AppMenu

ApplicationButton

最后来完成应用程序菜单图标（记事本图标）的开发。当然也需要通过<RibbonCommand>进行设置，与之前不同之处在于不用添加CanExecute 和Executed 内容。

<r:RibbonCommand x:Key="AppMenuCommand" LabelTitle="Application Button"
                 SmallImageSource="Images/Notepad.png"
                 LargeImageSource="Images/Notepad.png"
                 ToolTipTitle="WPF4 Notepad" 
                 ToolTipDescription="Notepad Application with Ribbon Sample" />

将<RibbonCommand>加入<RibbonApplicationMenu> Command 属性后默认情况呈现下图样式，图标的形状并不与Office 2007 一样为圆形。

AppBtn

如果想要圆形效果其实也很简单，Ribbon 控件库为我们提供了三种样式模板：Office2007Black、Office2007Blue、Office2007Silver，只需在MainWindow() 中加入一行代码即可实现圆形效果和不同的Ribbon 样式。

WPF 4 Ribbon 开发之标签工具栏（Tab Toolbar）

本篇将开始介绍标签工具栏的开发内容，标签工具栏可以说是Ribbon 的核心部分，应用程序所有的功能特性都会集中在这里，一个强大的Ribbon 工具栏也是一款软件成功的关键。在开始前还是先来看看标签工具栏的结构，从图中可看出Ribbon 工具栏主要分为四部分：Ribbon -> Tab -> Group -> Control。

Ribbon

下面来添加一个Clipboard 菜单组，其中包括三个RibbonButton 控件分别实现“粘贴”、“拷贝”、“剪切”功能。与前两篇文章一样，先为Button 控件编写<RibbonCommand> 和Command 事件内容。

Clipboard

<r:RibbonCommand x:Key="PasteCommand" LabelTitle="Paste"
                 CanExecute="PasteCommand_CanExecute"
                 Executed="PasteCommand_Executed"
                 SmallImageSource="Images/Paste.png"
                 LargeImageSource="Images/Paste.png"
                 ToolTipTitle="Paste" 
                 ToolTipDescription="Paste contents" />
<r:RibbonCommand x:Key="CopyCommand" LabelTitle="Copy"
                 CanExecute="CopyCommand_CanExecute"
                 Executed="CopyCommand_Executed"
                 SmallImageSource="Images/Copy.png"
                 LargeImageSource="Images/Copy.png"
                 ToolTipTitle="Copy" 
                 ToolTipDescription="Copy selected contents" />
<r:RibbonCommand x:Key="CutCommand" LabelTitle="Cut"
                 CanExecute="CutCommand_CanExecute"
                 Executed="CutCommand_Executed"
                 SmallImageSource="Images/Cut.png"
                 LargeImageSource="Images/Cut.png"
                 ToolTipTitle="Cut" 
                 ToolTipDescription="Cut selected contents" />

在Command 事件中使用了ApplicationCommands 来完成Paste、Copy、Cut 各项功能。同时使用FocusManger.GetFocusedElement 来锁定ApplicationCommands 的操作对象（TextBox），这也就是为什么在《WPF 4 Ribbon 开发之快捷工具栏（Quick Access Toolbar）》一文中提到的将<Ribbon> 的FocusManager.IsFocusScope 属性设为True 的原因。将上面RibbonCommand 设置加入相应<RibbonButton>的Command 属性中。

<r:Ribbon DockPanel.Dock="Top" FocusManager.IsFocusScope="True" Title="WPF4 Notepad">
    <r:Ribbon.QuickAccessToolBar>
        ... ...
    </r:Ribbon.QuickAccessToolBar>

    <r:Ribbon.ApplicationMenu>
        ... ...
    </r:Ribbon.ApplicationMenu>

    <r:RibbonTab Label="Home">
        <r:RibbonGroup HasDialogLauncher="True" Command="{StaticResource GroupCommand}">
            <r:RibbonGroup.GroupSizeDefinitions>
                <r:RibbonGroupSizeDefinitionCollection>
                    <r:RibbonGroupSizeDefinition>
                        <r:RibbonControlSizeDefinition ImageSize="Large" />
                        <r:RibbonControlSizeDefinition ImageSize="Small" />
                        <r:RibbonControlSizeDefinition ImageSize="Small" />
                    </r:RibbonGroupSizeDefinition>
                </r:RibbonGroupSizeDefinitionCollection>
            </r:RibbonGroup.GroupSizeDefinitions>
            <r:RibbonButton Command="{StaticResource PasteCommand}" />
            <r:RibbonButton Command="{StaticResource CopyCommand}" />
            <r:RibbonButton Command="{StaticResource CutCommand}" />
        </r:RibbonGroup>
    </r:RibbonTab>

    <r:RibbonTab Label="View" />
    <r:RibbonTab Label="Help" />
</r:Ribbon>

上面程序中通过RibbonControlSizeDefinition 来定义RibbonButton 控件在Group 中的图标显示方式（分别为大、小两种），在本例中我们将Paste 设为大图标，另外Copy、Cut 两个设为小图标。HasDialogLauncher 属性用于设定是否显示Dialog Box Launcher 按键（如下图），如果有需要也可以为Dialog Launcher 添加工具栏。

Launcher

这样一个RibbonGroup 就完成了。有了上面的基础对于Font 组的开发就轻而易举了，在该组中使用了两个<RibbonControlGroup>控件组分别用于字体颜色和尺寸大小的设置，大家可以参考下面代码进一步了解。

<r:RibbonGroup>
    <r:RibbonGroup.Command>
        <r:RibbonCommand LabelTitle="Font" />
    </r:RibbonGroup.Command>
    <r:RibbonControlGroup>
        <r:RibbonLabel ToolTip="Font Color">
            <r:RibbonLabel.Content>
                <Image Source="Images/Paint.png" Width="16" Height="16" />
            </r:RibbonLabel.Content>
        </r:RibbonLabel>
        <r:RibbonButton ToolTip="Black" Background="Black"
                        CommandParameter="Black">
            <r:RibbonButton.Command>
                <r:RibbonCommand Executed="FontColorCommand_Executed" />
            </r:RibbonButton.Command>
        </r:RibbonButton>
        <r:RibbonButton ToolTip="Red" Background="Red"
                        CommandParameter="Red">
            <r:RibbonButton.Command>
                <r:RibbonCommand Executed="FontColorCommand_Executed" />
            </r:RibbonButton.Command>
        </r:RibbonButton>
        <r:RibbonButton ToolTip="Blue" Background="Blue"
                        CommandParameter="Blue">
            <r:RibbonButton.Command>
                <r:RibbonCommand Executed="FontColorCommand_Executed" />
            </r:RibbonButton.Command>
        </r:RibbonButton>
        <r:RibbonButton ToolTip="Green" Background="Green"
                        CommandParameter="Green">
            <r:RibbonButton.Command>
                <r:RibbonCommand Executed="FontColorCommand_Executed" />
            </r:RibbonButton.Command>
        </r:RibbonButton>
    </r:RibbonControlGroup>

    <r:RibbonControlGroup>
        <r:RibbonLabel ToolTip="Font Size">
            <r:RibbonLabel.Content>
                <Image Source="Images/Font.png" Width="16" Height="16" />
            </r:RibbonLabel.Content>
        </r:RibbonLabel>
        <r:RibbonComboBox x:Name="fontComboBox" Width="80"
                          SelectionChanged="fontComboBox_SelectionChanged">
            <r:RibbonComboBoxItem Content="10"/>
            <r:RibbonComboBoxItem Content="20"/>
            <r:RibbonComboBoxItem Content="30"/>
        </r:RibbonComboBox>
    </r:RibbonControlGroup>
</r:RibbonGroup>

修改字体大小和颜色后的效果图：

Notepad

至此，Ribbon 工具栏相关内容的介绍已全部完成，希望该系列对大家有所帮助。当然Ribbon 控件库中的控件还不止这些，有很多其他控件供开发者使用，有兴趣的朋友可以按需要进行选择，并完善软件的Ribbon 工具栏功能。

注：1.为什么在同一个XAML中不能同时引用两个资源字典文件，请高手指教；

2.程序命令绑定及资源引用都写在前台XAML文件中，我想把命令绑定及资源引用写到独立的资源字典XAML，上面的RibbonCommand 应如何改写，请高手指教；

2012年8月10日 5:35

答案

0

登录进行投票
可以引用多个资源字典的。使用ResourceDictionary. MergedDictionaries 语法如下：

<object> <object.MergedDictionaries> oneOrMoreResourceDictionaries </object.MergedDictionaries> </object>

我看到你的command挂接了事件。所以是不宜单独放置到资源字典中的。

可以考虑binding command 的方式。
- 已标记为答案 Annabella LuoModerator 2012年8月24日 8:57
2012年8月16日 6:23

回复

|

引用

积极答复者

WPF Ribbon 前台Resources如何改写到资源字典中？

问题

WPF 4 Ribbon 开发 之 应用程序菜单（Application Menu）

RibbonCommand

ApplicationButton

WPF 4 Ribbon 开发 之 标签工具栏（Tab Toolbar）

答案

WPF 4 Ribbon 开发之应用程序菜单（Application Menu）

WPF 4 Ribbon 开发之标签工具栏（Tab Toolbar）