手风琴在Windows窗体DataGridView [英] Accordion in Windows Forms DataGridView

问题描述

我需要实现某种形式的折叠效果在Windows窗体的DataGridView。当用户选择某一行，该行被展开以显示更多的信息，如果可能的一些按钮或其他控制。问题是，我绝对没有线索，如何做到这一点。我试着在网上搜索，但我没有发现任何可能导致我在正确的方向在创造这一点。我希望有人能告诉我该怎么做呢？ （并不一定是一个代码示例）

I need to implement some kind of accordion effect in a Windows Form DataGridView. When the user selects a row, the row is expanded to display some more information and if possible some buttons or other controls. The problem is, I have absolutely no clue, how to do this. I tried to search the web, but I found nothing that can lead me in the right direction in creating this. I hope someone can tell me how to do this? (does not have to be a code sample)

我创建了下面的样机，显示了我想做的事情。

I created the below mockup to display what I want to do.

我认为有关调整列的高度和覆盖OnPaint方法。我只需要显示的第一个版本一些文本。如果这是可能的，将是巨大的。我知道，在未来，我需要放置一些按钮或其他控件做各种事情与所选项目。如果这是非常复杂的实现，我将跳过这一部分现在。我知道我可以使用的工具提示文本并且按钮栏等但对我来说，我需要做的是为手风琴

I thought about adjusting the columns height and override the OnPaint method. I only need to display some text in the first version. If that is possible that would be great. I know that in the future I would need to place some buttons or other controls to do various things with the selected item. If that is very complicated to achieve, I will skip that part for now. I know I could use tooltips for text and have button columns etc. but in my case, I need to do it as an accordion.

最好的问候
汉斯铣床...

Best regards Hans Milling…

推荐答案

这是不是真的很难做到。最好的方法是创建一个专用的用户控件，并在合适的地方覆盖它。

This is not really hard to do. The best approach would be to create a dedicated UserControl and overlay it at the right spot.

要腾出空间它只是改变该行的高度，跟踪该行的，所以你可以当它失去选择恢复它。

To make room for it simply change the Row's Height, keeping track of the row, so you can revert it when it looses selection.

您还必须决定是否多行可扩展，只是用户什么是应该做的扩大和重置行..

You will also have to decide if more than one row can be expanded and just what the user is supposed to do to expand and to reset the row..

的用户控件可能有一个函数 displayRowData（的DataGridViewRow行），你可以调用显示你感兴趣的领域开展标签等

The UserControl could have a function displayRowData(DataGridViewRow row) which you could call the display the fields you are interested in in its Labels etc..

您还应该对如何使用按钮计划应与 DataGridView的 ..

You should also have a plan on how the Buttons shall interact with the DataGridView..

如果你只需要一个行以扩大时间，您可以创建 UC 达阵，使 DGV 及其父键，将其隐藏。稍后，当用户的互动，如单击在该行，或者某些细胞你会移动到右排并显示它..

If you only want one Row to be expanded at a time, you can create the UC up front, make the DGV its Parent and hide it. Later upon the user interaction, like clicking at the row, or a certain cell you would move it to the right row and show it..

如果多个行可以扩大你将需要创建多个 UCS 和跟踪它们在列表 ..

If more than one row can be expanded you will need to create several UCs and keep track of them in a List..

下面是一个小例子来鼓励你..：

Here is a minimal example to encourage you..:

int normalRowHeight = -1;
UcRowDisplay display = new UcRowDisplay();
DataGridViewRow selectedRow = null;

public Form1()
{
    InitializeComponent();

    // create one display object
    display = new UcRowDisplay();
    display.Visible = false;
    display.Parent = DGV;
    display.button1Action = someAction;
}

在你填补了DGV

    // store the normal row height
    normalRowHeight = DGV.Rows[0].Height;

您至少需要以下事件：

private void DGV_SelectionChanged(object sender, EventArgs e)
{
    if (selectedRow != null) selectedRow.Height = normalRowHeight;
    if (DGV.SelectedRows.Count <= 0)
    {
        selectedRow = null;
        display.Hide();
        return;
    }
    // assuming multiselect = false
    selectedRow = DGV.SelectedRows[0];
    // assuming ColumnHeader show with the same height as the rows
    int y = (selectedRow.Index + 1) * normalRowHeight;
    display.Location = new Point(1, y);
    // filling out the whole width of the DGV.
    // maybe you need more, if the DGV is scrolling horizontally
    // or less if you show a vertical scrollbar.. 
    display.Width = DGV.ClientSize.Width;
    // make room for the display object
    selectedRow.Height = display.Height;
    // tell it to display our row data
    display.displayRowData(selectedRow);
    // show the display
    display.Show();
}

private void DGV_ColumnWidthChanged(object sender, DataGridViewColumnEventArgs e)
{
    // enforce refresh on the display
    display.Refresh();
}

下面是在显示对象的按钮触发一个测试动作：

Here is a test action triggered by the button in the display object:

public void someAction(DataGridViewRow row)
{
    Console.WriteLine(row.Index + "  " + row.Cells[2].Value.ToString());
}

当然，你需要一个用户控件。下面是一个简单的，有两个标签，一个按钮和一个额外的标签来关闭显示：

And of course you need a UserControl. Here is a simple one, with two Labels, one Button and one extra Label to close the display:

public partial class UcRowDisplay : UserControl
{
    public UcRowDisplay()
    {
        InitializeComponent();
    }

    public delegate void someActionDelegate(DataGridViewRow row);
    public someActionDelegate button1Action { get; set; } 
    DataGridViewRow  myRow = null;

    public void displayRowData(DataGridViewRow row)
    {
        myRow  = row;
        label1.Text = row.Cells[1].Value.ToString();
        label2.Text = row.Cells[0].Value.ToString();
        rowDisplayBtn1.Text = row.Cells[2].Value.ToString();
    }

    private void rowDisplayBtn1_Click(object sender, EventArgs e)
    {
        button1Action(myRow);
    }

    private void label_X_Click(object sender, EventArgs e)
    {
        myRow.Selected = false;
        this.Hide();
    } 


}

它包含tthree 标签和按钮。在设计，它看起来是这样的：

It contains tthree Labels and a Button. In the Designer it looks like this:

请注意，为了使其更容易一些对我，我已经修改了DGV到

Note that in order to make it a little easier on me I have modified the DGV to

• 没有的rowHeader;修改位置，如果你有一个。


• 假设列标题具有相同的高度作为行。


• 所有（正常）行有相同的高度。


• 将DGV为多选=虚假和只读

• have no RowHeader; modify the location if you have one.
• assumed the column header to have the same height as a row.
• all (normal) rows to have the same height.
• set the DGV to multiselect=false and read-only

这篇关于手风琴在Windows窗体DataGridView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！