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

组面板

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.72/5 (25投票s)

2003年8月7日

3分钟阅读

viewsIcon

253707

downloadIcon

3232

MS Messenger 风格的组控件

引言

我只是想编写一个小巧轻便的控件,用于在组中排列多个控件,从而节省表单上的空间。 我真的很喜欢 MS Messenger 对操作和联系人进行分组的方式,因此我决定模仿它的外观。

使用分组面板

与控件关联的选项卡页面面板无法在设计时创建(目前还没有设计器),因此必须在运行时通过代码创建它们。 对我来说这不是问题,因为我实际上是从数据库表中的条目加载面板的。

添加选项卡页面面板

Morell.GroupPanel.TabPage t0 = new Morell.GroupPanel.TabPage("Group 00");
Morell.GroupPanel.TabPage t1 = new Morell.GroupPanel.TabPage("Group 01");

创建选项卡页面面板后,必须将控件关联到每个选项卡页面

t0.AddControl(treeView);
t1.AddControl(txt0);

要添加一些图形效果,您可以选择要显示的图像和颜色渐变

// Configure the icons to use
groupPanel.UpImage = Image.FromFile("up.bmp");
groupPanel.DownImage = Image.FromFile("down.bmp");

这两个图像位于文件夹“GroupPanel\Test\bin\Debug”中。

选择图像时,您必须将 TransparentColor 属性设置为背景颜色图像。 我通常使用 System.Drawing.Color.Magenta

// Create a color gradient
groupPanel.ColorLeft = SystemColors.ControlDarkDark;
groupPanel.ColorRight = SystemColors.ControlLight;

最后,将选项卡页面添加到控制面板并选择要显示的初始组。

// Add the tab pages to the group panel control
groupPanel.TabPages.AddRange(new Morell.GroupPanel.TabPage[] 
                                                   {t0, t1, t2, t3, t4, t5});
 
// Set the first tab to be shown
groupPanel.SelectedIndex = 0;

其他特性

外观

HotTrack。 将其设置为 true,以便鼠标悬停在文本上时文本会加下划线。
HotTrackColor。 悬停跟踪时显示文本的颜色。
TabHeight。 面板标题区域的高度。

选定的选项卡页面和选定的索引已更改

当用户更改选定的选项卡页面时,您可以刷新其他控件或根据用户选择执行操作

this.groupPanel.SelectedIndexChanged
             += new System.EventHandler(this.groupPanel_SelectedIndexChanged);
private void groupPanel_SelectedIndexChanged(object sender, 
                                             System.EventArgs e)
{
 int index = groupPanel.SelectedIndex;
 string s = "Selected tab: " + groupPanel.TabPages[index].Text + " Index: "
             + index;
}

标签编辑

每个选项卡页面的文本可以由用户通过调用 BeginEdit() 方法进行编辑

groupPanel.TabPages[index].BeginEdit();

这将启动所选选项卡页面的文本编辑。

当用户按下 Enter 键,完成编辑时,将引发 AfterLabelEdit 事件,以便您可以在必要时取消。 最大文本长度由属性 LabelMaxLenght 控制。

选项卡页面排序

您可以调用这些方法

groupPanel.MoveDown(groupPanel.TabPages[index]);
groupPanel.MoveUp(groupPanel.TabPages[index]);

建议

使用分组面板控件,您可以动态地添加、删除、更改文本或重新排列选项卡页面的顺序。 允许用户使用弹出菜单使用此功能,检测鼠标按下的选项卡页面。

您可以挂钩 TabPageMouseUp 事件

this.groupPanel.TabPageMouseUp += 
   new System.Windows.Forms.MouseEventHandler(this.groupPanel_TabPageMouseUp);

并获取选定的选项卡页面以显示上下文菜单

private void groupPanel_TabPageMouseUp(object sender, 
                                      System.Windows.Forms.MouseEventArgs e)
{
    if(e.Button == MouseButtons.Right)
    {
        // Menu handling........
    }
}

请记住根据选定的选项卡页面索引启用/禁用“上移”和“下移”选项。 在选项卡页面索引 0 上调用“上移”将引发异常。 在最后一个选项卡页面上调用“下移”也是如此。

关注点

我发现树形视图存在一个错误(或者至少我是这么认为的)。 通过代码将 TreeView 添加到面板控件后,即使没有必要,也会在 treeView 底部出现水平滚动条。 我发现删除它的唯一方法是将控件的宽度设置为 0; 并且由于它的 Dock 属性设置为 DockStyle.Fill,因此它可以正确显示。

TabPage.cs
public void AddControl(Control control)
{
    // Set the reference to the control
    _childControl = control;

    // Add the control to the controls collection
    this.Controls.Add(_childControl);
    _childControl.Dock = DockStyle.Fill;
            
    // BUG: Detected on Treeview.
    // If the control is not Hidden and Shown, the treeview 
    // always presents and horizontal scroll bar that is not necessary.
    // If the Windows XP style is on, the scrollbar does not have the XP look.
    _childControl.Width = 0;
}

Sample Image - Group_Panel.jpg

如果未更改 _childControl.Width,则会显示滚动条。 另请注意,滚动条以标准外观显示,而不是 Windows XP 的外观。

历史

2003 年 8 月 7 日 - 1.0 版

  • 初始版本。
© . All rights reserved.