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

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

リストで選択したページを表示する処理

　最後に、右側のグリッドに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プロパティの値を切り替える処理を作ればできあがりです。

Visual Basic

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

C#

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ページを作ることができます。

参考文献

• Microsoft Silverlight デベロッパー センター

製品情報

• ComponentOne Studio