Webページ内に複数のHTMLコンテンツを表示するSilverlightアプリケーションの作成

ComponentOne Studio for SilverlightのC1HtmlHostコントロールを使ったWebページの作成

Webページの作成

　では、Webページを作成してみましょう。グリッドは1行2列に設定します。左側のグリッドにC1HtmlHostコントロールを2つ配置し、右側のグリッドにC1HtmlHostコントロールとListBoxコントロールを配置します。

コントロールのレイアウト（GridのShowGridLinesプロパティを「True」にしてグリッド線を表示）

Silverlightプロジェクトの作成

　まず、Silverlightプロジェクトを作成します。Visual Studioで新しいプロジェクトを作成すると、［プロジェクトの種類］に［Silverlight］が追加されています。これを選んで［テンプレート］から［Silverlightアプリケーション］を選択します。

［Silverlightアプリケーション］を選ぶ

　［新しいSilverlightアプリケーション］というダイアログボックスが表示されるので、［新しいWebプロジェクトの種類］でリストから［ASP.NET 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="&lt;table border='1'&gt;&lt;tr&gt;&lt;td&gt;
                  &lt;font color='#FF80C0'&gt;このコーナーは、私が作成した
                  フリーソフトをダウンロードするコーナーです。&lt;/font&gt;
                  &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;本プログラムを、
                  営利を目的として無断で転載・販売・再配布することを固く禁
                  じます。&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;本プロ
                  グラムの著作権は「瀬戸 遥」が所有します。
                  &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;" Margin="10">
</c1ext:C1HtmlHost>

Windowlessプロパティを「True」に設定する

　作成したプロジェクトを実行してXAMLの記述を確認する前に、Windowlessプロパティを設定します。先ほど説明したように、プロジェクトにある「xxxTestPage.aspx」ファイルをダブルクリックで開き、ソースにWindowlessプロパティを「True」に設定するコードを追加します。

<param name="Windowless"  value="true" />

　プロジェクトを実行し、C1HtmlHostコントロールがWebページとHTMLコードを正しく表示することを確認します。

WebページとHTMLコードが正しく表示できればOK