特殊効果（Radial Blur）を伴った画像の切り替え

ロジックコードを記述する

リスト2　(ButtonSilverlightControl.xaml.vb)

Option Strict On
ImageコントロールのSourceプロパティに画像を指定する際に必要なクラスの含まれる、System.Windows.Media.Imaging名前空間をインポートします。
また、XML文書ファイルをLINQで処理するクラスの含まれる、System.Xml.Linq名前空間もインポートしておきます。
Imports System.Windows.Media.Imaging
Imports System.Xml.Linq
Partial Public Class ButtonSilverlightControl
  Inherits UserControl

 	Public Sub New()
  	InitializeComponent()
  End Sub

文字列型の新しいリストとして、myImageListメンバ変数を宣言します。
  Dim myImageList As New List(Of String)

画像を指定する際のインデックスとなる、メンバ変数noを宣言します。
  Dim no As Integer = 0

XElement型のコレクションに対する反復処理をサポートする列挙子として、queryをメンバ変数として宣言します。
  Dim query As IEnumerable(Of XElement)
  Dim ImageCount As Integer = 0

■ButtonSilverlightControlが読み込まれた時の処理
XElement.LoadメソッドでXML文書ファイル(Photo.xml)を読み込みます。
読み込んだXML文書から<画像名>要素を選択するクエリを定義します。
<画像名>要素の個数をCountプロパティで取得し、変数ImageCountに格納しておきます。
クエリ(query)を実行します。クエリに対して各要素を、変数 result に格納しながら、以下の処理を繰り返します。
文字列型のリストであるmyImageListにAddメソッドで<画像名>要素の値を追加します。
Image1のOpacityを1に指定して透明化を解除し、SourceプロパティにmyImageListのインデックスが0番目の画像(最初の画像)を指定します。相対URIで指定します。ページが読み込まれた時、<画像名>要素のインデックスが0番目の画像が表示されています。
  Private Sub ButtonSilverlightControl_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
  	Dim xmldoc As XElement = XElement.Load("Photo.xml")
  	query = From c In xmldoc.Descendants("画像名") Select c
  	ImageCount = query.Count
  	For Each result In query
  		myImageList.Add(result.Value)
  Next
  ImageShowArea.Image1.Opacity = 1
  ImageShowArea.Image1.Source = New BitmapImage(New Uri("Image/" & myImageList(0), UriKind.Relative))
End Sub

■[>]ボタンがクリックされた時の処理
no の値が画像の数を超えないよう Math.Min() 関数を用いています。
画像を特殊効果を伴って表示するTransitionImageShowプロシージャを実行します。
ボタンがクリックされた時、現在の画像の順番を、ボタンの表面に表示します。
  Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button2.Click
  	Button1.Content = "<"
  	no = Math.Min(no + 1, ImageCount - 1)
  	TransitionImageShow()
  	Button2.Content = no + 1 & "/" & ImageCount
  End Sub

■[<]ボタンがクリックされた時の処理。
Math.Max()関数を用いて、変数noの値が0より大きい場合は、noの値を減算します。
画像を特殊効果を伴って表示するTransitionImageShowプロシージャを実行します。
ボタンがクリックされた時、現在の画像の順番を、ボタンの表面に表示します。
  Private Sub Button1_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button1.Click
  	Button2.Content = ">"
  	no = Math.Max(no - 1, 0)
  	TransitionImageShow()
  	Button1.Content = no + 1 & "/" & ImageCount
  End Sub
End Class

■画像を特殊効果を伴って表示する処理
ImageShowAreaに適用されている、GoToState メソッドの呼び出しから、最後に設定されたVisualState(特定の状態のコントロールの外観を表すクラス)が存在し、かつ、VisualStateの名前がImageTransitionShow2である場合は、VisualStateManager.GotoStateメソッドでImageTransitionShowの VisualSateを実行します。それ以外の場合は、ImageTransitionShow2を実行します。VisualStateManager.GotoStateメソッドの書式は下記の通りです。

VisualStateManager.GotoState(状態を遷移させるコントロール,状態名,VisualTransitionを使うかどうかのBoolean値(使用する場合はTrue、それ以外はFalse)

ImageShowSilverlightControlユーザーコントロール内のImage1に、変数noに該当するmyImageList内の画像を表示します。
  Private Sub TransitionImageShow()
  	If ImageShowArea.VisualStateGroup.CurrentState Is Nothing = False AndAlso ImageShowArea.VisualStateGroup.CurrentState.Name.ToString = "ImageTransitionShow2" Then
  		VisualStateManager.GoToState(ImageShowArea, "ImageTransitionShow", True)
  	Else
  		VisualStateManager.GoToState(ImageShowArea, "ImageTransitionShow2", True)
  	End If
  	ImageShowArea.Image1.Source = New BitmapImage(New Uri("Image/" & myImageList(no), UriKind.Relative))
	End Sub

では、ここで「デバッグ(D)／デバッグ開始(S)」と選択して実行してみましょう。ボタンをクリックすると、図20のように表示されましたか？

図20：[>]ボタンクリックで、特殊効果を伴って次の画像が表示されている（クリックで拡大）

図1の画面と比べると、ボタンの形状が違っているのに気付かれると思います。次にボタンの形状を変更してみましょう。ソリューションエクスプローラー内の、ButtonSilverlightControl.xamlを選択し、マウスの右クリックで表示されるメニューの、「Expression Blendを開く(X)」を選択し、Blend4を起動します。

Blend4でボタンの形状を変更する

アートボード上の空いた適当な場所に、ツールボックスからGridコントロールを配置し（図21／左）、Gridコントロール内に、四角形の中にある楕円を選択して描きます（図21／中央・右）。

図21：Gridコントロール内に楕円を描いた

楕円を選択して、マウスの右クリックで表示されるメニューから、「コントロールの作成」を選択します（図22）。

図22：「コントロールの作成」を選択する

「コントロールの作成」画面が表示されますので、Buttonを選択します。名前(キー)で「すべてに適用」にチェックを付けます。「定義先」では「アプリケーション」にチェックを付けます。[OK]ボタンをクリックします（図23）。

図23：「コントロールの作成」画面でButtonを選択し、「名前(キー)」、「定義先」を設定する

「Template」画面が表示されます。表面に「Button」と書かれた楕円が表示されます（図24）。

図24：「Template」画面が表示される

アートボードの上方にある[Button]タブをクリックすると、配置されていたButtonが楕円の形状で表示されます（図25）。

図25：配置されていたButtonの形状が楕円に変わった（クリックで拡大）

作成しておいた「楕円」とGridを選択して、PCの[Delete]キーで削除します。

Blend4を終了してVS2010に戻り実行してみましょう。Buttonは楕円に変わり、クリックすると楕円のボタン上に現在の画像の順番が表示されます。

楕円に変わったButtonの定義は、ソリューションエクスプローラー内のApp.xaml内にリスト3のように定義されています。

リスト3　Buttonのスタイルが定義されたApp.xaml

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  							xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  							x:Class="SL4_ImageTransitionShow.App" >
  <Application.Resources> 
  	<Style TargetType="Button">
  		<Setter Property="Template">
  			<Setter.Value>
  				<ControlTemplate TargetType="Button">
  					<Grid>
  						<Ellipse Fill="#FFF4F4F5" Stroke="Black"/>
  						<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
  					</Grid>
  				</ControlTemplate>
  			</Setter.Value>
  		</Setter>
  	</Style> 
  </Application.Resources>
</Application>