まず初めに、このプログラムで実裝する機能の動作を、下記に解説しておきます。
畫面には、スタイルの変更されたListBox內に、項目名が表示されています（図1左）。ListBoxのスクロールサムは両端が丸められ、スクロールアローは円で表示されています。スクロールサムをクリックすると、背景色が変わります（図1右）。ListBox內の項目を選択すると、該當する畫像とテキストが表示されます（図2）。
|
![3]()
|
| 図1：スタイルの変更されたListBoxが表示されている(左図)。スクロールサムをクリックすると背景色が変化する(右図) |
|
![3]()
|
| 図2：ListBox內の選択された項目に該當する畫像とテキストが表示される（クリックで拡大） |
今回のサンプルは以下よりダウンロードできます。
→ 今回のサンプルファイル（4.90MB）
新規プロジェクトの作成
早速サンプルを作っていきましょう。本稿では開発言語に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)
06 |
抜けるような青空に，銀杏の木が突き刺さっている。 |
コントロールの配置
<UserControl>要素のWidthに800、Heightに600と指定します。ツールボックスからBorder、ListBox、StackPanelコントロールを図3のように配置します。
|
![3]()
|
| 図3：Border、ListBox、StackPanelを配置した（クリックで拡大） |
書き出されるXAMLコードはリスト2のようになります。
リスト2 書き出されたXAMLコード(MainPage.xaml)
1 |
ListBoxやStackPanelはBorderの子要素ではなく、単に上に重ねているだけです。 |
3 |
<Grid x:Name="LayoutRoot" Background="White"> |
4 |
<Border BorderBrush="Silver" BorderThickness="1" Height="459" HorizontalAlignment="Left" Margin="36,20,0,0" Name="Border1" VerticalAlignment="Top" Width="708"/> |
5 |
<ListBox Name="ListBox1" Width="155" HorizontalAlignment="Left" Margin="36,36,0,271"/> |
6 |
<StackPanel Height="418" Name="StackPanel1" Width="521" VerticalAlignment="Stretch" HorizontalAlignment="Right" Margin="0,36,73,146" /> |
ソリューションエクスプローラー內のMainPage.xamlを選択し、マウスの右クリックで表示されるメニューから「Expression Blendを開く(X)」を選択し、Blend4を起動します。
Blend4でのBorderコントロールのスタイル設定
「オブジェクトとタイムライン(B)」からBorder1を選択します。プロパティの[外観]パネルにあるCornerRadiusに20を指定し、四隅を丸めておきます。[ブラシ]パネルにあるBackgroundに薄い水色系統色を指定します。ListBoxには後ほどスタイルを設定しますので、そのままにしておきます。
次に[外観]內にあるEffectの橫にある[新規作成]ボタンをクリックして、Borderコントロールに影を追加します。表示される「オブジェクトの選択」畫面からDropShadowEffectを選択します（図4）。
|
![3]()
|
| 図4：Borderコントロールの影となるDropShadowEffectを選択する（クリックで拡大） |
表示されるDropShadowEffectの、透明度のプロパティOpacityに70、Borderと影との間の距離を指定するShadowDepthに10と指定します。他の項目はデフォルトのままです（図5）。
|
![3]()
|
| 図5：DropShadowEffectのプロパティを設定する |
Blend4上では、BorderコントロールにDropShadowEffectを設定しても、デザイン畫面上に影が反映されません。Blend4のメニューから「プロジェクト(P)／プロジェクトの実行(R)」と選択して実行すると、Borderコントロールに影が表示されるのを確認できます。またVS2010に戻っても確認することができます。
ListBoxコントロールのスタイルの設定
スタイルを設定する前に、ListBoxのスクロールバーを表示させておきたいので、一時的に、ListBoxにListBoxItemを數個追加しておきます。「オブジェクトとタイムライン(B)」から、ListBox1を選択します。プロパティ[共通プロパティ]パネルにあるItems(コレクション)の橫にある[…]ボタンをクリックします。表示される「コレクションエディター」の「別アイテムの追加」の橫にある[v]をクリックして、ドロップダウンを表示させます。その中からListBoxItemを8個ほど追加しておきます。ListBoxItemの[共通プロパティ]パネルにあるContentには適當な文字を入力しておいてください（図6）。
|
![3]()
|
| 図6：一時的にListBoxコントロール內に表示させる項目を設定する |
[OK]ボタンをクリックし、ListBoxのFontSizeに24と指定すると、図7のように表示されます。
|
![3]()
|
| 図7：ListBox項目が表示され、縦スクロールバーも表示された（クリックで拡大） |
ListBoxコントロールの縦スクロールサムのスタイルを変更
「オブジェクトとタイムライン(B)」から、ListBox1を選択します。マウスの右クリックで表示されるメニューから、「テンプレートの編集(E)／コピーして編集(C)」と選択します（図8）。
|
![3]()
|
| 図8：ListBox1を選択し、「テンプレートの編集(E)／コピーして編集(C)」と選択する（クリックで拡大） |
「Styleリソースの作成」畫面が表示されますので、そのままの狀態で[OK]ボタンをクリックします（図9）。
|
![3]()
|
| 図9：「Styleリソースの作成」畫面が表示される |
「オブジェクトとタイムライン(B)」內に[Border]要素が表示されますので、これを展開します。すると中にScrollViewer要素が表示されます（図10）。
|
![3]()
|
| 図10：[Border]要素の子としてScrollViewer要素が表示される |
次にScrollViewerを選択し、マウスの右クリックで表示されるメニューから、「テンプレートの編集(E)／コピーして編集(C)」と選択します。図8と同じ手順です。「Styleリソースの作成」畫面が表示されますので、そのままの狀態で[OK]ボタンをクリックします。「名前(キー)」は違いますが、他は図9に同じです。[OK]ボタンをクリックすると、「オブジェクトとタイムライン(B)」內に[Grid]要素が表示されます。[Grid]要素を展開すると各種、子要素が表示されます。その中から、VerticalScrollBarを選択します（図11）。
|
![3]()
|
| 図11：[Grid]の子要素VerticalScrollBarを選択する（クリックで拡大） |
VerticalScrollBarを選択し、マウスの右クリックで表示されるメニューから、「テンプレートの編集(E)／コピーして編集(C)」と選択します。図8と同じ手順です。「Styleリソースの作成」畫面が表示されますので、そのままの狀態で[OK]ボタンをクリックします。「名前(キー)」は違いますが、他は図9に同じです。[OK]ボタンをクリックすると、「オブジェクトとタイムライン(B)」內の、Root要素の下にHorizontalRootとVerticalRoot要素が表示されます。VerticalRoot要素を展開します。各種、子要素が表示されます。VerticalThumbを選択します（図12）。
|
![3]()
|
| 図12：VerticalRootの子要素VerticalThumbを選択する（クリックで拡大） |
VerticalThumbを選択し、マウスの右クリックで表示されるメニューから、「テンプレートの編集(E)／コピーして編集(C)」と選択します。図8と同じ手順です。「Styleリソースの作成」畫面が表示されますので、そのままの狀態で[OK]ボタンをクリックします。「名前(キー)」は違いますが、他は図9に同じです。[OK]ボタンをクリックすると、「オブジェクトとタイムライン(B)」內の[Grid]要素の子としてThumbVisual要素が表示されます。ThumbVisual要素を展開すると、各種、子要素が表示されます（図13）。これらの要素のプロパティを設定していきます。
|
![3]()
|
| 図13：ThumbVisualの子要素が表示されている |
まず、Highlight要素を選択し、プロパティの[外観]パネルにあるRadiusXとRadiusYに20と指定します（図14）。
|
![3]()
|
| 図14：HighlightのプロパティRadiusXとRadiusYに20を指定する（クリックで拡大） |
他の、BackgroundGradient、BackgroundPressed、BackgroundMouseOver、Background要素のプロパティであるRadiusXとRadiusYに全て20を指定します。
すると、アートボード上にあるListBoxの縦スクロールバー內のスクロールサムの両端が丸められます（図15）。
|
![3]()
|
| 図15：ListBoxのスクロールサムの両端が丸められた |
次に、BackgroundGradient要素を選択し、プロパティ[ブラシ]のFillに、色の「エディター」から紺系統色を指定します。スクロールサムの背景色が紺系統色に変わります（図16）。
|
![3]()
|
| 図16：ListBoxのスクロールサムの背景色が変わった |
ListBoxのスクロールアローのスタイル編集
次に上下ボタンのスクロールアローのスタイルを変えてみます。図1を見るとわかりますが、円で表示されています。Blend4のアートボードの上方に、オブジェクトが一覧で表示されています（図17）。
|
![3]()
|
| 図17：オブジェクトの一覧が表示されている（クリックで拡大） |
この一覧の中から、VerticalThumbを選択します。「オブジェクトとタイムライン(B)」內に、要素の一覧が表示されます。一覧の中から、VerticalSmallDecreaseを選択し、マウスの右クリックで表示されるメニューから、「テンプレートの編集(E)／現在のテンプレートの編集(U)」を選択します（図18）。
|
![3]()
|
| 図18：VerticalSmallDecreaseを選択し、「テンプレートの編集(E)／現在のテンプレートの編集(U)」を選択する（クリックで拡大） |
「オブジェクトとタイムライン(B)」內に要素の一覧が表示されます。Highlightを選択し、プロパティの[外観]パネルにあるOpacityに100と指定します。また、RadiusXに10、RadiusYに10と指定します（図19）。
|
![3]()
|
| 図19：HightlightのプロパティOpacityに100、RadiusXに10、RadiusYに10を指定する（クリックで拡大） |
他の、BackgroundGradient、BackgroundPressed、BackgroundMouseOver、Backgroundの各要素に対してプロパティのOpacityに100、RadiusXに10、RadiusYに10と指定します。上矢印のスクロールアローが円で表示されます。また、BackgroundGradiendtのFillプロパティの橫にある□ボタンをクリックして表示されるメニューから、カスタム式にGoldと指定します。
次に下矢印のスクロールアローも円で表示するようスタイルを変更します。アートボードの上方にあるオブジェクトの一覧から、VerticalSmallDecreaseを選択します。「オブジェクトとタイムライン(B)」內に表示された要素から、VerticalSmallIncreaseを選択します。マウスの右クリックで表示されるメニューから、「テンプレートの編集(E)／現在のテンプレートの編集(U)」を選択します。「オブジェクトとタイムライン(B)」內に表示された、Highlight、BackgroundGradient、BackgroundPressed、BackgroundMouseOver、Backgroundの各要素に対してプロパティのOpacityに100、RadiusXに10、RadiusYに10と指定します。これで、下矢印のスクロールアローが円で表示されます。また、BackgroundGradiendtのFillプロパティの橫にある□ボタンをクリックして表示されるメニューから、カスタム式にGoldと指定します。これで、上下スクロールアローがGoldの円で表示されます（図20）。
|
![3]()
|
| 図20：上下矢印のスクロールアローがGoldの円で表示される |
次に、スクロールサムをクリックした時に背景色を変化させます。
アートボードの上方にあるオブジェクトの一覧から、VerticalSmallIncreaseを選択し、「オブジェクトとタイムライン(B)」內に表示されたVerticalThumbを選択します。マウスの右クリックで表示されるメニューから、「テンプレートの編集(E)／現在のテンプレートの編集(U)」を選択します。表示されたHighlightの、プロパティFillのカスタム式にCrimsonと指定します。
ここで、Blend4のメニューから、「プロジェクト(P)／プロジェクトの実行(R)」と選択して実行してみましょう。スクロールサムをクリックした時Crimsonに変化すればOKです（図21）。
|
![3]()
|
| 図21：スクロールサムをクリックした時、背景色がCrimsonに変化する |
以上でListBoxのスクロールバーのスタイル変更は完了です。次に、ListBoxの背景色をBorder1と同じ背景色にしておきます。アートボードの上方にあるオブジェクトの一覧からListBox1を選択します。「オブジェクトとタイムライン(B)」內のListBox1を選択し、プロパティ[ブラシ]パネルにあるBackgroundのカスタム式に、Border1の背景色と同じ色を指定します。また、BorderBrushにもBorder1の背景色と同じ色を指定します。図22のように項目名とスクロールバーの表示されたListBoxが完成します。
|
![3]()
|
| 図22：枠線が消え、背景色と同化したListBoxが完成する |
以上でBlend4での操作は終了です。VS2010に戻ります。
書き出されたXAMLコードを見ると、気が遠くなるほどのコードが自動的に書き出されています（汗）。このコードの最後にあるListBoxのListBoxItemのコードを削除してください。これは、スクロールバーの編集のために仮に追加しておいたものです。ListBoxコントロールへの項目はプログラムから追加することになります。
MainPage.xaml.vbにリスト3のコードを記述します。
ロジックコードを記述する
リスト3 (MainPage.xaml.vb)
03 |
XML文書ファイルをLINQ to XMLで処理するのに必要なクラスの含まれる、System.Xml.Linq名前空間をインポートします。畫像を表示させるのに必要なクラスの含まれる、System.Windows.Media.Imaging名前空間をインポートします。 |
04 |
Imports System.Xml.Linq |
05 |
Imports System.Windows.Media.Imaging |
08 |
XMLの要素を表すXElement型のメンバ変數xmldocを宣言します。 |
09 |
Dim xmldoc As XElement |
12 |
文字列型の新しいリスト、myImageList変數を宣言しておきます。 |
13 |
XElement.LoadメソッドでXML文書ファイル(photo_etc.xml)を読み込みます。 |
14 |
Descendants メソッドで、子孫要素である全ての <情報> 要素のコレクションに対して、各要素を変數 result に格納しながら、Element (要素名) で、<畫像名>要素の內容から.jpgの4文字を差し引いた、畫像名を取り出し、AddメソッドでString型のリストであるmyImageListに追加していきます。ListBox1のItemsSourceプロパティに畫像名の追加された、myImageListを指定します。これで、ListBoxに畫像名が表示されます。 |
15 |
Private Sub MainPage_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded |
16 |
Dim myImageList As New List(Of String) |
17 |
xmldoc = XElement.Load("photo_etc.xml") |
19 |
For Each result In From c In xmldoc.Descendants("情報") Select c |
20 |
Dim fileNameLen As Integer = Len(result.Element("畫像名").Value) - 4 |
21 |
Dim imageFileName As String = Left(result.Element("畫像名").Value, fileNameLen) |
22 |
myImageList.Add(imageFileName) |
24 |
ListBox1.ItemsSource = myImageList |
26 |
■ListBox內の項目が選択された時の処理 |
27 |
StackPanel1內を一度クリアしておきます。この処理を怠ると、ListBoxから選択した項目に該當する畫像やテキストが、ダブってStackPanel1に追加されていってしまいます。 |
28 |
新しいStackPanelのインスタンスmyStackPanelオブジェクトを生成し、OrientationプロパティにVerticalを指定し、垂直方向にオブジェクトが配置されるようにします。 |
29 |
ListBoxより選択された項目のインデックスに該當する、<畫像名>と<説明>要素の內容テキストを取得し、変數に格納しておきます。 |
30 |
新しいImageのインスタンスmyImageオブジェクトを生成します。 |
31 |
Width、Height、Source、Marginプロパティを設定します。Marginプロパティでは要素の外側の餘白を設定できます。 |
32 |
新しいTextBlockのインスタンスmyTextBlockオブジェクトを生成します。FontSize、Text、HorizontalAlignmentプロパティを設定します。 |
33 |
myStackPanelオブジェクトにmyImageとmyTextBlockオブジェクトを追加します。 |
34 |
畫像と説明の追加されたmyStackPanelオブジェクトをStackPanel1に追加します。これで、ListBoxから選択された畫像名に該當する畫像と、説明が表示されます。 |
35 |
Private Sub ListBox1_SelectionChanged(ByVal sender As Object, ByVal e As System.Windows.Controls.SelectionChangedEventArgs) Handles ListBox1.SelectionChanged |
36 |
StackPanel1.Children.Clear() |
37 |
Dim myStackPanel As New StackPanel |
38 |
myStackPanel.Orientation = Orientation.Vertical |
39 |
Dim imageName As String = xmldoc.Descendants("情報")(ListBox1.SelectedIndex).<畫像名>.Value |
40 |
Dim imageComment As String = xmldoc.Descendants("情報")(ListBox1.SelectedIndex).<説明>.Value |
41 |
Dim myImage As New Image |
45 |
.Source = New BitmapImage(New Uri("Image/" & imageName, UriKind.Relative)) |
46 |
.Margin = New Thickness(10) |
49 |
Dim myTextBlock As New TextBlock |
53 |
.HorizontalAlignment = Windows.HorizontalAlignment.Center |
55 |
With myStackPanel.Children |
60 |
StackPanel1.Children.Add(myStackPanel) |
