はじめに
入力コントロールの見出しや入力データの表示などに普段使用している標準コントロール「Label」は、せいぜい文字色や背景色を変える程度しか装飾できません。しかし、このLabelコントロールをもっと華麗に装飾できれば、プログラムの表現力もぐっと向上するはずです。
SuperToolTip for Windows Formsの「C1SuperLabel」コンポーネントは、データの表示にHTMLタグを使用できるコントロールです。文字の装飾だけでなく、テーブルや箇条書きの番号・記号、画像など、HTMLページとほぼ同様の内容を表示する機能を備えています。
今回は、このSuperToolTip for Windows FormsのC1SuperLabelコンポーネントを使い、装飾を施したラベルを表示するとともに、テキストボックスに入力した文字列をHTMLタグで装飾してコンポーネントで表示するアプリケーションを作成してみました。
対象読者
Visual Basic／Visual C# 2005,2008を使ってプログラムを作ったことのある人
必要な環境
Visual Basic 2005／2008、Visual C# 2005／2008、Visual Studio 2005／2008でプログラムが作れる環境。なお、本プログラムはWindows Vista上で動作するVisual Studio 2008を使用して作成し、動作確認を行っています。
プログラム実行時の注意事項
SuperToolTip for Windows Formsを使って作成したアプリケーションを配布する場合、SuperToolTip for Windows Formsのアセンブリファイルを添付する必要があります。アプリケーションを正常に動作させるためには、次のファイルをインストールしてください。
| ファイル | 内容 |
|---|---|
| C1.Win.C1SuperTooltip.2.dll | C1SuperTooltip コントロール（Visual Studio 2005／2008 用） |
このファイルを、プログラムを実行するフォルダへフォルダ構成を変えずに格納します。
コンポーネントのインストール
はじめてSuperToolTip for Windows Formsコンポーネントを使用する方は、Visual Studio、Visual Basic、Visual C#の開発環境に、ComponentOne Studio Enterprise 2010Jをインストールする必要があります。
インストーラは、グレープシティのWebページからダウンロードできます。製品ページの［申込フォーム］をクリックし、グレープシティのWebサイトへ必要情報を登録すると、添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきますので、ここからダウンロードします。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。
コントロールの追加
ComponentOne Studio Enterprise 2010Jをインストールしたら、ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。追加するコンポーネントは、アセンブリ名が「C1.Win.C1SuperTooltip.2」の「C1SuperLabel」コントロールです。
C1SuperLabelコンポーネントについて
SuperToolTip for Windows Formsは、C1SuperLabelとC1SuperTooltipの2つのコンポーネントを持つライブラリです。
C1SuperLabelは標準のLabelコントロールに似ていますが、プレーンなテキストだけでなくHTMLタグで記述されたコンテンツを表示できるため、作成するアプリケーションの見た目をぐっと良くすることができます。
また、すべてC#で記述された独自の軽量HTMLパーサー、およびレンダラーを備えているので、Internet Explorerを使用せずにHTMLコンテンツを表示します。
SuperToolTip for .NETの機能
C1SuperLabelとC1SuperTooltipコンポーネントでは、プレーンテキスト以外に次の項目を作成できます。
- ネストされた<div>要素
- <span>タグを使用した異なるフォントおよびテキスト色
- <pre>タグを使用した書式設定済みテキスト
- 段落の配置
- テーブルの書式設定、テーブルのネスト、行および列の結合
- リストのネスト、箇条書きリスト、番号付きリスト
- アプリケーションリソースから読み込んだ画像
- カスケードスタイルシート（<style>タグ）
サポートしないタグ一覧
C1SuperTooltipとC1SuperLabelコンポーネントでサポートされないタグは、次のとおりです。
| <APPLET> | <area> | <base> |
| <basefont> | <bdo> | <button> |
| <caption> | <colgroup> | <fieldset> |
| <form> | <frameset> | <head> |
| <HTML> | <iframe> | <input> |
| <isindex> | <label> | <legend> |
| <map> | <noframes> | <noscript> |
| <object> | <optgroup> | <option> |
| <param> | <select> | <sub> |
| <sup> | <thead> | <tfoot> |
| <tbody> | <textarea> | <th> |
| <title> |
確認したHTMLのバージョンは4.01（HTML4.01仕様）です。これ以外のバージョンはサポート対象となりませんので、注意してください。
C1SuperLabelコンポーネントへのHTMLコンテンツの設定方法
C1SuperTooltipとC1SuperLabelコンポーネントにHTMLコンテンツを設定するには、それぞれ専用のエディタを使用します。
今回利用するC1SuperLabelコンポーネントの場合、スマートタグまたはプロパティウィンドウでTextプロパティをクリックすると、「C1SuperLabelエディタ」が起動します。このエディタの左側のペインに、HTML書式のデータを記述します。
直接入力してもかまいませんし、HTMLエディタで作成したHTML文をコピー＆ペーストすることもできます。HTMLエディタを使った方が、完成後のイメージを確認しながら作成できるので便利だと思います。
今回のプログラムでは、HTMLエディタでコンテンツを作成し、HTML文をペーストしました。なお、HTMLエディタからペーストする際は、すべてのHTML文字列を1行にまとめる必要があります。途中で改行が入ってしまうと、そこでペースト文字列が途切れてしまうため、注意が必要です。
使用可能な画像フォーマット
C1SuperTooltip／C1SuperLabelコンポーネントどちらも、次のフォーマットの画像を挿入できます。
| フォーマット | ファイルの拡張子 |
|---|---|
| ビットマップ | bmp |
| DIビットマップ | dib |
| アイコン | ico |
| カーソル | cur |
| GIF（アニメーションGIFは非対応） | gif |
| JPEG | jpg |
| Windowsメタファイル | wmf |
| エンハンスドメタファイル | emf |
| Portable Network Graphics | png |
プログラムの作成
では、さっそくフォームをデザインしていきます。今回のプログラムでは、C1SuperLabelコンポーネントでテーブルと画像を表示させます。
また、TextBoxコントロールに入力された文字列をHTMLタグ付きの文字列に加工し、C1SuperLabelコンポーネントで表示する機能も持たせます。加工されたHTML文は、標準コントロールのLabelコントロールを使って表示します。
HTML化の処理は、文字色の設定とマーカーの付加です。文字色の設定には、色のダイアログボックスを使います。
フォームのデザイン
フォームは、次のように作成します。色のダイアログボックスを表示する2つのボタンには、画像ファイル「ColorHS.png」を設定しています。
画面上部のC1SuperLabelコンポーネントの設定
画面上部のC1SuperLabelコンポーネントには、テーブルと装飾したテキスト、GIFフォーマットの画像を表示します。
C1SuperLabelエディタに入力したHTML文は次のとおりです。下のコードは、HTMLの設定が分かるように改行とインデントを付けていますが、実際にC1SuperLabelコンポーネントに設定する際は1行の文字列にしておきます。
<p><font color="#800080">これは、HTMLで装飾したデータです。</font></p> <p><span style="background-color: #FFFF00">おでんの具ベスト３</span></p> <table border="0" width="223" height="89"> <tr> <td width="107" height="83"> <table border="1" width="107"> <table border="1" width="107"> <tr> <td width="13" bgcolor="#00FFFF">1</td> <td width="79" bgcolor="#00FFFF">たまご</td> </tr> <tr> <td width="13" bgcolor="#008080"> <font color="#FFFFFF">2</font> </td> <td width="79" bgcolor="#008080"> <font color="#FFFFFF">はんぺん</font> </td> </tr> <tr> <td width="13" bgcolor="#0000FF"> <font color="#FFFF00">3</font> </td> <td width="79" bgcolor="#0000FF"> <font color="#FFFF00">ちくわ</font> </td> </tr> </table> </td> <td width="100" height="83"> <img border="0" src="nabe.GIF" width="88" height="74"> </td> </tr> </table> <br>
テーブルのネストで、データのリスト表示と画像「nabe.GIF」を並べて表示しています。このGIFファイルは、プログラムの実行ファイルと同一フォルダ内に格納しています（※注）。
C1SuperLabelエディタ上では、GIF画像が表示されないので注意してください。
画面下部のC1SuperLabelコンポーネントの処理
画面下部のC1SuperLabelコンポーネントでは、［実行］ボタンを押すと、TextBoxコントロールに入力された文字列をHTML文に加工し、C1SuperLabelコンポーネントで表示します。
C1SuperLabelコンポーネントには、あらかじめフォーム表示時に「ここにHTMLで装飾された文字が表示されます。」という文字をHTMLで装飾して表示するように、TextプロパティにHTMLタグ付きの文字列を設定しておきます。
<br><p align="center"><b><font color="#FF00FF">ここにHTMLで装飾された文字が表示されます。</font></b><br><p align="center"><b>
文字色を設定するボタンの処理
最初に、文字色を設定するボタンの処理を作成します。ボタン押下時に、テキストボックスに入力された文字に色を設定するダイアログボックスを表示し、設定完了後、HTML文を自動生成するようにします。
ColorDialogコントロールは、ユーザーが選んだ色をColor構造体のメンバで返します。しかし、HTMLには<font color="#800080">のように色を16進数の文字列で設定する必要があります。そのため、ColorTranslatorクラスの「ToHtml」メソッドを利用します。「ToHtml」メソッドは、指定したColor構造体をHTMLカラーの文字列形式に変換してくれるメソッドです。これを使って16進数の文字列表記に変換し、<font>タグと組み合わせて文字色の指定を作成します。
Public Class Form1
Private ccolor As String
Private marker As String
Private str_html As String
Private marker_col As String = "#FFFF00"
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
Me.ColorDialog1.ShowDialog()
Me.Label1.BackColor = Me.ColorDialog1.Color
ccolor = ColorTranslator.ToHtml(Me.ColorDialog1.Color)
ccolor = "<font color='" + ccolor + " '" + ">"
End Sub
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private string ccolor, marker, str_html;
private string marker_col= "#FFFF00";
private void button1_Click(object sender, EventArgs e)
{
colorDialog1.ShowDialog();
label1.BackColor = colorDialog1.Color;
ccolor = ColorTranslator.ToHtml(colorDialog1.Color);
ccolor = "<font color='" + ccolor + " '" + ">";
}
マーカー色を設定するボタンの処理
マーカー色を設定するボタンの処理も同様で、色のダイアログボックスを表示して選択してもらったColor構造体のメンバを、16進数表記の文字列に変換します。ただし、作成するのはここまでであとは［実行］ボタンで処理します。
Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
Me.ColorDialog1.ShowDialog()
Me.Label2.BackColor = Me.ColorDialog1.Color
marker_col = ccolor = ColorTranslator.ToHtml(Me.ColorDialog1.Color)
End Sub
private void button2_Click(object sender, EventArgs e)
{
colorDialog1.ShowDialog();
label2.BackColor = colorDialog1.Color;
marker_col = ColorTranslator.ToHtml(colorDialog1.Color);
}
［実行］ボタンの処理
このボタンで、最終的にHTML文を作成し、画面下部のC1SuperLabelコンポーネントに設定します。
まず、CheckBoxコントロールがチェックされているかどうかを調べ、チェックされていればマーカー色を設定するボタンの処理で取得した色情報の16進数表記を使って、<span style="background-color: #FFFF00">というHTMLタグを生成します。
そして、TextBoxコントロールの入力文字列と文字色の設定を行うHTML文をすべて結合し、1行のHTML文にして2番目のC1SuperLabelコンポーネントのTextプロパティに設定します。
あわせて、同じHTML文をLabelコントロールにも出力し、作成したHTML文の内容を確認できるようにして、できあがりです。
Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button3.Click
If Me.CheckBox1.Checked Then
marker = "<span style='background-color:" + marker_col + "'>"
Else
marker = ""
End If
str_html = "<p>" + marker + ccolor + Me.TextBox1.Text + "</font></span></p>"
Me.C1SuperLabel2.Text = str_html
Me.Label3.Text = str_html
End Sub
End Class
private void button3_Click(object sender, EventArgs e)
{
if(checkBox1.Checked){
marker = "<span style='background-color:" + marker_col + "'>";
}else{
marker = "";
}
str_html = "<p>" + marker + ccolor + textBox1.Text + "</font></span></p>";
c1SuperLabel2.Text = str_html;
label3.Text = str_html;
}
まとめ
たかがラベルと言えども、HTMLタグを使ってWebページのようなデザイン／レイアウトができれば、フォームの可読性や作業効率が大きく改善します。
デザインの自由度が高くなり、ビジュアル面でも各段に向上するので、LabelやPictureBoxなどを使ったフォームのデザインに苦労した経験があれば、ぜひC1SuperLabelコンポーネントを使うことをお勧めします。
製品情報
