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

一个完全字符化的 SplitButton

tgis.top
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.15/5 (7投票s)

2010年12月25日

CPOL

3分钟阅读

viewsIcon

42802

downloadIcon

1768

一个 SplitButton 的按钮部分具有 Button 的所有特性。

引言

Elia Sarti 在他的文章 SplitButton: an XP style dropdown split button [^] 中总结说，我们可能会遇到一种特殊情况，即某些特定操作在逻辑上是从一个操作派生出来的。.NET 中有一个等效项(ToolStripDropDownButton) 用于 ToolStrip。

实际上还有另一种情况，由于一个操作，一些特定的选项在逻辑上让我们需要 SplitButton 的帮助。这就是 ToolStripSplitButton 存在的原因。 但是，我们不能仅通过 ToolStrip 来解决这些情况。 一个 SplitButton，其按钮部分具有 Button 的所有特性，非常有用。

也许，您没有完全理解这两种情况。 我将为每种情况举一个例子。

从一个操作派生的逻辑操作的示例

每个经常使用计算机的人可能都完成过某种拾色操作。 通常，SplitButton 的按钮部分的 backcolor 指示当前选择的颜色，并且一个下拉控件列出了用于这些操作的所有常用颜色。 下图是设置 Windows XP 操作系统窗口颜色的屏幕截图。

color_picker.jpg

由于一个操作产生的逻辑选项的示例

在 GIS 和 CAD 行业，尤其是在 GIS 中，一系列坐标及其视觉样式（由填充图案、透明度、边框样式等组成）构成一个几何图形。 要选择完美的视觉样式，我们可能会经常更改几何图形的视觉样式。 逐个更改它很容易，但也很耗时。 因为很多几何图形之间的区别通常仅在于填充图案或透明度或边框样式或透明度和边框样式。 批量更改视觉样式是一个好主意。 我们应该选择视觉样式选项中的一个或两个需要在批处理中更改。 在这种情况下，SplitButton 将起作用。

visual_style.jpg

使用代码

将 *SpitButton.cs* 文件复制到您的项目，然后将 SplitButton 从工具箱拖到容器控件。 为 SplitButton 的拆分部分选择您喜欢的图像（我提供了两个最常用的 SplitImage 以及源代码）。 订阅正确的事件并给出正确的响应是使用该控件应该做的所有剩余事情。

[Browsable(true)]
[Category("Action")]
[Description("Occurs when the button part of the SplitButton is clicked by the mouse.")]
public event MouseEventHandler ButtonMouseClick;

[Browsable(true)]
[Category("Action")]
[Description("Occurs when the button part of the SplitButton is 
	double clicked by the mouse.")]
public event MouseEventHandler ButtonMouseDoubleClick;

[Browsable(true)]
[Category("Action")]
[Description("Occurs when the split part of the SplitButton is clicked by the mouse.")]
public event MouseEventHandler SplitMouseClick;

[Browsable(true)]
[Category("Action")]
[Description("Occurs when the split part of the SplitButton 
	is double clicked by the mouse.")]
public event MouseEventHandler SplitMouseDoubleClick;

演示的以下屏幕截图清楚地说明了如何使用 SplitButton。

demos.jpg

实现

很简单。 再次重绘。

  • 首先，分别绘制按钮部分和拆分部分的两个按钮。

    button_s.jpg

  • 其次，绘制按钮部分和拆分部分之间的间隙。 我使用按钮上的两个非常小的图像来覆盖间隙。 看看代码。

    btn.jpg 

    graphics.DrawImage(img, new Rectangle(x,y+1,_partWidth,base.Height-2),
           new Rectangle(0, 1, _partWidth, base.Height - 2), GraphicsUnit.Pixel);
  • 然后，绘制分割线。

    SplitButtonHot.jpg

  • 最后，添加对 Backcolor、Backgroundimge、Image、ImageAlign、Text 和 TextAlign 属性的支持。

这是一个简单的控件。 仅此而已。 有关详细信息，请阅读代码。

其他

连同源代码一起，我提供了一个 ContextContainer 类，它用于下拉任何类型的控件。

ContextContainer _contextContainer;
public Form1()
{
    InitializeComponent();
    _contextContainer = new ContextContainer(new UserControl1());
    _contextContainer.ContextMode = ContextMode.MultiSelect;
}
private void splitButton5_SplitMouseClick(object sender, MouseEventArgs e)
{
    _contextContainer.Show(splitButton5);
}

上面的代码块可以在 *Form1.cs* 文件中找到。 它显示了如何使用 ContextContainer 下拉控件。

我没有正式发布 ContextContainer，因为仍然存在一个问题。 它困扰了我很长时间。 如果 UserControl 包含的控件的 Dock 属性设置为 Fill，则当我们使用 ContextContainer 下拉它时，UserControl 的大小将缩小到 2*2。 如果您知道原因，请告诉我。 谢谢。

历史

  • 2010年12月25日：首次发布
© . All rights reserved.