Windows窗体中的可点击图像网格?

时间:2012-06-03 00:24:52

标签: c# winforms image-gallery

如果这是一个愚蠢的问题,请原谅我。我对C#有一点经验,但还没到这个程度。

我有一系列图像要放入网格中,每个图像周围都有空格,下面还有文字,我希望它们可以点击,所以当点击它们时它们会变成hilite,双击会运行一个事件。我拥有的最好的例子是程序ACDSee的用户界面。我用谷歌搜索了几个小时,并没有提出任何适用的东西。这很难还是简单?谁能给我一个例子,还是指出我正确的方向?

干杯。

2 个答案:

答案 0 :(得分:3)

这似乎并不十分困难。我建议采取以下步骤:

  1. 为项目添加新的“用户控件”以获取图像缩略图。它可以在底部包含停靠的PictureBoxLabelLinkLabel
  2. 对于每个缩略图周围的空间,只需使用用户控件的Padding属性即可。
  3. 对于要保留缩略图的所谓网格,请使用FlowLayoutPanel,只需将上述用户控件的实例添加到此面板。
  4. 对于被选中的可视化表示,将用户控件实例的背景颜色更改为蓝色(例如),并在取消选择时更改为控制面。建议为用户控件实现IsSelected属性。
  5. 要模拟缩略图选择,请处理用户控件的Click事件,并将所有缩略图实例的事件分配给单个事件处理程序方法。存储对已选定缩略图的全局引用,例如,SelectedThumbnail初始化为null。在事件处理程序正文中,将sender与全局SelectedThumbnail进行比较,并在需要时进行更新。如果未选择与sender关联的用户控件(即,其背景不是蓝色,或IsSelectedfalse),则将其选中,或更改其背景。否则将背景更改为其默认颜色(例如,控制面)。
  6. Click事件处理程序主体看起来像这样:

    MyThumbnailControl ctrl = sender as MyThumbnailControl;
    if(ctrl == null) return;
    if(ctrl == SelectedThumbnail) return; // selected again
    if(ctrl != SelectedThumbnail)
    {
        ctrl.IsSelected = true;
        ctrl.BackColor = Color.Blue; 
        // it's better to set the back-color in the IsSelected property setter, not here
        SelectedThumbnail.IsSelected = false;
        SelectedThumbnail.BackColor = Color.Control;
        SelectedThumbnail = ctrl; // important part
    }
    

    还建议将所有要添加到所谓网格的缩略图实例也引用到单独的数组中。因此,通过简单的索引计算,可以使用箭头键更改选择。


    进一步说明:我假设要创建的用户控件名为MyThumbnailControl,只是一个随机名称来引用该控件。当您创建新的用户控件时,向导会为您生成一个具有所需名称的类(例如,MyThumbnailControl),您可以在其中定义名为IsSelected的属性并实现其getter和setter。有关教程,请参阅this。定义用户控件后,您可以从其对应的类中实例化实例。同样通过全局引用,我的意思是表单(或任何父控件)级别的变量。为了简单起见,我们可以在表单中添加所选缩略图的引用,以便在表单正文中保存网格和缩略图:MyThumbnailControl selectedThumb = null;或类似内容。

答案 1 :(得分:0)

以下是我刚刚解决的问题。

创建一个C#项目名称 CreateImageList ,并在Form1中添加以下5个控件及其默认名称,即Panel1,PictureBox1,Label1,Button1,Button2:

enter image description here

工作原理:

  1. 当页面加载时,它会创建一个imageList对象并从您提供的文件夹中加载所有.jpg图像
  2. ImageList图像设置到PictureBox控件中,当用户单击“Button1”时,图片框会显示ImageList中的下一个图像,当用户单击“Button2”时,PictureBox会显示ImageList中的上一个图像。
  3. Label1显示ImageList Arrage中的currentImage计数器。如果您想要编写特定内容,可以创建一个文本数组并与图像计数器同步。
  4. 当用户点击PictureBox时,会创建一个边框以突出显示图片
  5. 当用户双击PictureBox时,会出现一个MessageBox显示DoubleClick事件。
  6. 现在,您可以使用以下代码:

    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.Linq;
    using System.Text;
    using System.Windows.Forms;
    using System.IO;
    
    namespace CreateImageList
    {
    public partial class Form1 : Form
    {
        private int currentImage = 0;
        protected Graphics myGraphics;
        ImageList iPicList = new ImageList();
    
        public Form1()
        {
            InitializeComponent();
            DirectoryInfo dirImages = new DirectoryInfo("C:\\2012");
            iPicList.ImageSize = new Size(255, 255);
            iPicList.TransparentColor = Color.White;
            myGraphics = Graphics.FromHwnd(panel1.Handle);
    
            foreach (FileInfo file in dirImages.GetFiles())
            {
                if (file.Extension == ".jpg")
                {
                    Image myImage = Image.FromFile(file.FullName);
                    iPicList.Images.Add(myImage);
                }
            }
    
            if (iPicList.Images.Empty != true)
            {
                panel1.Refresh();
                currentImage = 0;
                // Draw the image in the panel.
                iPicList.Draw(myGraphics, 1, 1, currentImage);
                // Show the image in the PictureBox.
                pictureBox1.Image = iPicList.Images[currentImage];
                label1.Text = "Image #" + currentImage;
            }
    
        }
    
        private void showImage(int imgIndex)
        {
            // Draw the image in the panel.
            iPicList.Draw(myGraphics, 1, 1, currentImage);
            // Show the image in the PictureBox.
            pictureBox1.Image = iPicList.Images[currentImage];
            label1.Text = "image #" + currentImage;
            panel1.Refresh();
        }
    
        private void button1_Click(object sender, EventArgs e)
        {
            if (iPicList.Images.Count - 1 > currentImage)
            {
                currentImage++;
            }
            else
            {
                currentImage = 0;
            }
            showImage(currentImage);
        }
    
        private void button2_Click(object sender, EventArgs e)
        {
            if (iPicList.Images.Count - 1 >= currentImage)
            {
                if (currentImage == 0)
                    currentImage = iPicList.Images.Count-1;
                else
                    currentImage--;
            }
            else
            {
                currentImage = iPicList.Images.Count;
            }
            showImage(currentImage);
        }
    
        private void pictureBox1_DoubleClick(object sender, EventArgs e)
        {
            MessageBox.Show("Picture Box Double clicked");
        }
    
        private void pictureBox1_Click(object sender, EventArgs e)
        {
            panel1.Refresh();
            myGraphics.DrawRectangle(Pens.Black, 0, 0, iPicList.Images[currentImage].Width + 1, iPicList.Images[currentImage].Height + 1);
            pictureBox1.Image = iPicList.Images[currentImage];
        }
    }
    }
    

    您需要的更改是:

    将以下文件夹更改为有大量jpg的地方:

    DirectoryInfo dirImages = new DirectoryInfo("C:\\2012");
    

    此外,如果您正在处理其他类型的图片,请在此处进行更改:

    if (file.Extension == ".jpg") // Change it to your image type.
    

    如果您不想使用这些按钮上下移动,您还有其他几个选项可以在可滚动的面板或列表或其他内容中托管PictureBox控件。