none
WPF Ribbon 前台Resources如何改写到资源字典中? RRS feed

  • 问题

  • 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

答案

  • 可以引用多个资源字典的。使用ResourceDictionary. MergedDictionaries 语法如下:

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

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

    可以考虑binding command 的方式。

    2012年8月16日 6:23