65.9K
CodeProject 正在变化。 阅读更多。
Home

严肃的Outlook风格导航窗格控件

HawVie
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.94/5 (135投票s)

2009年10月20日

CC (ASA 2.5)

6分钟阅读

viewsIcon

1344533

downloadIcon

72344

一个高质量渲染的Outlook风格导航窗格控件。

1. 引言

谁不知道 Outlook 屏幕左侧的 Outlook 导航窗格？您想在您的项目中免费使用导航窗格吗？请继续阅读。

banner

2. 背景

.NET 市场上充斥着大量垃圾。小型工作室项目被当作大型工具包出售，以高昂的价格提供大量糟糕的控件。为了扩展我的作品集并回馈开源社区，我决定免费提供此控件。此控件也提醒控件供应商，请认真对待您的客户，并为他们提供的金钱提供有价值的控件和支持。好了，废话少说，开始动手吧。

Windows Form，王者已死？？

我决定为 Windows Forms 创建此控件，以展示 Windows Forms 的潜力。Windows Forms 并未过时，因为它性能更好且响应迅速。WPF 还有很长的路要走。此外，您需要一个设计器来设计控件，否则您将最终得到一个圣诞树。

3. 导航窗格的结构

在本节中，我将简要解释导航窗格的基本对象。

Buttons bands and groups

导航窗格由面板 (band)、按钮 (button) 和组 (group) 组成。面板（2）是窗格存在的基本对象。每个面板都与一个按钮（1）一对一链接。当用户单击其中一个按钮时，面板将显示在最前面。面板是包含其他控件的容器，例如组（3）。面板可以与组一起扩展，组可以与 Outlook 中的组进行比较。组是控件容器，可以折叠和展开。

按钮/面板

按钮有三种状态：正常、鼠标悬停时以及按钮为活动状态或按下时。

normal 悬停 active
Button normal Button hovered Button Active

一个按钮与一个面板一对一链接。如果面板作为控件的一部分出现，也会出现一个新的按钮。不可能在不添加面板的情况下添加按钮。

组

一个组有两种状态：要么展开所有子控件可见，要么折叠只有标题可见。

展开 折叠
Group expanded Group collapsed

4. 布局

控件的主类 (NaviBar) 几乎只包含两个集合，用于存放按钮和面板。最重要的逻辑存在于布局类中。主类所做的唯一事情就是决定何时调用布局过程。这就是布局引擎原理。在此处 MSDN 有更详细的解释。

Schema layout

布局过程决定了哪个控件应该可见、处于活动状态以及在什么位置等。此原理的优点在于，无需太多麻烦即可轻松实现不同的布局，因为主控件只知道存在布局，但它确切地做什么，它也不关心。只要它看起来不错，就像 Visual Studio 中的工具箱或 Outlook 中的导航窗格，或者其他一些花哨的视图。

渲染器和颜色表

独立的类负责绘制控件。主类像一个懒惰的经理一样委托。渲染器仅负责绘制对象，颜色来自独立的类，即颜色表。如果您心情好，可以用几行代码使用鲜艳的颜色

  NaviButtonRenderer.ColorTable = FlashyColorTable

这种优雅的原理是从 Visual Studio 随附的默认 .NET 菜单中提取的。

5. 特性

以下是功能的简要列表。要查看完整的功能，请参见演示项目。

Collapse

导航窗格可以以紧凑模式显示。单击控件标题右上角的小按钮。您也可以通过将 NaviBar.Collapsed 属性设置为 true 来折叠导航窗格。如果最终用户单击折叠的窗格，面板将弹出到其他控件的上方。

Bar Collapsed Bar expanded
折叠模式 展开模式

布局样式

导航窗格有六种不同的风格。Office 2007 是主要的布局，对于那些固守过去的人，还有 Office 2003 的外观和感觉。如果您想创建新的颜色风格，则需要覆盖 NaviColorTable 类。

Office 2007 Blue Office 2007 Black Office 2007 Silver
Office 2007 蓝色 Office 2007 黑色 Office 2007 银色
Office 2003 Blue Office 2003 Silver Office 2003 Green
Office 2003 蓝色 Office 2003 银色 Office 2003 绿色
Office 2010 Blue Office 2010 Silver Office 2010 Black
Office 2010 蓝色 Office 2010 银色 Office 2010 黑色

从右到左

