[C#] ImageListView

公司內部 ERP 使用該套件 - ImageListView 來顯示圖檔，根據官方文章來筆記基礎功能，了解有那些功能可以使用，紀錄版本為 V13.8.2

C# Code 紀錄

using Manina.Windows.Forms;
using Manina.Windows.Forms.ImageListViewRenderers;
using System;
using System.Data;
using System.Drawing;
using System.IO;
using System.Linq;
using System.Windows.Forms;

namespace ImageListViewSample
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();

            // 預設為 View.Thumbnails
            imageListView1.View = Manina.Windows.Forms.View.Thumbnails;

            // 預設為 true
            imageListView1.MultiSelect = true;

            // 是否允許檔案重覆，預設為 false
            imageListView1.AllowDuplicateFileNames = false;

            // 是否允許調整相片順序，預設為 true
            imageListView1.AllowItemReorder = true;

            // 調整縮圖大小
            imageListView1.ThumbnailSize = new Size(100,100);

            // CheckBox 相關設定
            // CheckBox 顯示
            imageListView1.ShowCheckBoxes = false;
            // CheckBox 位置
            imageListView1.CheckBoxAlignment = ContentAlignment.TopLeft;

            // 事件
            imageListView1.ItemClick += ImageListView1_ItemClick;

            // 設定 ZoomingRenderer 
            imageListView1.SetRenderer(new ZoomingRenderer(0.5f));
        }

        private void Form1_Load(object sender, EventArgs e)
        {

        }

        private void btnLoadPhoto_Click(object sender, EventArgs e)
        {
            var fbd = new FolderBrowserDialog();
            if (fbd.ShowDialog() != DialogResult.OK)
                return;

            DirectoryInfo dir = new DirectoryInfo(fbd.SelectedPath);
            if (dir.Exists == false)
            {
                MessageBox.Show("該路徑異常，無法顯示圖片", "錯誤", MessageBoxButtons.OK, MessageBoxIcon.Error); ;
                return;
            }

            var photos = dir.GetFiles().Select(file => file.FullName).ToArray();

            imageListView1.SuspendLayout();
            imageListView1.Items.AddRange(photos);
            imageListView1.ResumeLayout();

            // 故意把使用者選擇資料夾路徑塞進 Tag 內，單純紀錄有 Tag Property 存在而已
            imageListView1.Tag = fbd.SelectedPath;
        }

        private void btnRemove_Click(object sender, EventArgs e)
        {
            if (imageListView1.SelectedItems.Any() == false)
            {
                MessageBox.Show("請選擇相片", "錯誤", MessageBoxButtons.OK, MessageBoxIcon.Error); ;
                return;
            }

            foreach (ImageListViewItem item in imageListView1.SelectedItems)
            {
                imageListView1.Items.Remove(item);
            }
        }

        private void btnClear_Click(object sender, EventArgs e)
        {
            imageListView1.Items.Clear();
        }

        private void ImageListView1_ItemClick(object sender, ItemClickEventArgs e)
        {
            string itemInfo = string.Empty;
            itemInfo += $"FileName：{e.Item.FileName}" + Environment.NewLine;
            itemInfo += $"FilePath：{e.Item.FilePath}" + Environment.NewLine;
            itemInfo += $"Text：{e.Item.Text}" + Environment.NewLine;
            txtImageIfo.Text = itemInfo;
        }
    }
}

View Model

相片排版呈現方式，預設為 View.Thumbnails 如下圖，相片大小可以透過 ThumbnailSize 來調整，其他 View 效果可以參考官方文件 - View Modes

Renderers

Renderers 為圖檔呈現效果，內部較常用的是 ZoomingRenderer，滑鼠滑過該圖片有放大效果，放大狀態下也會觸發 ItemClick 事件，該範例是把圖片相關資訊顯示在下方的 TextBox 內，官方文件 - Custom Renderers 內有其他 Render 效果可以參考