ドロップダウンリストを使ったSilverlightアプリケーションの作成

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

ビハインドコードの作成

　今度は、ドロップダウンリストの書籍名がクリックされると、Imageコントロールに書籍のカバー画像を表示する処理を作成します。この処理は、C1DropDownコントロールのイベントハンドラではなく、リスト表示を行っているTreeViewコントロールのイベントハンドラを利用します。

　TreeViewコントロールでユーザーがリスト項目を選択すると、SelectedItemChangedイベントが発生するので、このイベントハンドラで「TreeView1」クラスのSelectedItemプロパティからリスト項目の文字列を取得し、関連する画像ファイルをImageコントロールに設定します。

　Imageコントロールに画像を設定するには、「Source」プロパティを利用します。このプロパティに、画像ファイルをBitmapImageオブジェクトに変換して設定します。BitmapImageオブジェクトを使用するので、「System.Windows.Media.Imaging」名前空間への参照を設定するのを忘れないでください。

Visual Basic

Imports System.Windows.Media.Imaging

Partial Public Class MainPage
Inherits UserControl

Public Sub New()
    InitializeComponent()
End Sub


Private Sub TreeView1_SelectedItemChanged(ByVal sender As System.Object, ByVal e As System.Windows.RoutedPropertyChangedEventArgs(Of System.Object))
    Dim tvi As TreeViewItem = TreeView1.SelectedItem
    Select Case tvi.Header
        Case "Excel2007"
            image1.Source = New BitmapImage(New Uri("images/MOS_Excel.jpg", UriKind.RelativeOrAbsolute))
        Case "Word2007"
            image1.Source = New BitmapImage(New Uri("images/MOS_Word.jpg", UriKind.RelativeOrAbsolute))
        Case "PowerPoint2007"
            image1.Source = New BitmapImage(New Uri("images/MOS_PP.jpg", UriKind.RelativeOrAbsolute))
        Case "Access2007"
            image1.Source = New BitmapImage(New Uri("images/MOS_Access.jpg", UriKind.RelativeOrAbsolute))
        Case "ITストラテジスト"
            image1.Source = New BitmapImage(New Uri("images/ITストラテジスト.jpg", UriKind.RelativeOrAbsolute))
        Case "ネットワークスペシャリスト"
            image1.Source = New BitmapImage(New Uri("images/ネットワークスペシャリスト.jpg", UriKind.RelativeOrAbsolute))
        Case "システムアーキテクト"
            image1.Source = New BitmapImage(New Uri("images/システムアーキテクト.jpg", UriKind.RelativeOrAbsolute))
        Case "ITサービスマネージャ"
            image1.Source = New BitmapImage(New Uri("images/サービスマネージャ.jpg", UriKind.RelativeOrAbsolute))
        Case "Excel VBA"
            image1.Source = New BitmapImage(New Uri("images/10日VBA.jpg", UriKind.RelativeOrAbsolute))
        Case "Visual Basic2005"
            image1.Source = New BitmapImage(New Uri("images/10日VB2005.jpg", UriKind.RelativeOrAbsolute))
        Case "Excel 関数"
            image1.Source = New BitmapImage(New Uri("images/10日関数.jpg", UriKind.RelativeOrAbsolute))
    End Select
End Sub
End Class

C#

using System.Windows.Media.Imaging;

namespace sl_dropdown_cs
{
public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void TreeView1_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
    {
        TreeViewItem tvi = (TreeViewItem)TreeView1.SelectedValue;
        String s = tvi.Header.ToString();
        
        switch(s)
        {
            case "Excel2007":
                image1.Source = new BitmapImage(new Uri("images/MOS_Excel.jpg", UriKind.RelativeOrAbsolute));
            break;
            case "Word2007":
            image1.Source = new BitmapImage(new Uri("images/MOS_Word.jpg", UriKind.RelativeOrAbsolute));
            break;
            case "PowerPoint2007":
                image1.Source = new BitmapImage(new Uri("images/MOS_PP.jpg", UriKind.RelativeOrAbsolute));
            break;
            case "Access2007":
                image1.Source = new BitmapImage(new Uri("images/MOS_Access.jpg", UriKind.RelativeOrAbsolute));
            break;
            case "ITストラテジスト":
                image1.Source = new BitmapImage(new Uri("images/ITストラテジスト.jpg", UriKind.RelativeOrAbsolute));
            break;
            case "ネットワークスペシャリスト":
                image1.Source = new BitmapImage(new Uri("images/ネットワークスペシャリスト.jpg", UriKind.RelativeOrAbsolute));
            break;
            case "システムアーキテクト":
                image1.Source = new BitmapImage(new Uri("images/システムアーキテクト.jpg", UriKind.RelativeOrAbsolute));
            break;
            case "ITサービスマネージャ":
                image1.Source = new BitmapImage(new Uri("images/サービスマネージャ.jpg", UriKind.RelativeOrAbsolute));
            break;
            case "Excel VBA":
                image1.Source = new BitmapImage(new Uri("images/10日VBA.jpg", UriKind.RelativeOrAbsolute));
            break;
            case "Visual Basic2005":
                image1.Source = new BitmapImage(new Uri("images/10日VB2005.jpg", UriKind.RelativeOrAbsolute));
            break;
            case "Excel 関数":
                image1.Source = new BitmapImage(new Uri("images/10日関数.jpg", UriKind.RelativeOrAbsolute));
            break;
        }
   }
}
}

まとめ

　Windowsフォームでは、ドロップダウンリストはGUIの常とう手段になっているコントロールですが、Silverlight標準のコントロールにはドロップダウンリストコントロールはありません。今回紹介したC1DropDownコントロールがWebで使えるとなると、プログラミングの幅がぐっと広がります。しかも、リスト部分にさまざまなコントロールを組み込むことができるので、これまでにないUIを持ったWebページをユーザーに提示することができるようになります。

製品情報

• ComponentOne Studio