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

边框容器

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.88/5 (23投票s)

2008 年 7 月 30 日

CPOL

12分钟阅读

viewsIcon

72890

downloadIcon

3199

一个可折叠的容器控件,具有完整的标题栏、边框和颜色自定义功能。还可以利用“激活”按钮(类似于 Visual Studio IDE 中每个窗体顶部都有的“活动文件”按钮)。

边框容器 - 强大的 Panel

随着我两年前编写的 BorderControl 的更新,曾经精简小巧的 WinForms.Panel 控件的替代品变得庞大、臃肿!为了改进我正在开发的应用的 UI,这是值得付出的代价,尽管控件的尺寸和复杂性有所增加,但使用我的控件的机器也变得更强大、功能更强……所以对我来说,这算是一种平衡。

话虽如此,您可以轻松地从这个新控件中删除所有不需要的部分,从而得到一个相当小的 DLL。

虽然您可以动态调整 BorderContainer (BC) 中标题栏的高度,但三个按钮:关闭、折叠和激活,它们的高度和宽度都是固定的。因此,如果您计划使用高度为 12 像素的标题栏**并且**想使用一个或多个管理按钮,您绝对需要更改 ImageList 中的图像,以及用于 ButtonHeightButtonWidthCONST 常量。

BorderContainer

除了 BorderContainer(Panel 控件的替代品)之外,您还可以在 DLL 中获得 BorderForm,它是 Windows.Forms.Form 的替代品。它具有与 BorderContainer 相同的所有属性,但缺少折叠功能。还有一个属性可以设置窗体在拖动时的不透明度。

左侧的图像显示了一个示例 BorderForm

右侧的图像显示了正在拖动的同一个 BorderForm,其 DragOpacity 为 0.5。

BorderContainer

BorderForm - 正在拖动
 

作者附注:用作 .NET 颜色属性编辑器替代品的颜色选择器控件包含在 BorderContainer.dll 中。它是一个对话框,但正如您在此处看到的演示 BorderContainer,您也可以使用单独的部分:ColorBoxVerticalColorSlider

有什么新功能?

图形化的“折叠”按钮取代了旧式图钉。此按钮的图像会根据 BorderContainer 的停靠位置而变化。有一个 ImageList,其中包含顶部、左侧、右侧和底部折叠以及激活和关闭按钮的正常、鼠标悬停和鼠标按下图像。它们是 17x19 的 32 位 PNG 图像,但更改它们就像替换 ImageList 中相应的图像一样简单,确保您适当更改尺寸——然后更改两个常量:BUTTON_HEIGHTBUTTON_WIDTH 以匹配您的新图像尺寸。

  • ButtonOffset - 这是一个属性,允许您调整按钮在 BC 右边缘的对齐距离。
  • ButtonGap - 这是一个属性,允许您调整每个按钮之间的像素距离。

现在提供了一个三色渐变标题栏,并且可以调整中心颜色淡入的位置。

  • BackgroundColorBegin - 渐变的起始颜色。
  • BackgroundColorCenter - 渐变的中间颜色。
  • BackgroundColorEnd - 渐变的最终颜色。如果选择无渐变,这也是用于填充标题栏的纯色,也是在 InnerBorderWidth > 0 时用于填充侧面板的颜色。

以下是一些新增的属性

  • AutoCollapse:如果为 True,当用户双击标题栏时,BorderContainer (BC) 将自动折叠。
  • AutoRefresh:如果为 True,当 UI 属性发生更改时,BC 将自动刷新自身。如果要在运行时设置大量属性,可以将此设置为 False,然后在完成属性更改后刷新整个控件。
  • AllowResize:如果为 True,用户可以在运行时调整控件大小,而无需将 Splitter 控件放置在 BC 旁边。
  • InnerBorderWidth:一个属性,将在 BC 内部显示一个边框——ClientRectangle 会自动调整,以防止添加到 BC 的控件绘制在此内边框之上。
  • RoundedCorners:设置为 True 时,将绘制带有圆角的标题栏,圆角大小通过设置 RoundSize 属性进行调整。

