Dynamically button add picture and text C#

Sign in to answer this question.

• 

  Tuhin Paul2y agoPosted Mar 28, 2024, 2:59 AM

  Accepted answer

  Use a TableLayoutPanel to organize the controls inside the button.

  private void TopliNapitciButton_Click(object sender, EventArgs e)
  {
      panel1.Controls.Clear();
  
      string conString = ConnectionClass.PullData(labelgodina.Text);
      SqlConnection con = new SqlConnection(conString);
      SqlCommand cmd = new SqlCommand("SELECT naziv, FORMAT(cijena_sa_porezom, 'N2') AS cijena, data FROM dbo.roba_usluge where grupa_artikala='Napitci' and status='Aktivan'", con);
  
      var da = new SqlDataAdapter(cmd);
      var ItemTable = new DataTable();
      da.Fill(ItemTable);
  
      con.Open();
      Int32 count = ItemTable.Rows.Count;
      con.Close();
  
      int top = 5;
      int left = 5;
      for (int i = 0; i < count; i++)
      {
          Button button = new Button();
          button.Size = new Size(128, 128);
          button.BackColor = Color.Transparent;
          button.FlatAppearance.BorderSize = 0;
          button.Font = new System.Drawing.Font("Trebuchet MS", 10);
          button.TextAlign = ContentAlignment.BottomCenter;
          button.BackgroundImageLayout = ImageLayout.Zoom;
          
          // Create TableLayoutPanel
          TableLayoutPanel table = new TableLayoutPanel();
          table.Dock = DockStyle.Fill;
          table.RowCount = 3;
          table.RowStyles.Add(new RowStyle(SizeType.Percent, 70F));
          table.RowStyles.Add(new RowStyle(SizeType.Percent, 15F));
          table.RowStyles.Add(new RowStyle(SizeType.Percent, 15F));
  
          // Image
          PictureBox pictureBox = new PictureBox();
          pictureBox.Dock = DockStyle.Fill;
          pictureBox.SizeMode = PictureBoxSizeMode.StretchImage;
          if (ItemTable.Rows[i]["data"] != DBNull.Value)
          {
              byte[] _byte = (byte[])ItemTable.Rows[i]["data"];
              MemoryStream ms = new MemoryStream(_byte);
              pictureBox.Image = Image.FromStream(ms);
          }
          
          // Label for name
          Label nameLabel = new Label();
          nameLabel.Dock = DockStyle.Fill;
          nameLabel.TextAlign = ContentAlignment.MiddleCenter;
          nameLabel.Text = ItemTable.Rows[i]["naziv"].ToString();
  
          // Label for price
          Label priceLabel = new Label();
          priceLabel.Dock = DockStyle.Fill;
          priceLabel.TextAlign = ContentAlignment.MiddleCenter;
          priceLabel.Text = "Price: " + ItemTable.Rows[i]["cijena"].ToString();
  
          // Add controls to TableLayoutPanel
          table.Controls.Add(pictureBox, 0, 0);
          table.Controls.Add(nameLabel, 0, 1);
          table.Controls.Add(priceLabel, 0, 2);
  
          // Add TableLayoutPanel to button
          button.Controls.Add(table);
  
          button.Click += new EventHandler(this.btn_Click);
  
          panel1.Controls.Add(button);
  
          if ((i + 1) % 4 == 0)
          {
              left = 5;
              top += button.Height + 2;
          }
          else
          {
              left += button.Width + 2;
          }
      }
  }
  

  • Created a TableLayoutPanel within each button to organize the image and labels.
  • Each Button now contains a TableLayoutPanel, which holds a PictureBox for the image and two Label controls for the name and price.
• 

  Jayraj Chhaya2y agoPosted Mar 28, 2024, 6:45 AM

  Hi,

  To set a smaller size image in a button in C#, you can use the BackgroundImageLayout property of the button control. By setting the BackgroundImageLayout property to ImageLayout.Zoom, the image will be automatically resized to fit the button while maintaining its aspect ratio.

  Here's an example of how you can modify your code to set a smaller size image in the button:

  Button button = new Button();
  button.Size = new Size(128, 128);
  button.BackColor = Color.Transparent;
  button.FlatAppearance.BorderSize = 0;
  button.Font = new System.Drawing.Font("Trebuchet MS", 10);
  button.TextAlign = ContentAlignment.BottomCenter;
  button.BackgroundImageLayout = ImageLayout.Zoom; // Set the BackgroundImageLayout property to Zoom
  
  // Rest of your code...
  
  if (ItemTable.Rows[i - 1][1] != null)
  {
      try
      {
          byte[] _byte = (byte[])ItemTable.Rows[i - 1][1];
          MemoryStream ms = new MemoryStream(_byte);
          button.BackgroundImage = System.Drawing.Image.FromStream(ms);
      }
      catch { }
  }
  
  // Rest of your code...
  

  By setting the BackgroundImageLayout property to ImageLayout.Zoom, the image will be resized to fit the button while maintaining its aspect ratio. This ensures that the image is displayed in a smaller size without distorting its proportions.