在圖像按鈕下動態添加文本

我正在從數據庫加載名稱&圖像並將其動態添加到面板控件中。我想要的是在該圖像下顯示的圖像和名稱。但名稱標籤並不完全在圖像下方。有沒有辦法添加相對於圖像按鈕的標籤？在圖像按鈕下動態添加文本

這是我的代碼加載圖像和名稱從數據庫：

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

在圖像按鈕下動態添加文本

回答

相關問題