Using the Code

将 DLL 放入您的文件夹(或您放置自定义控件的位置),然后将其添加到 VS IDE 工具栏。添加到工具栏后,您就可以像使用 Panel 一样使用 BC 了。

属性详细信息

BorderContainer 具有以下属性

BorderDetails 这是一个可展开的属性,包含大部分 UI 设置。
BorderColor 边框的颜色
BorderLines   包含所有边框设置的可展开属性。
   
InnerBorder   如果为 True,将在客户端区域内部绘制一个单像素边框。
InnerPanelShowAll   如果为 True,会将所有 InnerPanel 属性设置为 True
InnerPanelShowBottom   显示底部内面板。
InnerPanelShowLeft   显示左侧内面板。
InnerPanelShowRight   显示右侧内面板。
InnerPanelShowTop   显示顶部内面板,但仅当 DisplayHeader 设置为 False 时。
ShowAllOutLines   如果为 True,会将所有 OutLine 属性设置为 True
ShowBottomOutLine   显示底部轮廓线。
ShowLeftOutLine   显示左侧轮廓线。
ShowRightOutLine   显示右侧轮廓线。
ShowTopOutLine   显示顶部轮廓线。
     
DisplayHeader 如果为 True,将在 BorderContainer 顶部显示标题栏。
HeaderDetails 可展开的属性 - 所有详细信息均在此文档下方列出。
InnerBorderWidth   设置内边框面板的宽度(以像素为单位);有效设置为 0(无边框)到 10(非常宽)。
     
AllowResize   如果为 True,将允许用户调整 BC 非停靠边缘的大小;如果 BC 已停靠,则只能拖动 BC 的可移动尺寸进行调整大小。
     
AutoCollapse   如果为 True,当用户双击标题栏时,BC 将折叠。
     
AutoRefresh   如果为 True,当运行时调整任何 UI 属性时,BC 将重绘;如果您有大量 UI 属性需要更改,您可能希望将其设置为 False - 进行更改,然后将此值重置为 True,以便仅进行一次绘制。
     
CollapsePanel   这是一个内置的 Panel 控件,如果 ShowCollapsePanel = True 且 BC 已折叠,则会出现;您可以在设计时设置所有标准的面板属性,但在运行时必须在此面板中添加任何其他控件。
     
CurrentState 这标识了在窗体打开时容器将如何显示;“open”是默认值,但您可以在启动时将控件折叠。
   
HeaderImage 您可以在标题栏中放置的图标。
HeaderImageAlignment 图标的水平对齐方式。

BorderDetails.HeaderDetails 是一个可展开的属性,用于处理所有与标题栏相关的 UI 元素,并具有以下子属性:

ActivationMenu 此内置的 ContextMenuStrip 可以在 BorderContainer 属性窗口中或在运行时进行编辑。要向菜单项添加菜单项,请展开 ActivationMenu 属性,向下滚动到“Items”,然后单击集合编辑器。所有 ToolStripItem 类型都支持,并像创建自己的 MenuStrip 一样添加到您的窗体中……因此,如果您想捕获 MenuStripComboItemSelectedIndexChanged 事件,只需在 VS IDE 的“类名”下拉列表中查找该控件即可。
AntiAliasText 如果为 True,标题栏中显示的文本将进行抗锯齿处理。
BackgroundColorBegin 用于填充标题栏的渐变的起始颜色。
BackgroundColorCenter   渐变的中间颜色。
BackgroundColorEnd   具有多种用途:首先,它是渐变的最后一种颜色。如果 InnerPanelWidth > 0,它也是用于填充内面板的颜色,并且是如果没有选择渐变时用于填充整个标题栏的纯色。
ButtonGap 标题栏中绘制的每个按钮之间的间隙(以像素为单位)。
ButtonOffset   最后一个绘制按钮的右边缘与 BC 右边缘之间的间隙(以像素为单位)。
ForegroundColor   BC 的前景色。使用此属性来调整 HeaderText 的前景色。
GradientMode   有效设置为:NoneHorizontalVerticalForwardDiagonalBackwardDiagonal
GradientPercentage   从 Begin 到 Center 到 End 颜色的渐变过渡是平滑的。这是中间颜色为 100% 的百分比。示例:GradientMode=Horizontal 且 BC 宽度为 100 像素。将其设置为 0.20 意味着在 BC 宽度的 20% 处,颜色将是 BackgroundColorCenter……因此,您设置的值越接近 0,Begin 到 Center 的变化就越快,越接近 1,该过渡的持续时间就越长。
高度 标题栏的高度(以像素为单位)。标题栏中显示的所有图形都会调整大小,但请记住,如果将高度设置得太小,用户将无法正确看到图像。
RoundedCorners 如果为 True,BC 将在标题栏中显示圆角。
RoundSize   圆角的半径(以像素为单位)。
ShowActivationMenu 如果为 True,将显示激活按钮。
ShowClose 如果为 True,将显示关闭按钮。
ShowCollapse   如果为 'True,将显示折叠按钮。
ShowCollapsePanel   如果为 True,当 BC 折叠时将显示折叠面板。
文本 这是显示在标题栏中的文本字符串。如果文本被截断,将在截断点显示省略号(...)。
TextAlignment 默认为 LeftMiddleRight 是其他可用选项。

