WPF 4 Ribbon 开发 之 快捷工具栏(Quick Access Toolbar)

     在Office 2007 和Windows 7 两款产品中微软开始引入了一种新概念:“Ribbon 工具栏”,Ribbon 工具栏的界面设计模式可以使用户方便快捷的找到所需的工具,同时这种直观的设计形式有助于用户发现软件其他功能特性,以便更好的了解应用程序的功能。

WPF 4 Ribbon 开发 之 快捷工具栏(Quick Access Toolbar)_第1张图片

     设计Ribbon 的目的本身就是要替代以往的老式工具栏,使应用程序的使用更加便捷。当然微软也为开发人员提供了Ribbon 工具栏的控件库(WPF Ribbon Control),方便大家开发出带有类似Office 2007 Ribbon 工具栏的应用程序。

获得Office UI 授权

     在进行Ribbon 开发前首先需要获得Office UI 授权,并下载Ribbon 控件库(DLL)。进入授权页面点击“License the Office UI”。

WPF 4 Ribbon 开发 之 快捷工具栏(Quick Access Toolbar)_第2张图片

     用Windows Live ID 登录并填写个人信息,进入下载页面获得“WPF Ribbon Control”(注,该程序目前只是CTP 版本)。除此之外也可以下载其他相关资料。

WPF 4 Ribbon 开发 之 快捷工具栏(Quick Access Toolbar)_第3张图片

Ribbon 界面结构

     下载Ribbon 控件库后,就可以在程序中使用Ribbon 工具栏了。正式开发前我们先来看看Ribbon 工具栏的基本结构。下图为Office 2007 Ribbon 工具栏,其中主要分为Tab(Home、Insert 等),Group(Clipboard、Font、Paragraph 等)、Application ButtonQuick Access Toolbar 四大部分。本篇将介绍快捷工具栏(Quick Access Toolbar)相关的开发内容。

WPF 4 Ribbon 开发 之 快捷工具栏(Quick Access Toolbar)_第4张图片

快捷工具栏开发

     在本系列的演示将完成一个具有Ribbon 工具栏的Notepad 程序。将RibbonControlsLibrary.dll 加入项目,在XAML 中添加Ribbon 控件的命名空间。另,在Ribbon 库中提供了供大家使用,可以将原来的 标签替换之。

 WPF 4 Ribbon 开发 之 快捷工具栏(Quick Access Toolbar)_第5张图片

<r:RibbonWindow x:Class="WPF4RibbonDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
        Height="360" Width="500">
    ... ...
r:RibbonWindow>

     接下在快捷工具栏位置添加三个按键,分别实现以下功能:“保存文档”、“清空文档”和“帮助”。其实Ribbon 本身就是一个Command 工具栏,我们可以在中为三个按键定义好相应的内容。

Quick

     在下面代码中CanExecute 用于判断是否执行Command,Executed 用于执行Command 的相关事件。SmallImageSource、LargeImageSource 用于设置工具栏大小图标,便于在窗口大小调整时随之变化。

<r:RibbonWindow.Resources>
    <r:RibbonCommand x:Key="SaveCommand" LabelTitle="Save"
                     CanExecute="SaveCommand_CanExecute"
                     Executed="SaveCommand_Executed"
                     SmallImageSource="Images/Save.png"
                     LargeImageSource="Images/Save.png"
                     ToolTipTitle="Save" ToolTipDescription="Save document" />
    <r:RibbonCommand x:Key="ClearCommand" LabelTitle="Clear"
                     CanExecute="ClearCommand_CanExecute"
                     Executed="ClearCommand_Executed"
                     SmallImageSource="Images/Clear.png"
                     LargeImageSource="Images/Clear.png" 
                     ToolTipTitle="Clear" ToolTipDescription="Clear all texts" />
    <r:RibbonCommand x:Key="HelpCommand" LabelTitle="Help"
                     CanExecute="HelpCommand_CanExecute"
                     Executed="HelpCommand_Executed"
                     SmallImageSource="Images/Help.png"
                     LargeImageSource="Images/Help.png" 
                     ToolTipTitle="Help" ToolTipDescription="Help Center" />