此导航窗格是少数几个支持从右到左布局的控件之一。当布局在单独的类中定义时，这项工作并不多。可能并非所有功能都如预期那样。是否有阿拉伯用户愿意测试并让我满意？

从大按钮流动到小按钮再到菜单项

当没有足够的空间容纳小的溢出按钮时，这些按钮将显示为菜单项

Overflow to menu

保存设置

Options form

最终用户可以自定义布局。例如按钮的顺序或按钮的可见性。可以将布局设置保存在外部数据文件中。保存的详细信息包括按钮的顺序、按钮的可见性、可见按钮的数量、分隔条的位置以及窗格是否已折叠。

设置存储在 NaviBar 类中的 Settings 属性中。要将这些设置保存到文件，请添加对 Guifreaks.NavigationBar.XmlSerializers.dll 的引用。此 DLL 使用 XML 序列化，并为了性能考虑使用 sgen.exe 生成。您作为开发人员负责将设置保存到您喜欢的任何数据文件中。以下是保存设置到 XML 文件的示例。

 if (saveFileDialogSettings.ShowDialog() == DialogResult.OK)
 {
    try
    {
       string fileName = saveFileDialogSettings.FileName;
       NaviBarSettingsSerializer serial = new NaviBarSettingsSerializer();
       using (TextWriter w = new StreamWriter(fileName))
       {
          serial.Serialize(w, naviBar1.Settings);
       }
    }
    catch (Exception ex)
    {
       MessageBox.Show(ex.Message);
    }
 }

您可以使用同一个 DLL 来加载设置。加载设置后，使用 NaviBar 类中的 ApplySettings 方法来激活设置。

 if (openFileDialogSettings.ShowDialog() == DialogResult.OK)
 {
    try
    {
       string fileName = openFileDialogSettings.FileName;
       NaviBarSettingsSerializer serial = new NaviBarSettingsSerializer();
       using (StreamReader reader = new StreamReader(fileName))
       {
          NaviBarSettings settings = serial.Deserialize(reader) as NaviBarSettings;
          if (settings != null)
          {
             naviBar1.Settings = settings;
             naviBar1.ApplySettings();
          }
       }
    }
    catch (Exception ex)
    {
       MessageBox.Show(ex.Message);
    }
 }

与 Visual Studio 集成

与 Visual Studio 的集成主要是最后列表中的那个，我宁愿忘记它。但它非常重要。例如，与文档大纲窗口集成。其他设计时功能包括单击按钮以激活面板并将其置于最前面。

安装程序

该控件附带一个安装程序，该安装程序会自动在 Visual Studio 中添加一个选项卡和工具箱项。如果您想要一个可安装的包，请访问 guifreaks.net。

6. 示例

这里有一些基本的代码示例，应该能帮助您快速上手。

如何添加新组？

在设计器中，您可以从工具箱中选择组并将其拖放到面板中。以下是从源代码添加组的代码示例

NaviGroup group = new NaviGroup();  
 
group.Text = "test";  
group.Expanded = true;  
group.Dock = DockStyle.Top;  
 
naviBand3.Controls.Add(group);

如何添加新面板？

您可以使用 NaviBar.Bands 属性向导航窗格添加新面板。当按钮以水平方式显示在底部时，出现小图像。当按钮以大按钮水平显示时，出现大图像。

NaviBand band = new NaviBand();  
band.Text = "NaviBand" + (naviBar1.Bands.Count + 1).ToString();  
band.SmallImage = Properties.Resources.bookmark1;  
band.LargeImage = Properties.Resources.bookmark;  
naviBar1.Bands.Add(band);

如何设置布局？

可以使用 NaviBar.LayoutStyle 属性设置布局。

naviBar1.LayoutStyle = NaviLayoutStyle.Office2003Silver;

如何激活一个面板？

使特定面板成为活动面板非常简单

naviBar1.ActiveBand = naviBar1.Bands[0];

版本

我建议使用最新版本和安装程序。
最新版本的安装程序和源代码可以在 http://www.guifreaks.net 找到。

历史

  • 2010 年 11 月 13 日：文章已更新至最新版本
  • 2009 年 10 月 21 日：添加了 Visual Basic .NET 示例项目
  • 2009 年 10 月 20 日：文章 CodeProject
  • 2009 年 10 月 16 日：初始发布
© . All rights reserved.