控制事件

下表显示了运行时可能引发的所有事件。

Resized 当您的容器折叠或展开时触发。
HeaderDoubleClick 当用户双击标题栏时触发。
HeaderClick 当用户单击标题栏时触发。
ActivationClick 每当单击激活按钮时触发;无论您是否使用内置的 ContextMenuStrip,都会触发此事件。
ActivationMenuOpened 每当打开激活菜单时触发。
ActivationMenuClosed 每当关闭激活菜单时触发。
CloseClicked   每当单击关闭按钮时触发。
DragResizeComplete   当用户完成拖动调整大小时触发。
DragResizing   当 BC 正在进行拖动调整大小时触发。
DragResizeBegin   当用户开始拖动调整大小时触发。

自定义属性编辑器 - 颜色选择器

此项目包含一个名为“ColorEditor”的自定义属性编辑器。实现此编辑器需要几个额外的步骤,所有详细信息都可以在 Saeed Serpooshan 撰写的这篇精彩文章中找到。我为了个人使用进行了多项修改,但如果没有那篇文章的帮助,我绝对无法完成我控件的这一部分……所以,谢谢 Saeed!

Color_Picker.gif

自定义属性显示值

我进行的一项修改是强制属性窗口显示我想要显示的*值*,而不是它默认想要显示的数据。

我在让自定义属性编辑器在 Color 类型上工作时遇到了问题,我认为这是因为 Color 已经使用了一个自定义编辑器……我不得不学习如何覆盖那个内部自定义编辑器,然后我的才能工作……总之,为了绕过它,我将我所有的控件颜色都存储为字符串,格式为“###, ###, ###”,这只是简单的 RGB 值。但我不想显示字符串:我想要颜色在颜色框中,后面跟着可编辑文本。

要实现这一点,您必须首先告诉编辑器您将覆盖绘制的值,然后(当然)您必须自己提供新的绘制方法。

Public Overrides Function GetPaintValueSupported(_
    ByVal context As System.ComponentModel.ITypeDescriptorContext) As Boolean
    Return True
End Function

这是覆盖的 Paint 方法。

Public Overrides Sub PaintValue(ByVal e As System.Drawing.Design.PaintValueEventArgs)
    ' Go fill the area first...
    Dim width As Integer = e.Bounds.Width - 1
    Dim height As Integer = e.Bounds.Height - 1
    Dim brush_HeaderBG As New SolidBrush(_myColor)
    e.Graphics.FillRectangle(brush_HeaderBG, 1, 1, width, height)
End Sub

抗锯齿文本

有人认为这很可怕和复杂,花费了太多时间和精力,不值得付出吗?**再想一想!** 通常,如果您想手动绘制文本,您会这样做:

