はじめに
Webページ内に他のWebページやHTMLドキュメントを表示するには、フレームやIFrameタグなどを使用する方法がありますが、ComponentOne Studio for Silverlightに収録されているC1HtmlHostコントロールを使用すると、Silverlightページ上に複数のHTMLコンテンツを表示できます。C1HtmlHostコントロールを他のコントロールから操作して、表示されるコンテンツの切替なども可能です。また、C1HtmlHostコントロールは指定したURLのWebを表示させるだけでなく、HTML文字列から直接Webページを表示する機能も持っています。
今回は、このC1HtmlHostコントロールを使って、リストボックスで選択したWebページを表示するとともに、XAMLコードからHTMLを表示するWebページを作成してみました。
対象読者
Visual Basic/Visual C# 2008を使ってプログラムを作ったことのある人。また、SilverlightおよびXAMLに対する基礎的な知識が必要になります。
必要な環境
Visual Basic 2008、Visual C# 2008、Visual Studio 2008でプログラムが作れる環境。また、Visual Studio 2008 Silverlight Tools 3.0をインストールしていることが必須条件です。
なお、本プログラムはWindows Vista上で動作するVisual Studio 2008およびVisual Studio 2008 Silverlight Tools 3.0を使用して作成し、Internet Explorer 8で動作確認を行っています。
サンプルソースを実行するには、C#、VBともに次の設定を行う必要があるため、注意してください（※○○にはcsまたはvbのいずれかが入ります）。
（sll_htmlhost_○○.Web.Web）を右クリックし、
［スタートアッププロジェクトに設定］を選択
右クリックし、［スタートページに設定］を選択
- ソリューションエクスプローラでASP.NET Webサイトプロジェクト
- ソリューションエクスプローラでsll_htmlhost_○○TestPage.aspxを
コンポーネントのインストール
ComponentOne Studio for Silverlightを使用する方は、Visual Studio、Visual Basic、Visual C#の開発環境にComponentOne Studio Enterpriseをインストールする必要があります。
インストーラは、グレープシティのWebページからダウンロードできます。製品ページの［申込フォーム］をクリックし、グレープシティのWebサイトへ必要情報を登録すると、添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきますので、ここからダウンロードします。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。
C1HtmlHostコントロールについて
C1HtmlHostコントロールを使用すると、HTMLのIFrameタグのようにSilverlightページ上にHTMLコンテンツを表示できます。また、このコントロールはページ上にいくつも配置でき、Silverlightページ上に、Gridコントロールなどで複数のHTMLコンテンツを配置することが可能です。
HTMLコンテンツの表示方法は2つあります。1つはSourceUriプロパティを使用して、コントロール内に表示するHTMLコンテンツのURLを指定する方法で、既にあるWebページのコンテンツを表示する場合に使用します。この場合は、SourceUriプロパティに表示したいWebページの絶対URLを指定します。
もう1つの方法は、SourceHtmlプロパティを使用して、コントロール内にHTML文字列を使って表示する方法です。この方法を使うと、プログラムでHTMLコードを作成してコンテンツを表示できます。
SourceHtmlプロパティにHTMLコードを設定するには
SourceHtmlプロパティにHTMLコードを設定するためには、ちょっと工夫が必要になります。それは、タグの<>記号や""記号です。HTMLコードを記述するにはHTMLタグが必須ですが、そのままXAMLファイルに記述するとエラーになってしまいます。
<c1ext:C1HtmlHost SourceHtml="<table border="0"><tr><td><font color="#FF80C0">
このコーナーは、私が作成したフリーソフトをダウンロードする
コーナーです。</font></td>" />
そのため、<>記号を次のように既定のエスケープ文字列に変え、""は''（シングルクォーテーション）に変えて記述します。
| 直接記述できない文字 | エスケープされた文字 |
| < | < |
| > | > |
| " | ' |
この記号を使ってHTMLコードを修正すると次のようになります。
<c1ext:C1HtmlHost SourceHtml="<table border='1'><tr><td>
<font color='#FF80C0'>このコーナーは、私が作成した
フリーソフトをダウンロードするコーナーです。</font>
</td>" />
記号が文字になったので少し見づらくなりますが、使用する記号はこれぐらいなので慣れればすぐに使いこなせるようになります。
Windowlessプロパティを「True」に設定する
C1HtmlHostコントロールを使ってSilverlightプラグイン内にHTMLコンテンツを表示するには、プラグインのWindowlessプロパティを「True」に設定する必要があります。この処理を行っておかないと、アプリケーション実行時にこのプロパティに関するエラーメッセージが表示されます。
ただし、コントロールがプラグインのプロパティを変更することはできないため、ページの作成者があらかじめWindowlessプロパティを「True」に設定しておきます。Windowlessプロパティは、プロジェクトにある「xxxTestPage.aspx」ファイル（xxxはアプリケーション名）に追加します。
ソリューションエクスプローラでこのファイル名をダブルクリックして開きます。
［ソース］タブをクリックするとコードが表示されます。
<body>セクションにある<param>セクションに、次のプロパティ設定を追加します。
<param name="Windowless" value="true" />
これで、Silverlightページ内に他のHTMLドキュメントを表示できるようになります。
Webページの作成
では、Webページを作成してみましょう。グリッドは1行2列に設定します。左側のグリッドにC1HtmlHostコントロールを2つ配置し、右側のグリッドにC1HtmlHostコントロールとListBoxコントロールを配置します。
Silverlightプロジェクトの作成
まず、Silverlightプロジェクトを作成します。Visual Studioで新しいプロジェクトを作成すると、［プロジェクトの種類］に［Silverlight］が追加されています。これを選んで［テンプレート］から［Silverlightアプリケーション］を選択します。
［新しいSilverlightアプリケーション］というダイアログボックスが表示されるので、［新しいWebプロジェクトの種類］でリストから［ASP.NET Webサイト］を選びます。
プロジェクトが作成され、新しいWebサイトに「MainPage.xaml」が作られてXAMLのコードが表示されます。
C1HtmlHostコントロールの作成
次に、1行2列のグリッドを作成し、左側のグリッドにStackPanelコントロールを組み込み、その中にC1HtmlHostコントロールを配置します。
左側のグリッドにC1HtmlHostコントロールをレイアウトする
<Grid x:Name="LayoutRoot" ShowGridLines="True" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
</StackPanel>
</Grid>
C1HtmlHostコントロールは、ツールボックスのアイコンをダブルクリックして作成します。1つ目のC1HtmlHostコントロールは、SourceUriプロパティにWebページのURLを絶対URLで記述します。
<c1ext:C1HtmlHost Width="500" Height="300" VerticalAlignment="Top"
SourceUri="http://codezine.jp/component/grapecity/" Margin="10">
</c1ext:C1HtmlHost>
2つ目のC1HtmlHostコントロールでは、SourceHtmlプロパティにHTMLコードを追加します。ここでは、3行のテーブルを作成するHTMLを記述します。
<table border="0">
<tr>
<td>
<font color="#FF80C0">このコーナーは、私が作成したフリーソフトをダウンロードするコーナーです。</font>
</td>
</tr>
<tr>
<td>
本プログラムを、営利を目的として無断で転載・販売・再配布するこ<br>とを固く禁じます。
</td>
</tr>
<tr>
<td>
本プログラムの著作権は「瀬戸 遥」が所有します。
</td>
</tr>
</table>
このHTMLコードの<>と""を変更し、1行の文字列にしてSourceHtmlプロパティに設定します。
<c1ext:C1HtmlHost Width="500" Height="300" VerticalAlignment="Top"
SourceHtml="<table border='1'><tr><td>
<font color='#FF80C0'>このコーナーは、私が作成した
フリーソフトをダウンロードするコーナーです。</font>
</td></tr><tr><td>本プログラムを、
営利を目的として無断で転載・販売・再配布することを固く禁
じます。</td></tr><tr><td>本プロ
グラムの著作権は「瀬戸 遥」が所有します。
</td></tr></table>" Margin="10">
</c1ext:C1HtmlHost>
Windowlessプロパティを「True」に設定する
作成したプロジェクトを実行してXAMLの記述を確認する前に、Windowlessプロパティを設定します。先ほど説明したように、プロジェクトにある「xxxTestPage.aspx」ファイルをダブルクリックで開き、ソースにWindowlessプロパティを「True」に設定するコードを追加します。
<param name="Windowless" value="true" />
プロジェクトを実行し、C1HtmlHostコントロールがWebページとHTMLコードを正しく表示することを確認します。
リストで選択したページを表示する処理
最後に、右側のグリッドにC1HtmlHostコントロールとリストボックスをレイアウトし、リストで選択したWebページを表示する処理を組み込みます。
右側のグリッドにC1HtmlHostコントロールとリストボックスをレイアウトする
StackPanelを組み込み、ここにC1HtmlHostコントロールとListBoxコントロールを組み込みます。C1HtmlHostコントロールは、コードから操作します。名前を付け、デフォルトのURLを設定しておきます。
ListBoxコントロールは、イベントハンドラ「list1_SelectionChanged」を作成して、ListBoxItemオブジェクトでリスト項目を設定します。BorderThicknessプロパティを設定して枠線を表示しておくと、リストボックスらしく表示されます。
<StackPanel Grid.Column="1" Orientation="Vertical">
<c1ext:C1HtmlHost x:Name="host1" Width="500" Height="500" Margin="10"
SourceUri="http://www.big.or.jp/~seto" >
</c1ext:C1HtmlHost>
<ListBox x:Name="list1" Grid.Column="1" SelectionChanged="list1_SelectionChanged"
Width="150" Height="50" Margin="5" BorderThickness="2">
<ListBoxItem Content="Seto Home" />
<ListBoxItem Content="ComponentZine"/>
<ListBoxItem Content="グレープシティ"/>
<ListBoxItem Content="Power Tools"/>
<ListBoxItem Content="SEShop com"/>
<ListBox.Effect>
<DropShadowEffect Color="Black"></DropShadowEffect>
</ListBox.Effect>
</ListBox>
</StackPanel>
処理コードの作成
リストボックスでリスト項目が選択されると、SelectionChangedイベントが発生するので、このイベントハンドラでC1HtmlHostコントロールで表示するWebページのURLを切り替えます。
URLの切り替え処理は、C1HtmlHostコントロールのSourceUriプロパティにURLを設定するだけです。XAMLの記述では絶対URLをそのまま記述し、コードから設定する場合は絶対URLをUriクラスのインスタンスとして作成して設定します。
あとは、ListBoxコントロールでリストで選んだ項目の位置を表す「SelectedIndex」を使って、C1HtmlHostコントロールのSourceUriプロパティの値を切り替える処理を作ればできあがりです。
Partial Public Class MainPage
Inherits UserControl
Public Sub New()
InitializeComponent()
End Sub
Private Sub list1_SelectionChanged(ByVal sender As System.Object, ByVal e As System.Windows.Controls.SelectionChangedEventArgs)
Select Case list1.SelectedIndex
Case 0
host1.SourceUri = New Uri("http://www.big.or.jp/~seto/")
Case 1
host1.SourceUri = New Uri("http://codezine.jp/")
Case 2
host1.SourceUri = New Uri("http://www.grapecity.com/jp/")
Case 3
host1.SourceUri = New Uri("http://www.grapecity.com/japan/support/database/dotnet_productlist.htm")
Case 4
host1.SourceUri = New Uri("http://www.seshop.com/")
End Select
End Sub
End Class
namespace sll_htmlhost_cs
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
private void list1_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
switch(list1.SelectedIndex)
{
case 0:
host1.SourceUri = new Uri("http://www.big.or.jp/~seto/");
break;
case 1:
host1.SourceUri = new Uri("http://codezine.jp/");
break;
case 2:
host1.SourceUri = new Uri("http://www.grapecity.com/jp/");
break;
case 3:
host1.SourceUri = new Uri("http://www.grapecity.com/japan/support/database/dotnet_productlist.htm");
break;
case 4:
host1.SourceUri = new Uri("http://www.seshop.com/");
break;
}
}
}
}
まとめ
C1HtmlHostコントロールは、HTMLのIFrame機能に代わってページ内に他のHTMLページを表示できるため、作成するアプリケーションの幅がぐっと広がります。さらに、HTMLコードをWebページに変換して表示するので、データベースのデータや入力データをアプリケーション実行時にその場でWebページにして表示させることもできます。
今回はリストボックスで表示するWebページを切り替えましたが、同じComponentOne Studio for SilverlightにあるC1ExpanderやC1Accordion、C1Menuなどのコントロールと組み合わせれば、さらに使いやすく斬新な機能を持ったWebページを作ることができます。
参考文献
製品情報