r:RibbonWindow.Resources>

     在 中加入标签,添加三个按键,并将上面的Key 值添加到 的Command 属性中。FocusManger.IsFocusScope 可使Command 事件在TextBox 中生效(将在后续标签工具栏文章中提到)。

<DockPanel>
    <r:Ribbon DockPanel.Dock="Top" FocusManager.IsFocusScope="True" Title="WPF4 Notepad">
        <r:Ribbon.QuickAccessToolBar>
            <r:RibbonQuickAccessToolBar>
                <r:RibbonButton r:RibbonQuickAccessToolBar.Placement="InCustomizeMenuAndToolBar"
                                Command="{StaticResource SaveCommand}" />
                <r:RibbonButton r:RibbonQuickAccessToolBar.Placement="InCustomizeMenuAndToolBar"
                                Command="{StaticResource ClearCommand}" />
                <r:RibbonButton r:RibbonQuickAccessToolBar.Placement="InCustomizeMenuAndToolBar"
                                Command="{StaticResource HelpCommand}" />
            r:RibbonQuickAccessToolBar>
        r:Ribbon.QuickAccessToolBar>
r
:Ribbon> DockPanel>

     上面程序中RibbonQuickAccessToolBar.Placement 用于设置快捷工具栏是否允许用户自定义调节。如下图所示可以将Help 按键从快捷工具栏中取消显示。若不设置该值则默认为不能调整,即工具栏中按键内容是固定的。

WPF 4 Ribbon 开发 之 快捷工具栏(Quick Access Toolbar)_第6张图片

     最后,为所有RibbonCommand 事件添加C# 代码完成事件内容,其中文档保存对话框可以使用Windows API Code Pack 的CommonSaveFileDialog 类完成文档保存功能。

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

private void SaveCommand_Executed(object sender, ExecutedRoutedEventArgs e)
{
    ShellContainer sc = KnownFolders.DocumentsLibrary as ShellContainer;
    CommonSaveFileDialog csfd = new CommonSaveFileDialog();
    csfd.InitialDirectoryShellContainer = sc;
    csfd.DefaultExtension = ".txt";
    csfd.Filters.Add(new CommonFileDialogFilter("Text Files", "*.txt"));
    if (csfd.ShowDialog() == CommonFileDialogResult.OK)
    {
        File.WriteAllText(csfd.FileName, txtBox.Text);
    }
}

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

private void ClearCommand_Executed(object sender, ExecutedRoutedEventArgs e)
{
    txtBox.Text = null;
}

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

private void HelpCommand_Executed(object sender, ExecutedRoutedEventArgs e)
{
    MessageBox.Show("You have clicked the help button.");
}

运行效果图:

WPF 4 Ribbon 开发 之 快捷工具栏(Quick Access Toolbar)_第7张图片

WPF 4 Ribbon 开发 之 快捷工具栏(Quick Access Toolbar)_第8张图片

     至此,快捷工具栏的开发内容就讲到这里,下篇将介绍如何开发应用程序菜单(Application Menu),也就是上图左上角记事本图标中的内容。敬请关注… …

相关资料

1. Office UI Licensing Developer Center
http://msdn.microsoft.com/en-us/office/aa973809.aspx

2. Ribbons
http://msdn.microsoft.com/en-us/library/cc872782.aspx

3. WPF Ribbon Preview
http://www.codeplex.com/wikipage?ProjectName=wpf&title=WPF%20Ribbon%20Preview

4. WPF 4 (VS 2010 and .NET 4.0 Series)
http://weblogs.asp.net/scottgu/archive/2009/10/26/wpf-4-vs-2010-and-net-4-0-series.aspx

5. Ribbon Feature Walkthrough
http://windowsclient.net/wpf/wpf35/wpf-35sp1-ribbon-walkthrough.aspx?PageIndex=1

6. Introducing the Windows Ribbon Framework
http://msdn.microsoft.com/en-us/library/dd316910(VS.85).aspx

你可能感兴趣的:(ui,设计模式,c#)