' establish our drawing area (_width/_height
' are defined above but not seen in this
' code snippet)
Dim text_Rectangle As New RectangleF
text_Rectangle.X = 1                ' Upper Left Corner...Left
text_Rectangle.Y = 1                ' Upper Left Corner...Top
text_Rectangle.Width = _width - 1   ' Lower Right Corner..Left
text_Rectangle.Height = _height - 1 ' Lower Right Corner..Right

' establish our formatting
Dim text_Format As New StringFormat
text_Format.Trimming = StringTrimming.EllipsisCharacter  ' draws ellipses (...) at the
                                                         ' truncation point
text_Format.Alignment = StringAlignment.Center           ' Vertical positioning
text_Format.LineAlignment = StringAlignment.Center       ' Horizontal positioning
text_Format.FormatFlags = StringFormatFlags.NoWrap       ' Dont wrap the text...let
                                                         ' the Ellipses do their work

' establish our brush
' (SomeColor is a Color Type defined above but not seen in this code snippet)
Dim text_Brush As New SolidBrush(SomeColor)

' Paint the text
e.Graphics.DrawString("Your Text Goes Here", Me.Font, _
                      text_Brush, text_Rectangle, text_Format)

但是,假设您希望那个愉快的字符串进行抗锯齿处理。GDI 提供了我们所需的一切……这是一套非常复杂的代码,并且注释得不是很好,所以请仔细阅读**仔细**!

.
.
.
' Anti Alias the text
e.Graphics.TextRenderingHint = Drawing.Text.TextRenderingHint.AntiAlias

' Paint the text
e.Graphics.DrawString("Your Text Goes Here", Me.Font, _
                      text_Brush, text_Rectangle, text_Format)
.
.
.

可以使用类似的技术来处理所有绘图方法,例如用于环绕圆角的边框。

.
.
.
' Anti Alias the drawing
e.Graphics.SmoothingMode = SmoothingMode.AntiAlias
e.Graphics.DrawArc(BorderPen, _PLeft, _PTop, ArcSize, ArcSize, 180, 90)
e.Graphics.DrawArc(BorderPen, _PWidth - ArcSize, _
                   _PTop, ArcSize, ArcSize, -90, 90)
.
.
.

精简脂肪

最后一部分将描述控件的各个区域,如果您只需要基本功能,可以将其移除。

  • 激活菜单:移除激活按钮和上下文菜单将与移除该按钮的图像以及激活和触发事件的代码同步进行。这将是一种轻松精简的方法。
  • 折叠面板:这是为我正在处理的一个特定项目添加的,我再也没有用过它——包含折叠面板的开销并不大,但这仍然是一个非常容易移除的目标。
  • 渐变画笔:除非您需要渐变标题栏,否则可以毫不费力地移除所有渐变绘制和属性。
  • 可调整大小:允许此功能的代码相对较小——您可以轻松移除它,但节省不了多少,而且大多数良好的 UI 都有显示元素包含在可调整大小的面板内。
  • BorderForm:这是一个完整的命名空间,您可以一键移除并编译,从而显著减小 DLL 的大小。
  • 颜色选择器:移除此项需要更多的工作。它不像更改自定义编辑器中的属性那样简单。由于父属性期望此属性的类型为“String”,因此您必须移除自定义颜色编辑器**并**将颜色属性类型改回“Color”。

安装

  1. 解压缩源文件并打开 BorderContainer 项目。
  2. 编译项目。
  3. 在 Visual Studio 中打开窗体工具箱。
  4. 右键单击您希望放置控件的选项卡。
  5. 点击“选择项...”。
  6. 在“选择工具箱项”对话框中,点击“浏览”。
  7. 导航到 BorderContainer 下的 Bin 文件夹(根据您的设置,更深入到 DebugRelease 文件夹)。
  8. 点击 BorderContainer.dll,然后点击“打开”。

就是这样!BorderContainer 现在已成为您的工具箱的一部分,可用于您任何的 VB.NET 项目。

历史

  • 2008/07/29:控件首次引入 CodeProject.com。
  • 2010/02/10:错误修复。
© . All rights reserved.