Controles para listar imagenes

Question

Estoy haciendo una aplicación en Winforms y necesito listar una serie de imágenes que tengo en la base de datos con su respectivo campo de texto.

Lo que quiero saber es si existe algún tipo de control que me permita listar estas imágenes pero una por una, cambiando de imagen al hacer clic en una flecha o algo por el estilo.

Algo parecido a lo que encontré en esta web (Claro que esta en HTML5) http://freehtml5templates.com/downloads/free/serenity/

   Espero que me puedan colaborar, y si hay algún control que pueda hacer esto les agradecería mucho si tienen algún ejemplo de su funcionamiento.

Gracias de antemano.

Answer 1

Hola Jama, actualmente no existe un control propio de VS que realice lo que deseas quizas exista algun control personalizado que lo haga, pero realmente no es complicado resolver lo que planteas.

Para resolverlo necesitarías un control PictureBox para alojar las imagenes, dos botones para el desplazamiento, e internamente una lista con las rutas a visualizar.

Si tienes algun problema para encararlo, avisa.

---

Javier Torrecilla
Para el correcto funcionamiento, y que otros usuarios se puedan beneficiar de la solucion de esta pregunta por favor marca las respuestas que te hayan ayudado como "Respuesta".
Si la respuesta te ha sido util Votala.
Mi Blog: Jtorrecilla
Enlace a Faq de Winforms en Ingles Muy bueno
TabControl con Mejoras

Answer 2

hola

incorporado al VS no existe pero si pdorias encotnrar controles de terceros como ser

ImageListView

saludos

---

Leandro Tuttini

Blog
Buenos Aires
Argentina

Answer 3

Voy a intentar hacerlo como dice jtorrecilla, pero como haría para poner en una lista las imágenes?, digamos tengo creadas las variables donde voy a almacenar las imágenes y el texto y les he asignado la imagen y el texto desde la base de datos.

byte[] imagen1 = InsComun.Imagen1;
byte[] imagen2 = InsComun.Imagen2;
string texto1 = InsComun.Texto1;
string texto2 = InsComun.Texto2;

Ahora en el form solo tengo un PictureBox y un TextBox para mostrar esos datos, como haría para que al hacer clic en un botón "Siguiente" pase de la imagen 1 a la 2 y del texto 1 al 2?

Espero que me haya explicado bien 

Answer 4

No te resultaría más fácil meter hacerlo con una base de datos? 

Allí metes todas las imágenes necesarias, junto con un ID, y al ir pasándolas simplemente le dices que te vaya enseñando el siguiente ID.

Espero te sea de ayuda

---

Programador en entornos Microsoft
Blog
Twitter

Answer 5

Hola,

aquí va una forma en la que lo puedes plantear. Veamos, lo primero es definir una clase para almacenar la información que quieres mostrar, en tu caso, la imagen y un texto

public class Flip
{
	public byte[] Imagen { get; set; }
	public string Texto { get; set; }
}

Luego declaras estas dos variables dentro de tu formulario de manera global

public partial class Form2 : Form
{
  List<Flip> flip = null;
  int index = 0;

  // Resto del código
}

En algún momento cargarás tu estructura, en mi caso, lo he hecho en el constructor del formulario

public Form2()
{
	InitializeComponent();

	ImageConverter converter = new ImageConverter();

	flip = new List<Flip>();
	flip.Add(new Flip() { Imagen = <tu imagen>, Texto = "<tu texto>" });
	flip.Add(new Flip() { Imagen = <tu imagen>, Texto = "<tu texto>" });
	BindFlip();
}

El método BindFlip lo único que hace es mostrar la información del elemento activo, inicialmente 0 (definido en la variable index)

private void BindFlip()
{
	pictureBox1.Image = byteArrayToImage(flip[index].Imagen);
	label1.Text = flip[index].Texto;
}

Luego, tengo estos dos botones para el cambio de la imagen

private void buttonAnterior_Click(object sender, EventArgs e)
{
	index = (index == 0 ? index : index - 1);
	BindFlip();
}

