ListBoxのスタイル変更と選択された項目データの表示

まず初めに、このプログラムで実装する機能の動作を、下記に解説しておきます。

画面には、スタイルの変更されたListBox内に、項目名が表示されています（図1左）。ListBoxのスクロールサムは両端が丸められ、スクロールアローは円で表示されています。スクロールサムをクリックすると、背景色が変わります（図1右）。ListBox内の項目を選択すると、該当する画像とテキストが表示されます（図2）。

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

新規プロジェクトの作成

早速サンプルを作っていきましょう。本稿では開発言語にVisual Basicを用います。

VS 2010のメニューから[ファイル(F)／新規作成(N)／プロジェクト(P)]を選択します。次に、「Silverlight アプリケーション」を選択して、「名前(N)」に任意のプロジェクト名を指定します。ここでは「SL4_ListBoxStyle」という名前を付けています。

ソリューションエクスプローラー内にリスト1のXMLファイルを取り込んでおきます。XMLファイルをLINQ to XMLで処理するため、「プロジェクト(P)／参照の追加(F)」から、System.Xml.Linqを追加しておいてください。

またソリューションエクスプローラー内にImageというフォルダを作成し、画像を取り込んでおきます。

ダウンロードされたサンプル・ファイルにはXMLファイルや画像ファイルは追加済みです。

リスト1　XMLファイル(photo_etc.xml)

コントロールの配置

要素のWidthに800、Heightに600と指定します。ツールボックスからBorder、ListBox、StackPanelコントロールを図3のように配置します。

書き出されるXAMLコードはリスト2のようになります。

リスト2　書き出されたXAMLコード(MainPage.xaml)

ソリューションエクスプローラー内のMainPage.xamlを選択し、マウスの右クリックで表示されるメニューから「Expression Blendを開く(X)」を選択し、Blend4を起動します。

Blend4でのBorderコントロールのスタイル設定

「オブジェクトとタイムライン(B)」からBorder1を選択します。プロパティの[外観]パネルにあるCornerRadiusに20を指定し、四隅を丸めておきます。[ブラシ]パネルにあるBackgroundに薄い水色系統色を指定します。ListBoxには後ほどスタイルを設定しますので、そのままにしておきます。

次に[外観]内にあるEffectの横にある[新規作成]ボタンをクリックして、Borderコントロールに影を追加します。表示される「オブジェクトの選択」画面からDropShadowEffectを選択します（図4）。

表示されるDropShadowEffectの、透明度のプロパティOpacityに70、Borderと影との間の距離を指定するShadowDepthに10と指定します。他の項目はデフォルトのままです（図5）。

Blend4上では、BorderコントロールにDropShadowEffectを設定しても、デザイン画面上に影が反映されません。Blend4のメニューから「プロジェクト(P)／プロジェクトの実行(R)」と選択して実行すると、Borderコントロールに影が表示されるのを確認できます。またVS2010に戻っても確認することができます。

ListBoxコントロールのスタイルの設定

スタイルを設定する前に、ListBoxのスクロールバーを表示させておきたいので、一時的に、ListBoxにListBoxItemを数個追加しておきます。「オブジェクトとタイムライン(B)」から、ListBox1を選択します。プロパティ[共通プロパティ]パネルにあるItems(コレクション)の横にある[…]ボタンをクリックします。表示される「コレクションエディター」の「別アイテムの追加」の横にある[v]をクリックして、ドロップダウンを表示させます。その中からListBoxItemを8個ほど追加しておきます。ListBoxItemの[共通プロパティ]パネルにあるContentには適当な文字を入力しておいてください（図6）。

[OK]ボタンをクリックし、ListBoxのFontSizeに24と指定すると、図7のように表示されます。