缩略图复选框

时间:2014-12-17 22:00:38

标签: c# .net checkbox user-controls custom-controls

我正在为我最近的一个项目寻找.Net控件。

基本上我需要一个缩略图复选框或一个图像复选框。

事实上,Windows内部的屏幕截图显示了我想要的内容。

Thumbnail CheckBox

有没有人知道我可以使用此功能下载某个控件?如果没有,我可以进行自定义控制,但这更加复杂,并且有点痛苦。如果必须,我会这样做,但我也很难开始这样做。

感谢。

编辑:这适用于WPF应用。 AKA Xaml。

1 个答案:

答案 0 :(得分:4)

你会相信吗:你所需要的只是一个正常的CheckBox

它的BackgroundImage具有Zoom能力,只需几行就可以让它变得非常酷。第一行是原始方法;在第二行中,您可以看到hoverImage函数的效果:图像被填充并具有阴影:

enter image description here

以下是创建它的功能:

CheckBox imageCheckBox(Image img, Size size, string name)
{
    CheckBox cbx = new CheckBox();

    cbx.AutoSize = false;
    cbx.Text = "";
    cbx.CheckAlign = ContentAlignment.TopLeft;
    cbx.BackgroundImageLayout = ImageLayout.Zoom;
    cbx.Size = size;
    cbx.BackgroundImage = img;
    cbx.Name = name;
    cbx.Padding = new System.Windows.Forms.Padding(3, 3, 0, 0);
    cbx.BackColor = SystemColors.Control;

    cbx.CheckedChanged += (s, e) =>
    {
      cbx.BackColor = cbx.Checked ? SystemColors.Control : SystemColors.Window;
    };

    cbx.MouseEnter += (s, e) =>
    {
       cbx.BackColor = cbx.Checked ? SystemColors.GradientActiveCaption :      
                                     SystemColors.GradientInactiveCaption;
    };

    cbx.MouseLeave += (s, e) =>
    {
      cbx.BackColor = cbx.Checked ? SystemColors.Control : SystemColors.Window;
    };

    cbx.Paint += (s, e) =>
    {
        if (cbx.ClientRectangle.Contains(cbx.PointToClient(Cursor.Position))  
        ||  cbx.Checked))
        e.Graphics.DrawRectangle(Pens.DarkGray, 0, 0,cbx.Width-1,cbx.Height-1);
    };

    return cbx;
}

在项目中添加FlowLayoutPanel,并按以下方式调用:

size = new Size(200, 80);
flowLayoutPanel1.Controls.Add(imageCheckBox(yourImage1, size, "checkBox1"));
flowLayoutPanel1.Controls.Add(imageCheckBox(yourImage2, size, "checkBox2"));
flowLayoutPanel1.Controls.Add(imageCheckBox(yourImage3, size, "checkBox3"));

根据您以后的访问方式,您可能希望在CheckBoxes之前保留对Dictionary的引用,然后再将FLP添加到Name,以便通过CheckedChanged访问它们{1}}。

我通过对MouseEnterMouseLeavePaint事件进行编码并在条件Bitmap hoverImage(Image img, Size size, Padding pad) { Bitmap bmp = new Bitmap(size.Width, size.Height); // client rectangle Rectangle cRect = new Rectangle(pad.Left, pad.Top, size.Width - pad.Left - pad.Right, size.Height - pad.Top - pad.Bottom); // image proportion float fi = 1f * img.Width / img.Height; // target size int nw = fi >= 1 ? cRect.Width : (int)(1f * cRect.Width / fi); int nh = (int)(1f * nw / fi); if (nh > cRect.Height) { nh = cRect.Height; nw = (int)(1f * nh * fi); } Size nSize = new Size(nw, nh); Point dPoint = new Point(pad.Left + (cRect.Width - nw) / 2, pad.Top + (cRect.Height - nh) / 2); using ( Graphics G = Graphics.FromImage(bmp) ) { Rectangle dRect = new Rectangle(dPoint, nSize); Rectangle sRect = new Rectangle(Point.Empty, img.Size); Rectangle shRect = new Rectangle(dRect.X - 3, dRect.Y - 3, dRect.Width + 8, dRect.Height + 8); for (int i = 0; i < 6; i++) { using (Pen pen = new Pen(Color.FromArgb(i * 15, Color.Black))) G.DrawRectangle(pen, shRect); shRect.Inflate(-1, -1); } G.DrawImage(img, dRect, sRect, GraphicsUnit.Pixel); } return bmp; } 事件中添加边框来添加一些风格。

结果已经相当不错了。要模仿填充和时尚的阴影,您可以使用此功能:

imageCheckBox

// cbx.BackgroundImage = img; cbx.BackgroundImage = hoverImage( img, size,new Padding(10, 10, 10, 10) ) ; 代码中更改此内容:

cbx.Disposed += (s, e) => { 
    if (cbx.BackgroundImage != null) cbx.BackgroundImage.Dispose(); };

当我们停止一个新的Bitmap时,添加一个Disposed事件以及其他事件来清理GDI资源:

{{1}}