private void buttonSiguiente_Click(object sender, EventArgs e)
{
	index = (index == flip.Count - 1 ? index : index + 1);
	BindFlip();
}

Y como nota final, aquí esta el código del método que transformar un byte[] en un Image

public Image byteArrayToImage(byte[] byteArrayIn)
{
	MemoryStream ms = new MemoryStream(byteArrayIn);
	Image returnImage = Image.FromStream(ms);
	return returnImage;
}

Espero que te sirva...

---

Atentamente, Sergio.

Blog
Twitter

Answer 6

Hola de nuevo Jama,

Imagina que tienes una Lista o array con los nombres de las imagenes (mas que nada para no tenerlas todas en memoria (los bytes)).

Además de esta lista necesitaras un contador para saber la posición en la que te encuentras.

Bien, dentro de tu formulario, necesitarás los botones de desplazamiento (que incrementarán o decrementarán el contador y mostraran la nueva imagen), y un picturebox que alojara la imagen.

public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        int contador = 0;
        public  List<string> lImagenes = new List<string>();
        private void Form1_Load(object sender, EventArgs e)
        {
            lImagenes = new List<string>();
            lImagenes.Add(@"C:\Users\avalon01\Source\DESARROLLO\Otis.Mpb.Mvc\Content\images\accept.png");
            lImagenes.Add(@"C:\Users\avalon01\Source\DESARROLLO\Otis.Mpb.Mvc\Content\images\add.png");
            lImagenes.Add(@"C:\Users\avalon01\Source\DESARROLLO\Otis.Mpb.Mvc\Content\images\anchor.png");
            MostrarImagen();
        }
        private void MostrarImagen()
        {
            if (System.IO.File.Exists(lImagenes[contador]))
                pictureBox1.Image = Image.FromFile(lImagenes[contador]);
            else
                MessageBox.Show("La imagen no existe.");

        }

        private void Button1_Click(object sender, EventArgs e)
        {
            if (contador > 0) contador--;
            MostrarImagen();
            if (contador == 0) button2.Enabled = false;
            button2.Enabled = true;
        }

        private void Button2_Click(object sender, EventArgs e)
        {
            if (contador < lImagenes.Count - 1) contador++;
            MostrarImagen ();
            if (contador == lImagenes.Count - 1) button2.Enabled = false;
            button1.Enabled = true;
        }

        private void button2_Click_1(object sender, EventArgs e)
        {
            if (contador < lImagenes.Count - 1) contador++;
            MostrarImagen();
            if (contador == lImagenes.Count - 1) button2.Enabled = false;
            button1.Enabled = true;
        }

        private void button1_Click_1(object sender, EventArgs e)
        {
            if (contador > 0) contador--;
            MostrarImagen();
            if (contador == 0) button2.Enabled = false;
            button2.Enabled = true;
        }
    }

---

Javier Torrecilla
Para el correcto funcionamiento, y que otros usuarios se puedan beneficiar de la solucion de esta pregunta por favor marca las respuestas que te hayan ayudado como "Respuesta".
Si la respuesta te ha sido util Votala.
Mi Blog: Jtorrecilla
Enlace a Faq de Winforms en Ingles Muy bueno
TabControl con Mejoras

Answer 7

Ya hice todo pero tengo un pequeño error, y es que al llegar a la parte del BindFlip no se como asignarle a ese solo PictureBox todas las imagenes.

