在图像按钮下动态添加文本

我正在从数据库加载名称&图像并将其动态添加到面板控件中。我想要的是在该图像下显示的图像和名称。但名称标签并不完全在图像下方。有没有办法添加相对于图像按钮的标签？在图像按钮下动态添加文本

这是我的代码加载图像和名称从数据库：

string query1 = "SELECT photo,name FROM Artist"; 
using(var conn = new SqlConnection("connectionStringHere")) 
using(SqlCommand cmd = new SqlCommand(query1, conn)) 
{ 
    conn.Open(); 
    using(SqlDataReader reader = cmd.ExecuteReader()) 
    { 
     while(reader.Read()) 
     { 
      byte[] bytes = (byte[])reader.GetValue(0); 
      string strBase64 = Convert.ToBase64String(bytes); 

      ImageButton imgButton = new ImageButton(); 
      imgButton.ImageUrl = "data:Image/png;base64," + strBase64; 
      imgButton.Width = Unit.Pixel(200); 
      imgButton.Height = Unit.Pixel(200); 
      imgButton.Style.Add("padding", "5px"); 
      imgButton.Click += new ImageClickEventHandler(imgButton_Click); 
      Panel1.Controls.Add(imgButton); 

      Label lbl = new Label(); 
      lbl.Text = reader.GetString(1); 
      lbl.CssClass = "imageLable"; // style it in your .css file 
      Panel1.Controls.Add(lbl); 
     } 
    } 
}

这是我得到显示的内容：

来源

2016-10-03 EL323

您是否尝试过创建标签字段并动态设置其文本值？ https://msdn.microsoft.com/en-us/library/system.windows.forms.label(v=vs.110).aspx – PrestonM

您是否尝试过创建新标签，并将其设置为名称值以及将图像按钮添加到面板后？ –

您的ADO.NET代码中存在一些不好的做法。

始终将实现IDisposable的所有内容都包装在使用块中。
范围连接到它们所用的方法。Sql Server将处理连接池，因此使用它并进行处理，不要重复使用它。

虽然您的问题的解决方案是添加一个新的标签到面板，然后按照您认为合适的方式进行设计。

string query1 = "SELECT photo,name FROM Artist"; 
using(var conn = new SqlConnection("connectionStringHere")) 
using(SqlCommand cmd = new SqlCommand(query1, conn)) 
{ 
    conn.Open(); 
    using(SqlDataReader reader = cmd.ExecuteReader()) 
    { 
     while(reader.Read()) 
     { 
      byte[] bytes = (byte[])reader.GetValue(0); 
      string strBase64 = Convert.ToBase64String(bytes); 

      ImageButton imgButton = new ImageButton(); 
      imgButton.ImageUrl = "data:Image/png;base64," + strBase64; 
      imgButton.Width = Unit.Pixel(200); 
      imgButton.Height = Unit.Pixel(200); 
      imgButton.Style.Add("padding", "5px"); 
      imgButton.Click += new ImageClickEventHandler(imgButton_Click); 
      Panel1.Controls.Add(imgButton); 

      Label lbl = new Label(); 
      lbl.Text = reader.GetString(1); // use GetString, not GetValue here 
      lbl.CssClass = "imageLable"; // style it in your .css file 
      Panel1.Controls.Add(lbl); 
     } 
    } 
}

来源

2016-10-03 19:48:49 Igor

问题是我正在连续加载多个图像。所以标签并不是完全显示在图像按钮下方。有没有办法根据图像按钮调整标签？我会更新这个问题并添加一个更清晰的屏幕截图。 – EL323

@ EL323 - 它依赖于HTML。你可以将ImageButton和Label包装在一个'div'中，然后编写一个小小的CSS来将标签放在ImageButton的下面和中间。这取决于你希望如何构建它，但有很多方法可以做到。 – Igor

好的。谢谢。我会尝试。我对CSS不太舒服。 – EL323

你只需要像按钮下方添加一个标签：

string query1 = "SELECT photo, name FROM Artist"; 
SqlCommand cmd = new SqlCommand(query1, conn); 
conn.Open(); 
SqlDataReader reader = cmd.ExecuteReader(); 

while(reader.Read()) 
{ 
    byte[] bytes = (byte[])reader.GetValue(0); 
    string strBase64 = Convert.ToBase64String(bytes); 

    ImageButton imgButton = new ImageButton(); 
    imgButton.ImageUrl = "data:Image/png;base64," + strBase64; 
    imgButton.Width = Unit.Pixel(200); 
    imgButton.Height = Unit.Pixel(200); 
    imgButton.Style.Add("padding", "5px"); 
    imgButton.Click += new ImageClickEventHandler(imgButton_Click); 
    Panel1.Controls.Add(imgButton); 

    Label lbl = new Label(); 
    lbl.Text = reader.GetValue(1); 
    // TODO: add styling and sizing parameters here 
    Panel1.Controls.Add(lbl); 
}

您将不得不添加样式到该标签，因为它不是图像按钮的一部分，它不会是一个链接。如果您希望它是可点击的，则应将ImageButton更改为Link，然后在Link控件内添加Image和Label。

来源

2016-10-03 19:34:10

在图像按钮下动态添加文本

回答

相关问题