はじめに
ComponentOne Studio for SilverlightのC1DropDownコントロールは、Silverlight標準のコントロールにはないドロップダウンリストコントロールを、Webページ上で使えるコントロールです。ドロップダウンリストが使えると、少ないスペースでユーザーに選択してもらう複数の候補が設定できるのでとても便利ですね。
今回は、このC1DropDownコントロールにTreeViewコントロールを組み合わせて書籍のリストを表示し、書籍名をクリックするとそのカバー写真を表示するSilverlightアプリケーションを作成してみました。
対象読者
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で動作確認を行っています。
本稿のサンプルアプリケーションをVisual Studioでそのまま実行すると、ASP.NETアプリケ―ション（sl_dropdown_cs.Web）ではなく、Silverlightアプリケ―ション（sl_dropdown_cs）として実行されるため、画像が表示されない問題が発生します。画像を表示させるには、あらかじめ次の手順を実行してください。
- ASP.NET Webサイトプロジェクトを右クリックして、［スタートアッププロジェクトに設定］を選択
コンポーネントのインストール
DropDown for Silverlightを使用する方は、Visual Studio、Visual Basic、Visual C#の開発環境にComponentOne Studio Enterprise 2010Jをインストールする必要があります。
インストーラは、グレープシティのWebページからダウンロードできます。製品ページの［申込フォーム］をクリックし、グレープシティのWebサイトへ必要情報を登録すると、添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきますので、ここからダウンロードします。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。
C1DropDownコントロールについて
ComponentOne Studio for SilverlightのC1DropDownコントロールは、セットアップが簡単で、単一項目を選択できるドロップダウンリストを表示する機能を持ったコントロールです。
C1DropDownコントロールは、ヘッダー領域とコンテンツ領域の２つのパーツで構成されます。ヘッダーはドロップダウンボックスが開いていないときに表示され、TextBlockコントロールなどと組み合わせて、ドロップダウンリストのタイトルの設定に使用します。コンテンツはドロップダウン領域をクリックすると表示され、リスト表示できるコントロールを組み込んでコンテンツを作成します。コンテンツはまったく追加しない、ヘッダー領域とコンテンツ領域の一方に追加する、両方に追加するといったようにカスタマイズすることも可能です。
ヘッダーとコンテンツを定義するのには、<c1:C1DropDown.Header>タグと<c1:C1DropDown.Content>タグを使用します。これらのタグの内側に、設定したいコントロールやコンテンツを追加します。
C1DropDownコントロールのドロップダウン矢印をユーザーがクリックすると、デフォルトではコントロールの下にリストが表示されます。ページのレイアウト位置によってコントロールの下に表示できない場合は、コントロールの上に表示されます。ただし、「DropDownDirection」プロパティを使用することで、ドロップダウンリストを表示する場所をカスタマイズできます。
「DropDownDirection」プロパティは、次のいずれかのオプションに設定できます。
| 設定値 | 説明 |
|---|---|
| BelowOrAbove（デフォルト） | ドロップダウンボックスをヘッダーの下に表示するように試みます。表示できない場合は、その上に表示するように試みます。 |
| AboveOrBelow | ドロップダウンボックスをヘッダーの上に表示するように試みます。表示できない場合は、その下に表示するように試みます。 |
| ForceBelow | ドロップダウンボックスをヘッダーの下に強制的に表示します。 |
| ForceAbove | ドロップダウンボックスをヘッダーの上に強制的に表示します。 |
また、｢DropDownDirection」プロパティ以外にコントロールの外観や動作の機能を設定するために、次のようないくつかのプロパティがあります。
| プロパティ | 説明 |
|---|---|
| AutoClose | ドロップダウンボックス以外の場所をクリックすると自動的に閉じます。 |
| DisabledCuesVisibility | コントロールのビジュアルのうち、無効になっているものを表示するかどうかを示す値を取得します。 |
| DropDownHeight | ドロップダウンボックスの高さを取得または設定します（自動的にサイズ指定する場合はゼロに設定）。 |
| DropDownWidth | ドロップダウンボックスの幅を取得または設定します（自動的にサイズ指定する場合はゼロに設定）。 |
| FocusCuesVisibility | コントロールのビジュアルのうち、フォーカスがあるものを表示するかどうかを示す値を取得します。 |
| IsDropDownOpen | コントロールのドロップダウンボックスを開閉します。 |
| ShowButton | ToggleButton が表示されるかどうかを取得／設定します。 |
ドロップダウンリストとなるコンテンツ領域には、テキスト、画像などの標準コントロールやサードパーティのコントロールなど、任意の種類のコンテンツを追加できます。例えば、Buttonコントロールをドロップダウンリストに追加するには、次のようなXAMLを記述します。
<c1:C1DropDown Height="30" Name="c1dropdown1" Width="100"> <Button Height="23" Name="button1" Width="75">Hello World!</Button> </c1:C1DropDown>
C1DropDownコントロールには、2つの基本的なイベントが用意されています。ドロップダウンリストが選択された処理は、それぞれコンテンツ領域に設定したコントロールのイベントハンドラを利用して処理を組み立てます。
| イベント | 説明 |
|---|---|
| IsDropDownOpenChanged | IsDropDownOpen プロパティが変更されたときに発生するイベントです。 |
| IsMouseOverChanged | IsMouseOver プロパティが変更されたときに発生するイベントです。 |
Webページの作成
では、さっそくWebページを作成してみましょう。今回は、C1DropDownコントロールのドロップダウンリストに、Silverlight標準のTreeViewコントロールを組み込み、書籍名のリストをツリー状に表示するようにします。そして、リストの項目名をクリックすると、同じくSilverlight標準のImageコントロールに書籍のカバー写真を表示します。
グリッドは2列に設定し、左側にドロップダウンリストを、右側にImageコントロールを配置します。また、それぞれのコントロールの「Effect」プロパティにDropShadowEffectを設定し、影付きの表示にします。C1DropDownコントロールのHeader部分は、TextBlockコントロールでタイトルを表示します。
Silverlightプロジェクトの作成
まずは、Silverlightプロジェクトの作成からです。
Visual Studio 2008 Silverlight Tools 3.0をインストールし、Visual Studioで新しいプロジェクトを作成すると、「プロジェクトの種類」に［Silverlight］が追加されています。これを選んで「テンプレート」から［Silverlightアプリケーション］を選択します。
「新しいSilverlightアプリケーション」というダイアログボックスが表示されるので、「新しいWebプロジェクトの種類」でリストから「ASP.NET Webサイト」を選びます。
プロジェクトが作成され、新しいWebサイトに「MainPage.xaml」が作られてXAMLのコードが表示されます。
Silverlight標準のTreeViewコントロールを使用するので、プロジェクトウィンドウの「参照設定」に［System.Windows.Controls］を設定します。
XAMLコードのヘッダー部分に、次の１行を追加します。
<UserControl xmlns:c1="clr-namespace:C1.Silverlight;assembly=C1.Silverlight" x:Class="sl_dropdown_vb.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" ← この１行を追加 mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
プロジェクトウィンドウの「ClientBin」フォルダ内に「Images」フォルダを作成し、この中に画像イメージのファイルを格納します。
これは、Imageコントロールの「Source」プロパティにファイルを設定するには、ファイルへの絶対URLを指定するか、アプリケーションのXAPファイルを基準とする相対URLを指定するようになっているためです。Webサーバーのどの位置にこのアプリケーションが配置されるのかが分からないので、XAPファイルを基準とする相対URLで画像ファイルを指定するようにし、画像ファイルを格納しておきます。
グリッドの設定
次に、グリッドを作成します。今回は、2列のグリッドに設定するので「ColumnDefinitions」を使います。
<Grid x:Name="LayoutRoot" ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>
C1DropDownコントロールの作成
次に、ツールボックスにある［C1DropDownコントロール］アイコンをダブルクリックして、C1DropDownコントロールを作成します。
コントロールのサイズは、Widthプロパティを「100」、Heightプロパティを「30」に設定し、Effectプロパティに「DropShadowEffect」を設定します。
<c1:C1DropDown Grid.Column="0" HorizontalAlignment="Right" Margin="0,15,0,0"
VerticalAlignment="Top" Width="100" Height="30">
<c1:C1DropDown.Effect>
<DropShadowEffect Color="Black" BlurRadius="5" />
</c1:C1DropDown.Effect>
Headerプロパティを使ってヘッダー部分にTextBlockコントロールを組み込んでタイトルを作成します。
まず、Headerプロパティに<ContentControl>タグを記述します。これで、Header領域にコントロールが追加できるので、このタグの中にTextBlockコントロールを組み込みます。
<c1:C1DropDown.Header>
<ContentControl VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock x:Name="selection" Text="≪ 書籍案内 ≫" FontSize="12" Foreground="SlateBlue"
TextAlignment="left" Margin="0,-15,0,0" />
</ContentControl>
</c1:C1DropDown.Header>
コンテンツ領域の作成
コンテンツ領域にドロップダウンリストを作成していきます。「Content」プロパティの中にTreeViewコントロールを作成し、TreeViewItemオブジェクトを使用して書籍のタイトルを階層状に作成していきます。また、イベントハンドラ「SelectedItemChanged」を作成します。
<c1:C1DropDown.Content>
<controls:TreeView x:Name="TreeView1" Background="Transparent" Margin="10"
SelectedItemChanged="TreeView1_SelectedItemChanged">
<controls:TreeViewItem Header="マイクロソフトオフィス教科書">
<controls:TreeViewItem Header="Excel2007" />
<controls:TreeViewItem Header="Word2007" />
<controls:TreeViewItem Header="PowerPoint2007" />
<controls:TreeViewItem Header="Access2007" />
</controls:TreeViewItem>
<controls:TreeViewItem Header="情報処理教科書 2011年版">
<controls:TreeViewItem Header="ITストラテジスト" />
<controls:TreeViewItem Header="ネットワークスペシャリスト" />
<controls:TreeViewItem Header="システムアーキテクト" />
<controls:TreeViewItem Header="ITサービスマネージャ" />
</controls:TreeViewItem>
<controls:TreeViewItem Header="10日でおぼえる">
<controls:TreeViewItem Header="Excel VBA" />
<controls:TreeViewItem Header="Visual Basic2005" />
<controls:TreeViewItem Header="Excel 関数" />
</controls:TreeViewItem>
</controls:TreeView>
</c1:C1DropDown.Content>
</c1:C1DropDown>
Imageコントロールの作成
C1DropDownコントロールの下に、Imageコントロールを作成します。
デフォルト表示用に「blank.jpg」という画像ファイルを指定しますが、このときファイルの位置をXAPファイルを基準とする相対URLで指定します。
また、ドロップシャドウを付けておきます。
<Image x:Name="image1" Source="images/blank.jpg" Grid.Column="1" Margin="0,15,0,0" Height="150"
HorizontalAlignment="Center" VerticalAlignment="Top" >
<Image.Effect>
<DropShadowEffect Color="Black" BlurRadius="5" />
</Image.Effect>
</Image>
以上でUI部分は完成です。
ビハインドコードの作成
今度は、ドロップダウンリストの書籍名がクリックされると、Imageコントロールに書籍のカバー画像を表示する処理を作成します。この処理は、C1DropDownコントロールのイベントハンドラではなく、リスト表示を行っているTreeViewコントロールのイベントハンドラを利用します。
TreeViewコントロールでユーザーがリスト項目を選択すると、SelectedItemChangedイベントが発生するので、このイベントハンドラで「TreeView1」クラスのSelectedItemプロパティからリスト項目の文字列を取得し、関連する画像ファイルをImageコントロールに設定します。
Imageコントロールに画像を設定するには、「Source」プロパティを利用します。このプロパティに、画像ファイルをBitmapImageオブジェクトに変換して設定します。BitmapImageオブジェクトを使用するので、「System.Windows.Media.Imaging」名前空間への参照を設定するのを忘れないでください。
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
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ページをユーザーに提示することができるようになります。
製品情報
