The following topics explain how to create C1SuperLabels at design time using the C1SuperLabel Editor and programmatically in code, as well as how to add images labels.

You can create SuperLabels both at design time as well as via code.

Creating C1SuperLabels at Design Time

SuperTooltip for WinForms provides a design-time editor, the C1SuperLabel Editor, to simplify the process of creating labels in your applications. This topic will show you how to create labels and change their appearance and behavior using this editor. The C1SuperLabel component is very similar to the Label control, except it can display HTML content instead of just plain text. You can display an HTML page including tables, images, lists or pre-formatted text, for example, right within the label.

To add C1SuperLabel to your application:

1. Double-click the C1SuperLabel component in the Toolbox to add it to your form.
2. Click the ellipsis button next to the Text property. The C1SuperLabel Editor appears.
3. Enter your HTML code.
4. Run the application and the rendered HTML appears within the C1SuperLabel.
   

Creating a C1SuperLabel Programmatically

You can specify the C1SuperLabel text and associate it with a control using the Text property. All you need to do is add the text as a string. You can add plain text or HTML code.

To create a C1SuperLabel programmatically:

1. Add a C1SuperLabel to your form.
2. Add the following code to the Form_Load event. It adds a table containing two rows with two graphics and some text in the label:

   To write code in Visual Basic

   Visual Basic

   コードのコピー

   'C1SuperLabel に ２ 行 を 追加       C1SuperLabel1.Text = _         "<table>" + _          "<tr>" + _           "<td><img src='search.png'>" + _           "<td>This is the second cell in the top row" + _          "<tr>" + _           "<td><img src='up.png'>" + _           "<td>This is the second cell in the bottom row." + _         "</table>" ' コンテンツ が すべて 表示される よう に ラベル のサイズ を 自動的 に 調整 C1SuperLabel1.AutoSize = True

   To write code in C#

   C#

   コードのコピー

   // C1SuperLabel に ２ 行 を 追加       c1SuperLabel1.Text =         "<table>" +          "<tr>" +           "<td><img src='search.png'>" +           "<td>This is the second cell in the top row" +          "<tr>" +           "<td><img src='up.png'>" +           "<td>This is the second cell in the bottom row." +         "</table>"; // コンテンツ が すべて 表示される よう に ラベル のサイズ を 自動的 に 調整 c1SuperLabel1.AutoSize = true;

3. Run your project. The code creates a C1SuperLabel like the following:
    

Adding Images

SuperTooltip for WinForms supports adding images, including animated images, at design time. First, add the image to the C1SuperTooltip Image collection, and then specify the image in the C1SuperTooltip Editor.

1. Add a C1SuperLabel control to your form.
2. Select the C1SuperLabel control and click the ellipsis button next to the Images property in the Properties window. The Edit Image Collection editor appears.
   
3. Click the Add button and browse to find the image you want to use.
4. Select the image and click Open. The image is added to the ToolTip's image collection.
5. Click OK to close the Edit Image Collection editor.
6. Click the ellipsis button next to the Text property.

When you enter your HTML code, the image you added to the label's image collection can be referenced in the code like this:

<img src= "res://mybitmap.png" />

1. Declare C1SuperLabel object.

   C#	コードのコピー
   C1SuperLabel superLabel;

2. Add images and text using the Image and Text property.

   C#

   コードのコピー

   private void Form1_Load(object sender, EventArgs e) { FormBorderStyle = FormBorderStyle.FixedSingle; // プログラムによる SuperLabel を作成 superLabel = new C1SuperLabel(); // 画像を追加 superLabel.Images.Add(new ImageEntry("SearchIcon", SuperLabelResource.SearchIcon)); superLabel.Images.Add(new ImageEntry("UploadIcon", SuperLabelResource.UploadIcon)); superLabel.Text = "<table>" + "<tr>" + "<td>< img src = 'res://icons8-search-24.png' >" + "<td>This is the second cell in the top row" + "<tr>" + "<td><img src='res://icons8-upload-mail-50.png' height='20' width='20'>" + "<td>This is the second cell in the bottom row." + "</table>"; superLabel.AutoSize = true; this.Controls.Add(superLabel); }

3. Run the code and observe the Super labels.