カラフルなラベルとツールチップを持った.NETアプリケーションを作る

SuperToolTip for .NETコンポーネントでHTMLコンテンツをプログラムに使用する

C1SuperLabelコンポーネントの文字列の設定

　C1SuperLabel・C1SuperTooltipコンポーネントは、表示する文字の初期設定を専用のエディタを使用して作成します。

C1SuperLabelのデザイン時の設定

　C1SuperLabelコンポーネントのタスクメニューから「ラベルの編集」を選ぶと、エディタが起動します。

　このエディタは、プレビュー機能を持ったエディタで、左側のペインにHTML文を入力すると、その結果が右側に表示されます。ここに、HTMLタグ付きの文字列を記述して、ラベルの表示内容を作成します。

「ラベルの編集」を選ぶ

HTMLタグ付きの文字列を記述していく

　ここでは、以下のようなHTML文を作成してみました。こうすると、文字単位でフォントや文字色を変えることができたり、ラベルの中にテーブルを組み込みテーブルを装飾したりすることができ、Webページと同じようにラベルを編集することができます。

<p align="center">
  <strong>
    <font size="5">あらかじめ
      <font color="#ff0080">エディタ</font>で
      <font color="#800080">HTMLタグ</font>付きの<br>
      文字を作成する
    </font>
  </strong>
</p>
<table cellspacing="0" cellpadding="0" width="168" border="1" 
       style="width: 168px; height: 62px" align="center">
  <tr>
    <td bgcolor="#00ffff">　テーブルの</td>
  </tr>
  <tr>
    <td bgcolor="#ffff00">　挿入も</td>
  </tr>
  <tr>
    <td bgcolor="#ff80c0">　可能</td>
  </tr>
</table>

ヒント

　いちいちHTMLタグを記述するのは大変ですから、タグを自動生成してくれるHTMLエディタでラベルに表示するコンテンツを作成し、そのHTML文をこのエディタにコピー＆ペーストすると、開発の手間をかなり省略することができます。

コードから文字列を設定する

　このプログラムでは、C1SuperLabelコンポーネントをクリックすると、表示しているコンテンツを入れ替えるようにしていますが、これはコンポーネントのTextプロパティにHTMLタグ付きの文字列を設定します。

　このとき、<img style="width: 140px; height: 150px" >とタグ内で""記号を使う場合、Visual Basicでは<img style=""width: 140px; height: 150px"" >」と「"」を2つ使い、「""""」のように記述します。

　C#では<img style='width: 140px; height: 150px' >と「'」を使用します。

Visual Basic

Public flag As Boolean = False
Private Sub C1SuperLabel1_Click(ByVal sender As System.Object, _
                                ByVal e As System.EventArgs) _
                                   Handles C1SuperLabel1.Click
  '画像ファイルsample.jpgをexeファイルと同じフォルダにおいておくこと

  If flag = False Then
    Me.C1SuperLabel1.Text = _
     "<p><table style=""width: 350px; height: 200px""" & _
      "cellspacing=""0"" cellpadding=""0"" width=""350""" & _
      " border=""1"">" & _
     "<tr><td><img style=""width: 140px; height: 150px""" & _
      " height=""320""" & _
      "alt="""" src=""sample.jpg"" width=""240"" border=""0"" >" & _
      "</td>" & _
      "<td>フレームを使って編集することもできる　</td></tr>" & _
      "</table></p>"
    flag = True
  Else
    Me.C1SuperLabel1.Text = _
     "<p align=""center""><strong><font size=""5"">あらかじめ" & _
     "<font color=""#ff0080"">エディタ</font>で" & _
     "<font color=""#800080"">HTMLタグ</font>付きの<br>" & _
     "文字を作成する<br><br><table cellspacing=""0""" & _
     "cellpadding=""0"" width=""168"" border=""1"" style=""width:" & _
     "168px; height: 62px"" align=""center""><tr>" & _
     "<td bgcolor=""#00ffff"">" & _
     "テーブルの</td></tr>" & _
     "<tr><td bgcolor=""#ffff00"">　挿入も</td>" & _
     "</tr><tr><td bgcolor=""#ff80c0"">　可能</td></tr></table>" & _
     "</font></strong></p>"
    flag = False
  End If
End Sub

C#

Boolean flag = false;
private void C1SuperLabel1_Click(object sender, EventArgs e)
{
  // 画像ファイルsample.jpgをexeファイルと同じフォルダにおいておくこと

  if( flag == false){
    C1SuperLabel1.Text
      = "<p><table style='width: 350px; height: 200px'"
      + "cellspacing='0' cellpadding='0' width='350' border='1'>" 
      + "<tr><td>"
      + "<img style='width: 140px; height: 150px' height='320'" 
      + "alt='' src='sample.jpg' width='240' border='0' ></td>" 
      + "<td>フレームを使って編集することもできる　</td></tr>" 
      + "</table></p>";
    flag = true;
  }else{
    C1SuperLabel1.Text
      = "<p align='center'><strong><font size='5'>あらかじめ" 
      + "<font color='#ff0080'>エディタ</font>で" 
      + "<font color='#800080'>HTMLタグ</font>付きの<br>" 
      + "文字を作成する<br><br><table cellspacing='0'" 
      + "cellpadding='0' width='168' border='1' style='width:" 
      + "168px; height: 62px' align='center'>"
      + "<tr><td bgcolor='#00ffff'>" 
      + "テーブルの</td></tr><tr><td bgcolor='#ffff00'>　挿入も</td>" 
      + "</tr><tr><td bgcolor='#ff80c0'>　可能</td></tr></table>" 
      + "</font></strong></p>";
    flag = false;
  }
}

Form2でのC1SuperLabelコンポーネントの文字列設定

　Form2のC1SuperLabelコンポーネントでは、TextBoxに入力された文字列からHTML文を作成し、C1SuperLabelコンポーネントのTextプロパティに設定しています。これは、通常の文字列連結演算子を使用してHTML文を作成します。

Visual Basic

Private Sub Button1_Click(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles Button1.Click
  Me.C1SuperLabel2.Text = _
   "<p align=""center""><font size=""5""><font color=""#35ca57"">" & _
                            Me.TextBox1.Text & _
                            "</font>-<font color=""#fb0467"" > " & _
                            Me.TextBox2.Text & _
                            "</font>-<font color=""#8000ff"" > " & _
                            Me.TextBox3.Text & _
                            "</font></font></p>"
End Sub

C#

private void Button1_Click(object sender, EventArgs e)
{
  C1SuperLabel2.Text
   = "<p align='center'><font size='5'><font color='#35ca57'>" 
                       + TextBox1.Text 
                       + "</font>-<font color='#fb0467' > "
                       + TextBox2.Text
                       + "</font>-<font color='#8000ff' > "
                       + TextBox3.Text + "</font></font></p>";
}