XDock: Enhancing User Interface with Customizable Docking Bar

在现代用户界面设计中,XDock项目以其独特的功能和创新的设计理念脱颖而出。它不仅增加了标签功能,还允许用户根据内容自动调整工具栏的大小,并且支持透明度调节。这些改进为用户带来了更加个性化和直观的体验。

XDock项目基于XDock的现有功能,进一步扩展了其功能。它的目标是提供一个更加灵活和用户友好的界面,让用户能够根据自己的需求和偏好来定制工具栏。

新增特性

XDock项目引入了以下新特性:

  • 工具栏居中并根据内容自动调整大小。
  • 工具栏可以放置在屏幕的顶部或底部。
  • 当鼠标悬停在图标上时,图标会放大显示。
  • 当鼠标离开图标时,图标会缩小。
  • 当前选中的图标会高亮显示。
  • 每个图标都有可定制的提示信息。
  • 工具栏和图标可以完全透明。
  • 可以定制工具栏的某些方面。
  • 提示信息完全可定制,包括背景、边框、圆角、3D文本效果、文本阴影、字体、字体大小、文本效果(如加粗、斜体等)、文本颜色、背景颜色(包括纯色或渐变以及透明度等级)。

以下是标签设置的表单示例:

以下是完全透明的工具栏示例:

技术要点

处理透明对象时,一个常见的问题是会丢失鼠标移动事件。为了解决这个问题,为工具栏和图标绘制了一个假背景。以下是VB.NET代码示例:

Dim bmp As Bitmap Dim iaFake As New Imaging.ImageAttributes Dim cmFake As New Imaging.ColorMatrix cmFake.Matrix33 = 0.5 / 100.0F iaFake.SetColorMatrix(cmFake) ' 构建假背景 bmp = New Bitmap(CInt(pWidth), CInt(pHeight)) grFake = Graphics.FromImage(bmp) grFake.FillRectangle(New SolidBrush(Color.Silver), New Rectangle(0, 0, bmp.Width, bmp.Height)) ' 绘制假背景 gr.DrawImage(bmp, New Rectangle(posX, posY, bmp.Width, bmp.Height), 0, 0, bmp.Width, bmp.Height, GraphicsUnit.Pixel, iaFake)

另一个有趣的开发点是与图标相关的文本显示。这是通过DockManager类中的PaintLabel方法实现的。以下是VB.NET代码示例:

Private Sub PaintLabel(ByRef DstGraphics As Graphics, ByVal DockSettings As Settings, ByVal pDockItem As IDockItem) Dim ScreenWidth As Integer = Screen.PrimaryScreen.WorkingArea.Width Dim borderWidth As Integer = DockSettings.Labels.BorderLabelFrameWidth Dim topLeft As Integer ' 创建要绘制的字符串 Dim drawString As [String] = pDockItem.Name Dim szF As SizeF Try szF = DstGraphics.MeasureString(drawString, New Font(DockSettings.Labels.FontName, DockSettings.Labels.FontSize, DockSettings.Labels.FontStyle, GraphicsUnit.Point)) Catch ex As Exception Trace.WriteLine(ex.ToString) End Try Dim sz As New Size(szF.Width, szF.Height) ' 计算标签的原点 Dim labelX As Integer = borderWidth + pDockItem.X + (pDockItem.Width - sz.Width) / 2 ' 检查是否在左侧超出 If labelX < borderWidth * 2 Then labelX = borderWidth * 2 End If If Select Case DockSettings.Position.ScreenPosition Case cPosition.ScreenPos.Top ' 跟随项目高度 topLeft = pDockItem.Y + pDockItem.Height + DockSettings.Labels.TopMargin - frm.Top ' 固定 topLeft = pDockItem.Y + IIf(DockSettings.Behavior.AnimatedIcons, DockSettings.Icons.ZoomPx, pDockItem.Height) + DockSettings.Labels.TopMargin - frm.Top Case cPosition.ScreenPos.Bottom ' 跟随项目高度 topLeft = pDockItem.Y - DockSettings.Labels.TopMargin - sz.Height - frm.Top ' 固定 topLeft = pDockItem.Y + IIf(DockSettings.Behavior.AnimatedIcons, pDockItem.Height, 0) - _ IIf(DockSettings.Behavior.AnimatedIcons, DockSettings.Icons.ZoomPx, 0) - _ DockSettings.Labels.TopMargin - sz.Height - frm.Top Case cPosition.ScreenPos.Left Case cPosition.ScreenPos.Right Case Else Throw New Exception("PaintLabel: Screen position unknown") End Select ' 设置目标区域 Dim rectOrig As New Rectangle(labelX, topLeft, sz.Width + borderWidth, sz.Height + borderWidth) ' 绘制带边框的框架 If DockSettings.Labels.FrameRoundedCorners Then DrawRoundedFrame(DstGraphics, DockSettings, rectOrig, DockSettings.Labels.FrameRadius, borderWidth) Else DrawRectangleFrame(DstGraphics, DockSettings, rectOrig, borderWidth) End If If ' 绘制标签 DrawLabel(DstGraphics, rectOrig, DockSettings, pDockItem) End If End Sub

PaintLabel首先计算标签的大小,然后确定其相对位置。然后有三个有趣的子程序:DrawRectangleFrame、DrawRoundedFrame和DrawLabel。

气泡效果在DockManager类的UpdateAllItems方法中。气泡效果根据鼠标光标与图标中心的距离计算图标的大小,距离越小,图标越大。以下是VB.NET代码示例:

distance = (pMax / 2 * m_Settings.Icons.ZoomWidth) fConv = (pMax - m_Settings.Icons.SizePx) / distance ... gap = X - pDockItem.CentreX ... pZoom = m_Settings.Icons.SizePx + fConv * (distance - Math.Abs(gap))

其中pMax是允许的最大大小,ZoomWidth是想要的气泡效果距离,SizePx是图标大小。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485