Este es el código que tengo y todas las imagenes se asignan correctamente desde la base de datos a las variables que creé.

 public class CuentoC
    {
        public int Id_gc { get; set; }
        public string Nombres_admin { get; set; }
        public int Id_cuento { get; set; }
        public byte[] Img1 { get; set; }
        public byte[] Img2 { get; set; }
        public byte[] Img3 { get; set; }
        public byte[] Img4 { get; set; }
        public byte[] Img5 { get; set; }
        public byte[] Img6 { get; set; }
        public byte[] Img7 { get; set; }
        public byte[] Img8 { get; set; }
        public byte[] Img9 { get; set; }
        public byte[] Img10 { get; set; }
        public byte[] Img11 { get; set; }
        public byte[] Img12 { get; set; }
        public byte[] Img13 { get; set; }
        public byte[] Img14 { get; set; }
        public byte[] Img15 { get; set; }
        public byte[] Img16 { get; set; }
        public byte[] Img17 { get; set; }
        public byte[] Img18 { get; set; }
        public byte[] Img19 { get; set; }
        public byte[] Img20 { get; set; }
        public byte[] Img21 { get; set; }
        public byte[] Img22 { get; set; }
        public byte[] Img23 { get; set; }
        public byte[] Img24 { get; set; }
        public string Texto1 { get; set; }
        public string Texto2 { get; set; }
        public string Texto3 { get; set; }
        public string Texto4 { get; set; }
        public string Texto5 { get; set; }
        public string Texto6 { get; set; }
        public string Texto7 { get; set; }
        public string Texto8 { get; set; }
        public string Texto9 { get; set; }
        public string Texto10 { get; set; }
        public string Texto11 { get; set; }
        public string Texto12 { get; set; }
        public string Texto13 { get; set; }
        public string Texto14 { get; set; }
        public string Texto15 { get; set; }
        public string Texto16 { get; set; }
        public string Texto17 { get; set; }
        public string Texto18 { get; set; }
        public string Texto19 { get; set; }
        public string Texto20 { get; set; }
        public string Texto21 { get; set; }
        public string Texto22 { get; set; }
        public string Texto23 { get; set; }
        public string Texto24 { get; set; }
    }

//Este es el botón con el que listo las imagenes, ya que las traigo de la base de datos dependiendo de su id y admin...


