C# - ListView : Galeria de imagens - I

Hoje veremos como criar uma galeria de imagens usando o ListView em uma aplicação Windows Forms.

Hoje vamos continuar a explorar a versatilidade do ListView para exibir imagens criando uma galeria de imagens e exibindo uma imagem selecionada:

Vamos ao que interessa...

Criando o projeto Windows Forms

Vamos então criar um projeto do tipo Windows Forms App(.NET Framework) no VS 2019 Community no menu File -> New Project, com o nome WF_ListViewImagens;

No formulário Form1.cs inclua os seguintes controles:

Defina o leiaute do formulário conforme a imagem a seguir:

A seguir vejamos a implementação do código no formulário.

Os namespaces usados no projeto são:

using System;
using System.Drawing;
using System.IO;
using System.Windows.Forms;

Logo após a declaração do formulário inclua o código abaixo onde criamos os ImageList, inicializamos variáveis que iremos usar no projeto e criamos o código para abrir uma caixa de diálogo para selecionar imagens:

       //Cria dinamicamente ImageList em tempo de execução
       ImageList imageList = new ImageList();
       ImageList imageListPequeno = new ImageList();
       ImageList imageListGrande = new ImageList();
        int contador = 0;
        public string novoNomeImagem = "";
        //abre uma janela de diálogo para selecionar imagens
        OpenFileDialog ofd = new OpenFileDialog()
        {
            Multiselect = true,
            ValidateNames = true,
            Filter = "JPG|*jpg|JPEG|*.jpeg|PNG|*.png"
        };
        FileInfo fi;

 

No construtor do formulário inicializamos os ImageList:

        public Form1()
        {
            InitializeComponent();
            //inicializa os ImageList 
            lvDados.SmallImageList = imageListPequeno;
            lvDados.SmallImageList = imageListGrande;
            this.KeyPreview = true;
        }

 

No evento Click do botão - Selecionar Imagens - temos o código que permite selecionar as imagens e incluí-las nos ImageList:

        private void btnSelecionar_Click(object sender, EventArgs e)
        {
            // define o tamanho da das imagens no imagelist
            imageList.ImageSize = new Size(50, 50);
            imageListPequeno.ImageSize = new Size(32, 32);
            imageListGrande.ImageSize = new Size(90, 90);
            //seleciona as imagens e incluir no imagelist
            if (ofd.ShowDialog() == DialogResult.OK)
            {
                lvDados.Items.Clear();
                foreach (string fileName in ofd.FileNames)
                {
                    fi = new FileInfo(fileName);
                    FileInfo fileinfo = new FileInfo(fileName);
                    using (FileStream stream = new FileStream(fi.FullName, FileMode.Open, FileAccess.Read))
                    {
                        imageList.Images.Add(Image.FromStream(stream));
                        imageListPequeno.Images.Add(Image.FromStream(stream));
                        imageListGrande.Images.Add(Image.FromStream(stream));
                    }
                    lvDados.LargeImageList = imageList;
                    lvDados.Items.Add(new ListViewItem
                    {
                        ImageIndex = contador,
                        Text = fi.Name,
                        Tag = fi.FullName
                    });
                    contador++;
                }
            }
        }

A seguir em cada evento CheckedChanged dos radiobuttons vamos incluir o código que altera o modo de exibição das imagens pelo ListView onde temos as opções:

        private void rdbLadoLado_CheckedChanged(object sender, EventArgs e)
        {
            if (rdbLadoLado.Checked == true)
            {
                lvDados.View = View.Tile;
            }
        }
        private void rdbLista_CheckedChanged(object sender, EventArgs e)
        {
            if (rdbLista.Checked == true)
            {
                lvDados.View = View.List;
            }
        }
        private void rdbPequenos_CheckedChanged(object sender, EventArgs e)
        {
            if (rdbPequenos.Checked == true)
            {
                lvDados.SmallImageList = imageListPequeno;
                lvDados.View = View.SmallIcon;
            }
        }
        private void rdbGrandes_CheckedChanged(object sender, EventArgs e)
        {
            if (rdbGrandes.Checked == true)
            {
                lvDados.LargeImageList = imageListGrande;
                lvDados.View = View.LargeIcon;
            }
        }

A seguir demos o código do evento MouseClick que cria um menu de contexto ao clicar em uma imagem com a opção 'Renomear' que permite alterar o nome de uma imagem:

        private void LvDados_MouseClick(object sender, MouseEventArgs e)
        {
            //aciona o menu de contexto com a opção - Renomear
            ContextMenu cm = new ContextMenu();
            lvDados.ContextMenu = cm;
            var mi = new MenuItem("Renomear");
            mi.MenuItems.Add(mi);
            mi.Click += OnMenuItemClick;
            cm.MenuItems.Add(mi);
        }

Depois no método OnMenuItemClick temo o código que permite editar o nome da imagem, e, a seguir no evento AfterLabelEdit é onde estamos efetivamente mudando o nome da imagem.

Para que o código funcione devemos alterar a propriedade LabelEdit do ListView para true:

        //Renomeia a imagem iniciando a edição
        //Defina a propriedade LabelEdit como true para evitar erros
        private void OnMenuItemClick(object sender, EventArgs e)
        {
            lvDados.SelectedItems[0].BeginEdit();
        }
        private void LvDados_AfterLabelEdit(object sender, LabelEditEventArgs e)
        {
            if (e.Label == null)
                return;
            novoNomeImagem = Convert.ToString(e.Label);
            ListViewItem item1 = lvDados.SelectedItems[0];
            FileInfo fileInfo = new FileInfo(item1.Tag.ToString());
            fileInfo.MoveTo(fileInfo.Directory.FullName + "\\" + novoNomeImagem + fileInfo.Extension);
        }

Para concluir temos o código dos eventos Click do ListView que exibe o PictureBox com a imagem selecionada e depois no evento Click do PictureBox estamos ocultando o picturebox:

        private void LvDados_Click(object sender, EventArgs e)
        {
            //exibe a imagem selecionada no Picturebox
            if (lvDados.SelectedIndices.Count == 0)
                return;
            Int32 item = lvDados.SelectedIndices[0];
            Image img1 = imageList.Images[item];
            picImagem.Visible = true;
            picImagem.Image = img1;
        }
        private void PicImagem_Click(object sender, EventArgs e)
        {
            //oculta a imagem exibida
            if (picImagem.Image != null)
            {
                picImagem.Image.Dispose();
                picImagem.Image = null;
            }
            picImagem.Visible = false;
        }
 

Executando projeto teremos o resultado abaixo:

Em outro artigo veremos como exibir imagens no ListView e permitir a exclusão da imagem do controle.

Pegue o projeto completo aqui :  WF_ListViewImagens.zip

"Mas eu confio na tua benignidade; na tua salvação se alegrará o meu coração.
Cantarei ao Senhor, porquanto me tem feito muito bem."
Salmos 13:5,6

Referências:

José Carlos Macoratti