“不错"的选项样式winforms对话框控件 [英] 'Nice' options style winforms dialog control

问题描述

在这里，我看到了样式漂亮的对话框控件，类似于Beyond Compare v4中出现的对话框控件:

Here and there I've seen nicely styled dialog controls, similar to this one which appears in Beyond Compare v4:

我自己对此的实现几乎已经结束，并且由左侧的列表框和用户控件组成，这些控件在列表框所选项目更改时也会更改.但是，在这只猪上放一点口红不会使它看起来像上面的样子.我可以通过自定义绘画来描绘如何进行此操作，但是我的真正目的是在运行时而不是设计时生成左手条目(数据文件中的每一列都会有一个).

My own implementation of this gets vaguely close, and consists of a listbox on the left and usercontrols which change when the listbox selected item changes. However no amount of putting lipstick on that pig will get it looking like the above. I can picture how I might undertake this with custom painting of things and so forth, but my real intent is to generate the left hand entries at runtime not design time (there will be one for each column in a datafile).

我想知道是否有人对使用组件(商业上可以)或其他一些巧妙方法合理合理地实现这种事情有任何想法.

I was wondering if anyone had any ideas on how to reasonably easily implement such a thing, either with a component (commercial is fine) or some other ingenious method.

谢谢！

推荐答案

以下是模仿您的设计的示例.我有一个大的 panel1 可以容纳两侧，其中有一个 panel2 可以容纳左侧.在 panel2 内部有搜索控件和 listview .

Here is an example of mimicking your design. I have one large panel1 to house both sides and in it one panel2 to house the left side. Inside panel2 there are the search controls and the listview.

搜索控件是一个 Label1 ，其中包含一个 TextBox 和另一个 Label2 . Label.Images 已对齐，并且 Textbox 没有边框. Labels 是 AutoSize = false ，而 Label1 具有3D边框.

The search controls are a Label1 containing a TextBox and another Label2. The Label.Images are aligned and the Textbox has no Border. The Labels are AutoSize=false and Label1 has a 3D-border.

Panel1 具有singleLine边框， panel2 和 ListView 没有边框. ListView 具有 View = Details 和一列 HeaderStyle = None .它还具有 OwnerDraw = true .

Panel1 has a singleLine border, panel2 and the ListView have no borders. The ListView has View=Details and one column, HeaderStyle=None. It also has OwnerDraw=true.

我为 ListView 添加了 Paint 事件，但必须使用代码对其进行调用.

I have added a Paint event for the ListView but have to call it in code.

请注意，我还没有花时间来创建漂亮的图像.另请注意:它们的高度将决定项目的高度(！)，因此在上方和下方留出一些透明的边框；他们的好看将是整体外观的关键！

Please note that I haven't taken the time to create nice images. Also note: Their height will determine the Items' Height (!) so leave a little transparent border above and below; their good looks will be key to the overall looks!

它们包含在具有适当的 Size 和 BitDepth 的 Imagelist 中.您可能需要调整 DrawIamge 数字..

They are contained in an Imagelist with appropriate Size and BitDepth. You may need to adapt the DrawIamge numbers..

右边的东西几乎是标准的.对于水平条，我使用 Panel 和 height = 1 和 Border = Single .如果您有一组以上的 RadioButtons ，请确保将每个组放置在单独的面板中，透明且没有边框..

The stuff on the right side is pretty much standard; for the horizontal bar I use a Panel with height=1 and Border=Single. If you have more than one group of RadioButtons make sure to put each group in a separate Panel, transparent and no Borders, of course..

public Form1()
{
    InitializeComponent();

    listView1.Width = panel2.ClientSize.Width;
    listView1.Columns[0].Width = listView1.ClientSize.Width;
    listView1.Paint += listView1_Paint;
    listView1.BackColor = panel2.BackColor;
    leftBrush = new SolidBrush(panel2.BackColor);
    rightBrush = new SolidBrush(panel1.BackColor);
}

Pen borderPen = new Pen(SystemColors.ActiveBorder);
SolidBrush leftBrush, rightBrush;

private void listView1_DrawItem(object sender, DrawListViewItemEventArgs e)
{
    if (e.ItemIndex == 0)  listView1_Paint(
        null, new PaintEventArgs(e.Graphics, listView1.ClientRectangle)); 

    if (!e.Item.Selected)
    {
      e.Graphics.FillRectangle(leftBrush, e.Bounds);
      e.Graphics.DrawLine(borderPen, 
                 listView1.Width-1, e.Bounds.Y, listView1.Width-1, e.Bounds.Bottom);
    }
    else
    {
       e.Graphics.FillRectangle(rightBrush , e.Bounds);
       e.Graphics.DrawLine(borderPen, 0, e.Bounds.Top, e.Bounds.Width, e.Bounds.Top);
       e.Graphics.DrawLine(borderPen, 
                           0, e.Bounds.Bottom-1, e.Bounds.Width, e.Bounds.Bottom-1);
    }
    e.Graphics.DrawString( e.Item.Text, listView1.Font, 
                          Brushes.Black, 35, e.Bounds.Y + 5 );
    e.Graphics.DrawImage(imageList1.Images[e.Item.ImageIndex], 2, e.Bounds.Y );
}

void listView1_Paint(object sender, PaintEventArgs e)
{
    int hh = listView1.Items.Count * imageList1.ImageSize.Height;
    e.Graphics.DrawLine(borderPen, 
               listView1.Width - 1, hh, listView1.Width - 1, listView1.Height);
}

private void panel2_Paint(object sender, PaintEventArgs e)
{
    e.Graphics.DrawLine(borderPen, panel2.Width-1, 0, panel2.Width-1, listView1.Top);
}

}

这是我的Q& D版本的屏幕截图:

Here is a screenshot of my Q&D version:

这篇关于“不错"的选项样式winforms对话框控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！