C#&Winform&ListView实现缺陷图片浏览器

C#&Winform&ListView实现缺陷图片浏览器

功能需求

机器视觉检测系统中特别是缺陷检测系统,通常需要进行对已经检出的缺陷图片进行浏览查阅。主要是通过条件筛选查询出所需要的数据,进行分页再展示到界面中。

预期功能:

  • 条件查询:通过不同的条件查询需要展示的检测记录数据
  • 数据分页:页面大小有限,控制数据来源,对数据进行分页
  • 图像展示:以平铺的方式展示图像
  • 数据提示:鼠标移动到图片上显示其他详细信息
  • 原图查看:点击查看原始大图

本文使用Winform&ListView实现图像展示和数据提示这部分功能需求,效果如下所示:

图像浏览

界面上需要放置一个ListView控件和一个ImageList对象。

我们是要平铺显示大图,设置ListView空间的View属性为LargeIcon,说大也不够大,只有256*256。

具体实现过程就是:

1 查询到数据;

2 遍历数据源将图像数据填充到ImageList对象,同时设置ListView的listViewItem集合

3 传递给ListView来展示。

注意:

1 图像失真:设置 imageList.ColorDepth = ColorDepth.Depth32Bit;

2 图像大小:ImageSize.Height或者ImageSize.Width应介于 1 和 256 之间。

csharp 复制代码
private void uiPagination1_PageChanged(object sender, object pagingSource, int pageIndex, int count)
{
    try
    {
        List<DefectResultDetails> data = new List<DefectResultDetails>();
        if (datas == null)
        {
            return;
        }
        for (int i = (pageIndex - 1) * count; i < (pageIndex - 1) * count + count; i++)
        {
            if (i >= datas.Count) continue;
            data.Add(datas[i]);
        }
        int index = 0;
        listView1.Clear();
        imageList = new ImageList();
        imageList.ImageSize = new Size(256, 130);
        //彩色图像需要设置,否则图像会失真
        imageList.ColorDepth = ColorDepth.Depth32Bit;
        
        foreach (var item in data)
        {
            imageList.Images.Add(Bitmap.FromFile(item.Path));
            ListViewItem listViewItem = new ListViewItem();
            listViewItem.ImageIndex = index;
            listViewItem.Tag = $"{item.Path.Split('\\')[4]}-{item.Path.Split('\\')[5].Split('.')[0]}";
            listViewItem.Text = $"{item.Path.Split('\\')[4]}-{item.Path.Split('\\')[5].Split('.')[0]}";
            //使用该方法要将控件的 ShowItemTttlTips设置为True
            //listViewItem.ToolTipText = $"总面积:{item.Area} 最大高度:{item.Height} 最大宽度:{item.Width} 是否报警:{item.IsAlarm}";
            listViewItem.SubItems.Add($"总面积:{item.Area} 最大高度:{item.Height} 最大宽度:{item.Width} 异物个数:{item.Count} 是否报警:{item.IsAlarm}");
            // 为了在点击时预览原始图像,从这里可以拿到图像的绝对路径
            listViewItem.SubItems.Add($"{item.Path}");
            listView1.Items.Add(listViewItem);
            index++;
        }
        listView1.LargeImageList = imageList;
        //调整显示内容之间的行间距留白
        SetSpacing(170, 319);
    }
    catch (Exception ex)
    {
        Logger.Logger.Error($"{ex}");
    }
}

行间距调整

csharp 复制代码
[DllImport("user32.dll", CharSet = CharSet.Auto, SetLastError = false)]
private static extern int SendMessage(IntPtr hWnd, int Msg, int wParam, int lParam);
const int LVM_FIRST = 0X1000;
const int LVM_SETICONSPACING = LVM_FIRST + 53;

/// <summary>
/// y 左右间距,x 是上下间距
/// </summary>
/// <param name="x"></param>
/// <param name="y"></param>
public void SetSpacing(Int16 x, Int16 y)
{
    SendMessage(listView1.Handle, LVM_SETICONSPACING, 0, x * 65536 + y);
    this.listView1.Refresh();
}

悬浮提示

鼠标悬浮与图片上方就可以显示以下内容:

$"总面积:{item.Area} 最大高度:{item.Height} 最大宽度:{item.Width} 异物个数:{item.Count} 是否报警:{item.IsAlarm}"

csharp 复制代码
private void listView_ItemMouseHover(object sender, ListViewItemMouseHoverEventArgs e)
{
    ToolTip toolTip = new ToolTip();
    string itemInfor = e.Item.SubItems[1].Text;
    toolTip.SetToolTip((e.Item).ListView, itemInfor);
}
相关推荐
小码氓2 分钟前
Java填充Word模板
java·开发语言·spring·word
暮鹤筠18 分钟前
[C语言初阶]操作符
c语言·开发语言
Boilermaker19922 小时前
【Java EE】Mybatis-Plus
java·开发语言·java-ee
aramae2 小时前
C++ -- STL -- vector
开发语言·c++·笔记·后端·visual studio
Tony小周2 小时前
实现一个点击输入框可以弹出的数字软键盘控件 qt 5.12
开发语言·数据库·qt
lixzest3 小时前
C++ Lambda 表达式详解
服务器·开发语言·c++·算法
沉默媛3 小时前
如何安装python以及jupyter notebook
开发语言·python·jupyter
_Chipen4 小时前
C++基础问题
开发语言·c++
止观止4 小时前
JavaScript对象创建9大核心技术解析
开发语言·javascript·ecmascript
screenCui5 小时前
macOS运行python程序遇libiomp5.dylib库冲突错误解决方案
开发语言·python·macos