ビハインドコードの作成
今度は、ドロップダウンリストの書籍名がクリックされると、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ページをユーザーに提示することができるようになります。
製品情報
