4、Ribbon菜单工具栏 和 按钮事件

1、Ribbon菜单工具栏

1.1 参考资料：

【1】　　http://www.drdobbs.com/windows/whats-new-in-wpf-45/240009614

【2】　　http://www.cnblogs.com/gnielee/archive/2010/05/10/wpf4-ribbon-quick-access-toolbar.html

【3】      Apress.Pro.WPF.4.5.in.VB.Dec.2012.pdf

1.2 概述

前两篇资料基本足够用。其实，文献 【3】的下列代码：

<r:RibbonWindow x:Class="RibbonTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height = "350" Width = "525"
xmlns:r=
"clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly = RibbonControlsLibrary">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" > </RowDefinition>
<RowDefinition > </RowDefinition>
</Grid.RowDefinitions>
<r:Ribbon>
</r:Ribbon>
</Grid>
</r:RibbonWindow>

将上述代码中所有的

r:Ribbon

更改为

Ribbon

按书上的步骤就可以了。

1.3 总结

其实可看作是以一个窗口类的实例替换了窗口类。细节可能较多，但主要就是下列三块。

一、文件头

二、Ribbon布局容器

三、在Ribbon容器内分别放置“快速访问栏”、“New菜单” 和 “功能区” 。其中功能区每一个“选项卡”为一块。

代码及说明如下。

1.3.1 文件头

<RibbonWindow x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:AlcIteApp1" 
        VerticalContentAlignment="Center" Icon="Images/logo.png"
        Title="ALC Develop Toos Environment" Width="800" Height="600" SnapsToDevicePixels="True" 
        Background="{DynamicResource {x:Static SystemColors.AppWorkspaceBrushKey}}" 
        WindowState="Maximized">

注意，里面已经放置了图片。xmlns:local="clr-namespace:AlcIteApp1" 该行与Ribbon无关。就是把Window改为RibbonWindow而已。当然，要先添加“引用”见文献【1】

1.3.2 Ribbon布局容器内的代码

<!-- ****停靠容器*************************************************************************** -->
    <DockPanel LastChildFill="True" >
        <!-- **** 1、Ribbon ******************************************************************** -->
        <Ribbon x:Name="Ribbon" SelectedIndex="0" DockPanel.Dock="Top" >
            <!-- ****Quick Access Toolbar - located at the upper-left corner**************** -->
            <Ribbon.QuickAccessToolBar>
                <RibbonQuickAccessToolBar Height="23" VerticalContentAlignment="Center" HorizontalContentAlignment="Stretch">
                    <RibbonButton x:Name ="Save" SmallImageSource="Images\save.png" />
                    <RibbonSplitButton x:Name ="Undo" SmallImageSource="Images\undo.png" >
                        <RibbonSplitMenuItem Header="Undo action #1" />
                        <RibbonSplitMenuItem Header="Undo action #2" />
                        <RibbonSplitMenuItem Header="Undo action #3" />
                    </RibbonSplitButton>
                    <RibbonSplitButton x:Name="Redo" SmallImageSource="Images\redo.png" >
                        <RibbonSplitMenuItem Header="Redo action #1" />
                        <RibbonSplitMenuItem Header="Redo action #2" />
                    </RibbonSplitButton>
                </RibbonQuickAccessToolBar>
            </Ribbon.QuickAccessToolBar>

            <!-- ****菜单标题栏************************************************************* -->
            <!-- ****Help Pane, located at the right-hand side************************** -->
            <Ribbon.HelpPaneContent>
                <RibbonButton SmallImageSource="Images\help.png" />
            </Ribbon.HelpPaneContent>

            <!-- ****Application Menu, located at the left-hand side (down arrow)******* -->
            <Ribbon.ApplicationMenu>

                <!-- ****Application Menu*********************************************** -->
                <RibbonApplicationMenu x:Name="ClipboadGroup" Label="Cliboard" KeyTip="F" 
                                       SmallImageSource="images\logo.png" Height="23">
                    <!-- 新建项（含二级菜单项） -->
                    <RibbonApplicationMenuItem Header="新建" ImageSource="images\NewFile.png" KeyTip="N">
                        <RibbonApplicationMenuItem Header="向导" ImageSource="images\flagYellow.png" KeyTip="W" />
                        <RibbonApplicationMenuItem Header="设计" ImageSource="images\folder.png" KeyTip="S"/>
                    </RibbonApplicationMenuItem>
                    <!-- 打开项（仅一级菜单项） -->
                    <RibbonApplicationMenuItem Header="打开" ImageSource="Images\open.png" />
                    <RibbonApplicationMenuItem Header="保存" ImageSource="Images\save.png" />
                    <RibbonApplicationMenuItem Header="打印" ImageSource="Images\print.png" />
                    <!-- 分隔符 -->
                    <RibbonSeparator ></RibbonSeparator>
                    <RibbonApplicationMenuItem Header="Exit" ImageSource="Images\exit.png" />
                    <!-- 分隔符 -->
                    <RibbonSeparator ></RibbonSeparator>
                    <RibbonApplicationMenuItem Header="选项" ImageSource="Images\gear.png" />
                </RibbonApplicationMenu>
            </Ribbon.ApplicationMenu>

            <!-- ****Ribbon Tab #1: 编辑************************************************ -->
            <RibbonTab Header="编辑" KeyTip="E" >
                <!-- Home/Clipboard group-->
                <RibbonGroup x:Name="ClipboardGroup" Header="Clipboard" >
                    <RibbonButton LargeImageSource="Images\paste.png" Label="Paste" KeyTip="V" />
                    <RibbonButton LargeImageSource="Images\cut.png" Label="Cut" KeyTip="X" />
                    <RibbonButton LargeImageSource="Images\copy.png" Label="Copy" KeyTip="C" />
                </RibbonGroup>

                <!-- Home/Clear group-->
                <RibbonGroup x:Name="设备" Header="设备" >
                    <RibbonRadioButton LargeImageSource="Images\clear.png" Label="清除端口" KeyTip="R" />
                    <RibbonRadioButton LargeImageSource="Images\clear_all.png" Label="清除全部" KeyTip="G" />
                </RibbonGroup>
            </RibbonTab>

            <!-- ****Ribbon Tab #2: 操作************************************************ -->
            <RibbonTab Header="操作" KeyTip="L">
                <!-- Launch/Applications group-->
                <RibbonGroup x:Name="Oprate" Header="Oprate">
                    <RibbonRadioButton LargeImageSource="Images\Built.png" Label="编译" KeyTip="B" IsChecked="True"/>
                    <RibbonRadioButton LargeImageSource="Images\Import.png" Label="导入" KeyTip="I"/>
                    <RibbonRadioButton LargeImageSource="Images\Export.png" Label="导出" KeyTip="E"/>
                </RibbonGroup>
                <!-- Launch/烧写 group-->
                <RibbonGroup x:Name="App" Header="Apps">
                    <RibbonRadioButton LargeImageSource="Images\PromRe.png" Label="读出" KeyTip="R" IsChecked="True"/>
                    <RibbonRadioButton LargeImageSource="Images\PromWr.png" Label="烧写" KeyTip="W"/>
                    <RibbonRadioButton LargeImageSource="Images\check.png" Label="校验" KeyTip="C"/>
                </RibbonGroup>
            </RibbonTab>

        </Ribbon>

        <!-- **** 2、状态栏 ************