private void button4_Click(object sender, EventArgs e)
        {
            Listar.Grupo.Cuento InsLogica = new Listar.Grupo.Cuento();
            Listar.Grupo.CuentoC InsComun = InsLogica.BuscarCuento(Convert.ToInt32(comboCuento.Text), comboAdmin.Text);


            if (InsComun.Id_gc > 0)
            {
                byte[] img1 = InsComun.Img1;

                byte[] img2 = InsComun.Img2;
                byte[] img3 = InsComun.Img3;
                byte[] img4 = InsComun.Img4;
                byte[] img5 = InsComun.Img5;
                byte[] img6 = InsComun.Img6;
                byte[] img7 = InsComun.Img7;
                byte[] img8 = InsComun.Img8;
                byte[] img9 = InsComun.Img9;
                byte[] img10 = InsComun.Img10;
                byte[] img11 = InsComun.Img11;
                byte[] img12 = InsComun.Img12;
                byte[] img13 = InsComun.Img13;
                byte[] img14 = InsComun.Img14;
                byte[] img15 = InsComun.Img15;
                byte[] img16 = InsComun.Img16;
                byte[] img17 = InsComun.Img17;
                byte[] img18 = InsComun.Img18;
                byte[] img19 = InsComun.Img19;
                byte[] img20 = InsComun.Img20;
                byte[] img21 = InsComun.Img21;
                byte[] img22 = InsComun.Img22;
                byte[] img23 = InsComun.Img23;
                byte[] img24 = InsComun.Img24;
                
                
                string texto1 = InsComun.Texto1;

                string texto2 = InsComun.Texto2;
                string texto3 = InsComun.Texto3;
                string texto4 = InsComun.Texto4;
                string texto5 = InsComun.Texto5;
                string texto6 = InsComun.Texto6;
                string texto7 = InsComun.Texto7;
                string texto8 = InsComun.Texto8;
                string texto9 = InsComun.Texto9;
                string texto10 = InsComun.Texto10;
                string texto11 = InsComun.Texto11;
                string texto12 = InsComun.Texto12;
                string texto13 = InsComun.Texto13;
                string texto14 = InsComun.Texto14;
                string texto15 = InsComun.Texto15;
                string texto16 = InsComun.Texto16;
                string texto17 = InsComun.Texto17;
                string texto18 = InsComun.Texto18;
                string texto19 = InsComun.Texto19;
                string texto20 = InsComun.Texto20;
                string texto21 = InsComun.Texto21;
                string texto22 = InsComun.Texto22;
                string texto23 = InsComun.Texto23;
                string texto24 = InsComun.Texto24;

                //Agrego las imagenes y el texto a la lista
                lista = new List<Listar.Grupo.CuentoC>();
                lista.Add(new Listar.Grupo.CuentoC() { Img1 = img1, Texto1 = texto1 });
                lista.Add(new Listar.Grupo.CuentoC() { Img2 = img2, Texto2 = texto2 });
                lista.Add(new Listar.Grupo.CuentoC() { Img2 = img2, Texto2 = texto2 });
                lista.Add(new Listar.Grupo.CuentoC() { Img3 = img3, Texto3 = texto3 });
                lista.Add(new Listar.Grupo.CuentoC() { Img4 = img4, Texto4 = texto4 });
                lista.Add(new Listar.Grupo.CuentoC() { Img5 = img5, Texto5 = texto5 });
                lista.Add(new Listar.Grupo.CuentoC() { Img6 = img6, Texto6 = texto6 });
                lista.Add(new Listar.Grupo.CuentoC() { Img7 = img7, Texto7 = texto7 });
                lista.Add(new Listar.Grupo.CuentoC() { Img8 = img8, Texto8 = texto8 });
                lista.Add(new Listar.Grupo.CuentoC() { Img9 = img9, Texto9 = texto9 });
                lista.Add(new Listar.Grupo.CuentoC() { Img10 = img10, Texto10 = texto10 });
                lista.Add(new Listar.Grupo.CuentoC() { Img11 = img11, Texto11 = texto11 });
                lista.Add(new Listar.Grupo.CuentoC() { Img12 = img12, Texto12 = texto12 });
                lista.Add(new Listar.Grupo.CuentoC() { Img13 = img13, Texto13 = texto13 });
                lista.Add(new Listar.Grupo.CuentoC() { Img14 = img14, Texto14 = texto14 });
                lista.Add(new Listar.Grupo.CuentoC() { Img15 = img15, Texto15 = texto15 });
                lista.Add(new Listar.Grupo.CuentoC() { Img16 = img16, Texto16 = texto16 });
                lista.Add(new Listar.Grupo.CuentoC() { Img17 = img17, Texto17 = texto17 });
                lista.Add(new Listar.Grupo.CuentoC() { Img18 = img18, Texto18 = texto18 });
                lista.Add(new Listar.Grupo.CuentoC() { Img19 = img19, Texto19 = texto19 });
                lista.Add(new Listar.Grupo.CuentoC() { Img20 = img20, Texto20 = texto20 });
                lista.Add(new Listar.Grupo.CuentoC() { Img21 = img21, Texto21 = texto21 });
                lista.Add(new Listar.Grupo.CuentoC() { Img22 = img22, Texto22 = texto22 });
                lista.Add(new Listar.Grupo.CuentoC() { Img23 = img23, Texto23 = texto23 });
                lista.Add(new Listar.Grupo.CuentoC() { Img24 = img24, Texto24 = texto24 });

                BindLista();

              
            }

//El problema está acá ya que al PictureBox le asigno lo que tiene Img1, pero no sé como hacer para que cuando haga clic
// al botón siguiente se le asigne automaticamente lo que tiene Img2 y asi sucesivamente



        private void BindLista()
        {
            pictureBox1.Image = ImageHelper.ByteArrayToImage(lista[index].Img1);
            textBox1.Text = lista[index].Texto1;
           
        }

Por cierto estoy siguiendo el ejemplo de sergiomf

Answer 8

Examinándolo bien, tenía un error en la lista, pero ya lo resolví...

Muchas gracias a todos por la colaboración.