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】的下列代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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 文件头
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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 文件中定义,代码如下
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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
“不在。。中”的问题的解决方法:每个按键若先起了名字,都要通过“属性面板”添加事件的办法过滤一遍,方法的代码可以空着,但必须都有且名字一致且是经“属性面板”添加。