Doubt how to call several different images

Question

I’m a beginner in C#, I’m using visual studio 2010 and I have a project to do and an idea came up, but I don’t know how to put it in code. I would like to put 2 combo box ( ITEM and COLOR ), and an image next to it that will change according to what the user choose, for example, if the user chooses in the first combo a eraser, appear the image of a eraser, if he chooses in the second combo box the color blue, a blue rubber appears, I already have the image of all the items and all the colors, but I do not know how to implement this in the code. Can someone help me?

Answer 1

I have the following idea for your problem, but it will depend on you using some conventions: the images should all be in the same format and the images related to Coloured should be in the format name_color.extension. For example, if you are using PNG as image format, the eraser item would look borracha_azul.png. Follow the code I set for example:

Create a class ComboBoxItem. It will serve to popular combos with key/value items:

public class ComboboxItem
{
    public string Texto { get; set; }
    public object Valor { get; set; }

    public override string ToString()
    {
        return Texto;
    }
}

Populate your combos using created class objects:

ComboboxItem itemBorracha = new ComboboxItem();
itemBorracha.Texto = "Borracha";
// Utilize como valor o nome da imagem do item
itemBorracha.Valor = "borracha.png";

ComboboxItem itemBorrachaAzul = new ComboboxItem();
itemBorrachaAzul.Texto = "Azul";
// utilize como valor o nome da cor usada no nome da imagem
itemBorrachaAzul.Valor = "azul";

comboCor.Items.Add(itemBorrachaAzul);
comboItem.Items.Add(itemBorracha);

Use the event SelectedIndexChanged of the combos to change the image (if using the designer just double-click on the combo that the event is automatically created by Visual Studio):

private void comboItem_SelectedIndexChanged(object sender, EventArgs e)
{
    // recupera o item selecionado do combo de itens
    ComboboxItem itemSelecionado = (ComboboxItem)comboItem.SelectedItem;
    // a propriedade Valor é a imagem do item
    pictureBox1.Image = Image.FromFile(@"d:\img\" + itemSelecionado.Valor);
}

private void comboCor_SelectedIndexChanged(object sender, EventArgs e)
{
    // Recupera os valores dos combos
    ComboboxItem itemCor = (ComboboxItem)comboCor.SelectedItem;
    ComboboxItem item = (ComboboxItem)comboItem.SelectedItem;

    // substitui a extensão da imagem do item pelo nome da cor + extensão
    string imagem = item.Valor.ToString().Replace(".png", String.Format("_{0}.png", itemCor.Valor));
    pictureBox1.Image = Image.FromFile(@"d:\img\" + imagem);
}

In the code above, I’m assuming you’re using control PictureBoxto display the image. Replace "d:\img\" in the method parameter Image.FromFile by the correct way your images are.

Answer 2

Start by writing two classes to represent the items and each of the images (colors):

//Representa um item ex: Borracha, bola etc.
public class Item
{
    public Item()
    {
        Imagens = new List<Imagem>();
    }
    //Nome do item
    public string Nome { get; set; }

    //Lista de imagens, uma imagem por cor
    public IList<Imagem> Imagens { get; set; }
}

//Representa uma imagem
public class Imagem
{
    //Cor da imagem
    public string Cor { get; set; }

    //Path para imagem
    public string Path { get; set; }
}

In your Form put two Combobox: cbItens and cbCores.

Each created Item object will be added to Combobox cbItens.
Depending on the Item selected in cbItens the property Item.Imagens is associated with Combobox cbCores.

When a color is selected in cbCores is collected the path the image that is then associated with the Picturebox.

Implementation:

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
        cbItens.DisplayMember = "Nome";
        cbCores.DisplayMember = "Cor";
        CriarObjectos();
    }

    //Aqui são criados os objectos Item e Imagem
    private void CriarObjectos()
    {
        //Criar os objectos Imagem para o item borrachas
        //Cada imagem tem uma cor e um path

        Imagem borrachaVermelha = new Imagem();
        borrachaVermelha.Cor = "Vermelha";
        borrachaVermelha.Path = @"c:\imagens\BorrachaVermelha.jpg";

        Imagem borrachaAzul = new Imagem();
        borrachaAzul.Cor = "Azul";
        borrachaAzul.Path = @"c:\imagens\BorrachaAzul.jpg";

        Imagem borrachaAmarela = new Imagem();
        borrachaAmarela.Cor = "Amarela";
        borrachaAmarela.Path = @"c:\imagens\BorrachaAmarela.jpg";

        //Criar o item Borrachas
        Item borrachas = new Item();
        borrachas.Nome = "Borrachas";

        //Associar as imagens
        borrachas.Imagens.Add(borrachaVermelha);
        borrachas.Imagens.Add(borrachaAzul);
        borrachas.Imagens.Add(borrachaAmarela);

        //*********

        //Criar os objectos Imagem para o item bolas

        Imagem bolaVerde = new Imagem();
        bolaVerde.Cor = "Verde";
        bolaVerde.Path = @"c:\imagens\BolaVerde.jpg";

        Imagem bolaCastanha = new Imagem();
        bolaCastanha.Cor = "Castanha";
        bolaCastanha.Path = @"c:\imagens\BolaCastanha.jpg";

        Imagem bolaAmarela = new Imagem();
        bolaAmarela.Cor = "Amarela";
        bolaAmarela.Path = @"c:\imagens\BolaAmarela.jpg";

        //Criar o item bolas
        Item bolas = new Item();
        bolas.Nome = "Bolas";

        //Associar as imagens
        bolas.Imagens.Add(bolaVerde);
        bolas.Imagens.Add(bolaCastanha);
        bolas.Imagens.Add(bolaAmarela);

        //******

        //Adicionar cada Item ao cbItens
        cbItens.Items.Add(borrachas);
        cbItens.Items.Add(bolas);

        //Seleccionar o primeiro item
        cbItens.SelectedIndex = 0;
    }

    //Um item foi seleccionado
    private void cbItems_SelectedIndexChanged(object sender, EventArgs e)
    {
        //Obtém o item seleccionado
        Item items = (Item) cbItens.SelectedItem;

        //Limpar o ComboBox das cores
        cbCores.Items.Clear();
        //Preenche-lo com as imagens/cores do item seleccionado
        cbCores.Items.AddRange(items.Imagens.ToArray());
        cbCores.SelectedIndex = 0;
    }

    //Uma cor foi seleccionada
    private void cbCores_SelectedIndexChanged(object sender, EventArgs e)
    {
        //Obtém a imagem selecionada
        Imagem imagem = (Imagem) cbCores.SelectedItem;

        //Associar o path ao PictureBox
        pictureBox1.Image = imagem.Path;
    }
}