C# - Criando um ListView com ícones  - I

Hoje veremos como criar um ListView com ícones em uma aplicação Windows Forms.

Hoje vamos explorar a verstailidade do ListView para criar e exibir ícones pequenos e grandes.

Basicamente oque vamos fazer é colocar imagens em dois controles ImageList e a seguir definidir as propriedades LargeImageList e SmallImageList do controle ListView. Depois amos definir as propriedades ImageIndex dos itens com os índices pertinentes para os ícones corretos a exibir no ListView.

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_ListViewIcons;

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

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

Os namespaces usados no projeto são:

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;

A seguir inclua o código abaixo no evento Load do formulário onde vamos criar as imagens e preencher o ListView - lvDados - com dados :

       private void Form1_Load(object sender, EventArgs e)
        {
            // Inicializa o ListView.
            lvDados.SmallImageList = imageList1;
            lvDados.LargeImageList = imageList2;

            // Defina o cabeçalho das colunas
            CriaCabecalhoColuna(lvDados,
                "Time", 230, HorizontalAlignment.Left,
                "Pontos", 220, HorizontalAlignment.Left,
                "Vitorias", 130, HorizontalAlignment.Left,
                "Saldo Gol", 230, HorizontalAlignment.Left);

            // Cria as imagens
            RectangleF rect_pequeno = new RectangleF(0, 0, 32, 32);
            RectangleF rect_grande = new RectangleF(3, 3, 58, 58);

            imageList1.Images.Clear();
            imageList2.Images.Clear();

            using (Pen pen_pequena = new Pen(Color.Blue, 2))
            {
                using (Pen pen_grande = new Pen(Color.Blue, 3))
                {
                    pen_grande.LineJoin = LineJoin.Round;
                    for (int i = 1; i <= 7; i++)
                    {
                        Bitmap bm32x32 = new Bitmap(32, 32);
                        using (Graphics gr = Graphics.FromImage(bm32x32))
                        {
                            gr.SmoothingMode = SmoothingMode.AntiAlias;
                            gr.Clear(Color.Transparent);
                            DesenhaEstrela(gr, rect_pequeno, i + 3, pen_pequena,Brushes.Yellow);
                            // Salva a imagem usando i como chave da imagem
                            imageList1.Images.Add(i.ToString(), bm32x32);
                        }

                        Bitmap bm64x64 = new Bitmap(64, 64);
                        using (Graphics gr = Graphics.FromImage(bm64x64))
                        {
                            gr.Clear(Color.Transparent);
                            gr.SmoothingMode = SmoothingMode.AntiAlias;
                            DesenhaEstrela(gr, rect_grande, i + 3, pen_grande,Brushes.Yellow);
                            // Salva a imagem usando i como chave da imagem
                            imageList2.Images.Add(i.ToString(), bm64x64);
                        }
                    }
                }
            }
            // Adiciona linha de dados ao ListView
            AdicionaLinha(lvDados, "1", "Flamengo", "42","13","24" );
            AdicionaLinha(lvDados, "2", "Palmeiras", "39", "11","16");
            AdicionaLinha(lvDados, "3", "Santos","37", "11","11" );
            AdicionaLinha(lvDados, "4", "Corinthians", "32","8","10");
            AdicionaLinha(lvDados, "5", "São Paulo", "31","8","8" );
            AdicionaLinha(lvDados, "6", "Internacional","30","9","6" );
            AdicionaLinha(lvDados, "7", "Bahia","30", "8", "6");
    }
 

Crie o método AdicionaLinha() onde vamos incluir os dados que vamos exibir no ListView:

        // Adiciona uma nova linha ao ListView.
        public void AdicionaLinha(ListView lvw, string key,
            string titulo_item, params string[] titulo_subitem)
        {
            // Cria o item
            ListViewItem novo_item = lvw.Items.Add(titulo_item, key);
            // Cria os sub-items.
            for (int i = titulo_subitem.GetLowerBound(0);
                     i <= titulo_subitem.GetUpperBound(0);
                     i++)
            {
                novo_item.SubItems.Add(titulo_subitem[i]);
            }
        }

A seguir crie o método que vai criar o cabeçalho do ListView recebendo os itens e sub-itens a exibir:

        public void CriaCabecalhoColuna(ListView lvw, params object[] cabecalho_info)
        {
            // Remove cabeçalhos existentes
            lvw.Columns.Clear();
            // Cria o cabeçalho das colunas
            for (int i = cabecalho_info.GetLowerBound(0);
                     i <= cabecalho_info.GetUpperBound(0);
                     i += 3)
            {
                lvw.Columns.Add(
                    (string)cabecalho_info[i],
                    (int)cabecalho_info[i + 1],
                    (HorizontalAlignment)cabecalho_info[i + 2]);
            }
        }

Crie o método DesenhaEstrela que vai criar uma imagem de uma estrela com número x de pontas:

        // Desenha uma estrela que indica o numero de pontas da estrela
       private void DesenhaEstrela(Graphics gr, RectangleF rect, int numero_pontos, Pen pen, Brush brush)
        {
            // Calcula
            float cx = (rect.Left + rect.Right) / 2f;
            float cy = (rect.Top + rect.Bottom) / 2f;
            float rx1 = rect.Width / 2f - 1;
            float ry1 = rect.Height / 2f - 1;
            float rx2 = rx1 / 3f;
            float ry2 = ry1 / 3f;

            // Gera os pontos das estrelas
            double theta = -Math.PI / 2;
            double dtheta = Math.PI / numero_pontos;
            List<PointF> points = new List<PointF>();
            for (int i = 0; i < numero_pontos; i++)
            {
                points.Add(new PointF(
                    (float)(cx + rx1 * Math.Cos(theta)),
                    (float)(cy + ry1 * Math.Sin(theta))));
                theta += dtheta;
                points.Add(new PointF(
                    (float)(cx + rx2 * Math.Cos(theta)),
                    (float)(cy + ry2 * Math.Sin(theta))));
                theta += dtheta;
            }

            // Desenha a figura
            PointF[] point_array = points.ToArray();
            gr.FillPolygon(brush, point_array);
            gr.DrawPolygon(pen, point_array);
       }
 

No evento SelectedIndexChanged do cboEstilo defina o código abaixo para alterar o modo de exibição do ListView:

        private void CboEstilo_SelectedIndexChanged(object sender, EventArgs e)
        {
            switch (cboEstilo.Text)
            {
                case "Ícones Grandes":
                    lvDados.View = View.LargeIcon;
                    break;
                case "Ícones Pequenos":
                    lvDados.View = View.SmallIcon;
                    break;
                case "Lista":
                    lvDados.View = View.List;
                    break;
                case "Lado a Lado":
                    lvDados.View = View.Tile;
                    break;
                case "Detalhes":
                    lvDados.View = View.Details;
                    break;
            }
        }

Executando projeto teremos o resultado abaixo:

Em outro artigo veremos como usar o ListView para exibir imagens e também a imagem selecionada.

Pegue o projeto completo aqui :  WF_ListViewIcons.zip

"E (Jesus) disse-lhes: Acautelai-vos e guardai-vos da avareza; porque a vida de qualquer não consiste na abundância do que possui.""
Lucas 12:15

Referências:

José Carlos Macoratti