我使用了一个停靠容器。Ribbon容器放在里面。

就是这样。

 

2、按钮事件

2.1 按钮的样式

在Application.XMAL 文件中定义，代码如下

<Application x:Class="Application"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="MainWindow.xaml" ShutdownMode="OnMainWindowClose" Activated="Application_Activated" Exit="Application_Exit" 
    DispatcherUnhandledException="Application_DispatcherUnhandledException"
    
    >
    <Application.Resources>
        <Style x:Key="BigButtonStyle">
            <Setter Property="Button.FontFamily" Value="Times New Roman" />
            <Setter Property="Button.FontSize" Value="24" />
            <Setter Property="Button.FontWeight" Value="Bold" />
            <Setter Property="Button.Foreground" Value="Red"/>
            
            <Setter Property="Button.Height" Value="100"/>
            <Setter Property="Button.Width" Value="130"/>            
            <Setter Property="Button.Background" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"/>
        </Style>
        <Style x:Key="SmallButtonStyle">
            <Setter Property="Button.FontFamily" Value="Times New Roman" />
            <Setter Property="Button.FontSize" Value="24" />
            <Setter Property="Button.FontWeight" Value="Bold" />
            <Setter Property="Button.Foreground" Value="Red"/>

            <Setter Property="Button.Height" Value="55"/>
            <Setter Property="Button.Width" Value="100"/>
            <Setter Property="Button.Background" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"/>

            <Setter Property="Button.Margin" Value="0,3,0,3"/>
            <Setter Property="Button.Padding" Value="3"/>
        </Style>

        <Style x:Key="StartGroupBoxStyle">
            <Setter Property="GroupBox.FontFamily" Value="Times New Roman" />
            <Setter Property="GroupBox.FontSize" Value="18" />
            <Setter Property="GroupBox.FontWeight" Value="Bold" />
            <Setter Property="GroupBox.Foreground" Value="Gray" />
            
            <Setter Property="GroupBox.Height" Value="150"/>
            <Setter Property="GroupBox.Width" Value="130"/>
            <Setter Property="GroupBox.Background" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"/>
            
        </Style>
    </Application.Resources>
</Application>

2.2 在自定义用户控件中的使用方法

<Button Content="烧写" Style="{StaticResource SmallButtonStyle}" Click="writeProm_Click" />

2.3 添加事件

开始在Ribbon窗口中，使用一个容器，做了几个按钮，遇到无法添加事件的问题。

后来把那些按钮做成一个用户控件，在用户控件中，可以通过“属性面板”添加事件，曾遇到“解析”问题及“不在。。中”的问题。

“解析”问题的解决方法：通过“属性面板”添加事件，然后再修改按键名字，比如    Button_Click1   改为  help_Click

“不在。。中”的问题的解决方法：每个按键若先起了名字，都要通过“属性面板”添加事件的办法过滤一遍，方法的代码可以空着，但必须都有且名字一致且是经“属性面板”添加。