Displaying elements in a list accordingly with images from imagelist

Question

I have been working on a project which is creating a deck of cards for a windows application. So far, I was able to create a list that would hold all 52 cards. Along with that, an imagelist is used to store each card's image. The problem that I'm trying to solve is that I need to store each card's image corresponding to each element that is stored to the list. So far, the result is displayed like this:
2 of Clubs, 3 of Clubs, 4 of Clubs, 5 of Clubs, . . . Jack of Clubs, Queen of Clubs, King of Clubs, Ace of Clubs

Below is my working code:

            for (i = 0; i < 4; i++)
            {
                suit = i.ToString();

                switch (suit)
                {
                    case "0":
                        suit = "Clubs";
                        break;

                    case "1":
                        suit = "Diamonds";
                        break;

                    case "2":
                        suit = "Hearts";
                        break;

                    case "3":
                        suit = "Spades";
                        break;
                }

                for (k = 0; k < 13; k++)
                {
                    // face = k.ToString();
                    face = k.ToString();

                    switch (face)
                    {
                        case "0":
                            face = "2";
                            break;

                        case "1":
                            face = "3";
                            break;

                        case "2":
                            face = "4";
                            break;

                        case "3":
                            face = "5";
                            break;

                        case "4":
                            face = "6";
                            break;

                        case "5":
                            face = "7";
                            break;

                        case "6":
                            face = "8";
                            break;

                        case "7":
                            face = "9";
                            break;

                        case "8":
                            face = "10";
                            break;

                        case "9":
                            face = "Jack";
                            break;

                        case "10":
                            face = "Queen";
                            break;

                        case "11":
                            face = "King";
                            break;

                        case "12":
                            face = "Ace";
                            break;


                    }

                    cardDeckList.Add(new PlayingCard(suit, face, imageListCards.Images[counter], 1));
                    counter++;
                }




            }

            for (int l = 0; l < cardDeckList.Count; l++)
            {
                listBoxOutput.Items.Add(cardDeckList[l].ToString());

                pictureBox_Card1.Image = cardDeckList[l].CardImage;
            }

My goal is that I have set and upload the images in a certain order within the imagelist. Thus, I would like to store each newly created element's values such as the suit, face value, and the image correspondingly to the imagelist's list of images.

As of now, below of this contains an image of how the images are stored like in the imagelist. Furthermore, beneath of this contains my current working windows application.

Windows app
ImageList Elements
ImageList Elements no.2

Answer 1

You do not say this is a website or windows Application. I think you have a web application

this is a sample web page and i hope helping you to create your own

Web C# (Code Behind)

public partial class Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void btnload_Click(object sender, EventArgs e)
    {
        string[] suit = { "Clubs", "Diamonds", "Hearts", "Spades" };
        string face = "";
        int counter = 0;
        List<PlayingCard> cardDeckList = new List<PlayingCard>();
        for (int i = 0; i < 4; i++)
        {
            for (int k = 0; k < 13; k++)
            {
                if (k < 9)
                    face = k.ToString();
                else
                {
                    switch (k)
                    {
                        case 9:
                            face = "Jack";
                            break;

                        case 10:
                            face = "Queen";
                            break;

                        case 11:
                            face = "King";
                            break;

                        case 12:
                            face = "Ace";
                            break;
                    }
                }
                cardDeckList.Add(new PlayingCard(suit[i], face, counter));
                counter++;
            }
        }
        gvCards.DataSource = cardDeckList.ToList().OrderBy(c => c.order);
        gvCards.DataBind();
    }
}
public class PlayingCard
{
    public string suit { get; set; }
    public string face { get; set; }
    public string ImageUrl { get; set; }

    public int order { get; set; }
    public PlayingCard(string _suit, string _face, int _order)
    {
        suit = _suit;
        face = _face;
        //ImageUrl = "Url Of Images in virtual directory" 
        ImageUrl = "~/Images/" + face + "-of-" + suit;
        order = _order;
    }

}

Web Markup

<form id="form1" runat="server">
    <div> 
        <asp:Button ID="btnload" runat="server" Text="Load" OnClick="btnload_Click"  />

        <asp:GridView ID="gvCards" runat="server" AutoGenerateColumns="false"  >
            <Columns >
                <asp:BoundField DataField="suit" HeaderText="suit" />
                <asp:BoundField DataField="face" HeaderText="face" />
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Image ID="imgFace" runat="server" ImageUrl='<%#  Bind("ImageUrl") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
</form>

Windows App PlayingCard Class

  public class PlayingCard
    {
        public string suit { get; set; }
        public string face { get; set; }
        public string ImageUrl { get; set; }
        public Image pic { get; set; }
        public int order { get; set; }
        public PlayingCard(string _suit, string _face, int _order)
        {
            suit = _suit;
            face = _face;
            ImageUrl = "\\Images\\" + face + "-of-" + suit + ".png";
            order = _order;


            string _ImageUrl = Application.StartupPath + ImageUrl;
            pic = Image.FromFile(_ImageUrl);

        }

    }

Windows App button click

  private void btnLoad_Click(object sender, EventArgs e)
    {
        string[] suit = { "Clubs", "Diamonds", "Hearts", "Spades" };
        string face = "";
        int counter = 0;
        List<PlayingCard> cardDeckList = new List<PlayingCard>();
        for (int i = 0; i < 4; i++)
        {
            for (int k = 0; k < 13; k++)
            {
                if (k < 9)
                    face = (k + 1).ToString();
                else
                {
                    switch (k)
                    {
                        case 9:
                            face = "Jack";
                            break;

                        case 10:
                            face = "Queen";
                            break;

                        case 11:
                            face = "King";
                            break;

                        case 12:
                            face = "Ace";
                            break;
                    }
                }
                cardDeckList.Add(new PlayingCard(suit[i], face, counter));
                counter++;
            }
        }
        //bindGv is a bindingSource
        //in bindGv->properties->datasource  "add project datasource"
        //in "choose a datasource type" window select "Object" Next
        //in "select the datasource object" window find the "PlayingCard" class then finish
        //in gridView datasource select bindGv
        bindGv.DataSource = cardDeckList.ToList().OrderBy(c => c.order);
    }

Windows App
designer

Windows App
output