带设计时集成的扩展/动画标题控件

• 下载演示项目 - 25.5 Kb
• 下载源代码 - 199 Kb

引言

需要一种方法来快速直观地设计一些令人印象深刻的控件吗？

我的想法是让创建一种控件变得简单快捷，这种控件可以附加到 Windows 控件上，并通过展开和折叠来显示/隐藏内容。我开始尝试为一个 ListBox 控件添加标题，发现无法达到我想要的效果，于是我继续编写了一个通用的标题控件，你可以将其关联到任何 Windows 控件。我不断为其添加功能，使其真正通用，最终得到了这个结果。

ExtendedHeaderControl 允许你：将标题停靠到 ListBox 等 Windows 控件上。将页脚控件停靠到 Windows 控件上，并使其在动画时跟随控件移动。为 Header 和 Footer 控件定义自定义圆角（耳饰）。添加图像、选择边框、添加文本，并配置 Background 颜色，可以是纯色或渐变色。

概念

这个控件中有三个主要概念我想讨论一下：控件的整体结构和工作原理、展开/折叠的动画效果以及设计时集成功能。

整体结构和工作原理

标题类继承自 Windows Control 类，这使我们能够为那些单调的控件增添一些个性。通过重写 OnPaint 方法，我们可以使其在视觉上更具吸引力、美观。 (一直想用这个词) XPExtendedHeaderBase 类完成了大部分工作，而派生类 XPHeaderControl 和 XPFooterControl 则提供了特定于其功能的组件。

要实现控件的展开/折叠能力，我们必须拥有它的一个引用。一旦有了这个引用，我们将使用控件的高度属性在动画过程中操纵其大小。对于 FooterControl 来说，同样需要能够跟随控件移动。

动画控件

实际上动画并不难。我使用了两个定时器，一个用于展开，一个用于折叠。可能用一个也够了，但这样逻辑会稍微简单些。(老套的 KISS 原则) 这里的逻辑是跟踪你从控件的最小高度（零）到最大高度的位置。我为此使用了一个计数器，它像一个光标，其值代表控件的高度。定时器会根据是展开还是折叠进行操作，来增加或减少这个计数。当我们达到最小或最大计数时，停止定时器，操作完成。唯一棘手的部分是用户在动画激活时切换方向。如果我们使用一个全局的计数字段在两个定时器之间共享，并增加或减少直到达到最小值或最大值后再停止定时器，那么操作将继续进行直到完成。

设计时集成

我最初提交这篇文章时没有这个功能，因为我以为会很复杂，但我错了，事实证明它非常直观且易于实现！你首先定义一个你想操作的属性，并为其分配以下属性：

[Editor(typeof(your-derived-editor), typeof(UITypeEditor))] 

其中 your-derived-editor 是一个派生自 UITypeEditor 的编辑器类，它提供了我们自定义用户选择方式的钩子。可用的交互类型有无（默认）、下拉控件或模态窗体。我选择了下拉窗口，因为它不需要窗体提供的所有服务。我没有尝试过模态窗体，但根据我的研究，实现起来同样简单。

在你的编辑器中，你需要重写两个方法：

public override UITypeEditorEditStyle 
                            GetEditStyle(ITypeDescriptorContext context) 

context 变量是对请求组件的引用，在这里你可以确定你想要的编辑器类型，在我的例子中，我返回 UITypeEditorEditStyle.DropDown 值。第二个方法是

public override object EditValue(ITypeDescriptorContext context, 
                                 IServiceProvider provider, object value) 

provider 是我们订阅的 EditorService，在这种情况下是 IWindowsFormsEditorService 提供者。value 是属性的当前值，也是我们完成后将返回的值。

EarUIEditor dropDownEditor = new EarUIEditor(editorService); 

dropDownEditor.TypeOfEar = (EarTypes) value; 

editorService.DropDownControl(dropDownEditor); 

return dropDownEditor.TypeOfEar; 

上面实例化的 dropDownEditor 是此过程的第三步。EarUIEdtor 是一个派生自 UserControl 的类，是这里用于添加标题和按钮的模板。这提供了一种更好看、更用户友好的方式来呈现给用户。你可以像使用任何其他类型的控件一样使用你的派生类。你只需要在编辑器代码中添加一个带 provider 参数的构造函数。

public EarUIEditor(IWindowsFormsEditorService ed) 

我使用这个引用来结束操作，通过关闭下拉控件。

editorService.CloseDropDown(); 

我已尽力在代码中提供足够的注释，希望它们能让代码更容易理解。

使用代码

要使用此控件，请转到“自定义工具箱”并将 XPControlLib.dll 包含在你的项目中。在项目中使用“解决方案资源管理器”为其添加引用。完成这些操作后，你就可以将 XPHeaderControl 和 XPFooterControls 拖放到你的窗体上，然后就可以开始使用了！

在配置时有几个属性需要考虑：

• WorkingControl - 这是一个列表，包含你可以将 Header 控件关联到的可用控件。
• DockWorkingControl - 将 Header 控件定位在 Working 控件的上方，并采用其宽度。
• FooterControl - 一个列表，包含可以关联到此 Header 的可用 Footer 控件。它所做的只是向 footer 发送一个消息，告诉它在展开或折叠时需要移动。
• WorkingControl - 一个列表，包含可用的控件。
• DockWorkingControl - 将 Footer 控件定位在 Working Control 的下方，并采用其宽度。

此外，在你的代码中，如果你希望控件初始处于折叠状态，请调用控件的 CollapseControl 公共方法。

关注点

我学到了很多关于自定义控件的知识，以及如何让它们正常工作的技巧。我已尽力在我认为必要的地方添加了注释。你可以随意使用此软件，但请务必遵守“像你希望别人如何对待你一样对待别人！”的规则！

希望你觉得这个软件有帮助。

历史

• 版本 1.0 2007/1/1 首次发布
• 版本 1.01 2007/1/20 添加了设计时集成