SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ComponentOne)

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

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

C1SuperLabelのデザイン時の設定

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

 このエディタは、プレビュー機能を持ったエディタで、左側のペインにHTML文を入力すると、その結果が右側に表示されます。ここに、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>";
}

次のページ
C1SuperTooltipコンポーネントの文字列の設定

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ComponentZine(ComponentOne)連載記事一覧

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/1650 2008/06/24 15:08

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング