ラベル表示にHTMLタグを使った.NETアプリケーションの作成

ComponentOne Studio 2010JのC1SuperLabelコンポーネントを使ったアプリケーションの作成

画面下部の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>タグと組み合わせて文字色の指定を作成します。

Visual Basic

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

C#

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進数表記の文字列に変換します。ただし、作成するのはここまでであとは［実行］ボタンで処理します。

Visual Basic

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

C#

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文の内容を確認できるようにして、できあがりです。

Visual Basic

    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

C#

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コンポーネントを使うことをお勧めします。

製品情報

• ComponentOne Studio