第3回 特殊効果（Radial Blur）を伴った畫像の切り替え

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

畫面上の[<]、[>]ボタンをクリックすると、Radial Blur特殊効果を伴って、畫像が前の畫像、次の畫像に切り替わります。クリックしたボタンには、現在の畫像の順番が表示されます。Radial Blurは、放射狀に伸びる光線のようにBlurを適用する効果です（図1）。

図1：ボタンクリックでRadial Blur特殊効果を伴って畫像が切り替わっている。ボタン上には現在の畫像の順番が表示されている（クリックで拡大）

今回のサンプルは以下よりダウンロードできます。
→　今回のサンプルファイル（13.0MB）

新規プロジェクトの作成

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

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

ソリューションエクスプローラー內にImageというフォルダを作成して、畫像も追加しておきます。また、畫像のファイル名を記録したリスト1のXMLファイルも追加しておきます。XMLデータはLINQ to XMLで処理するため、「プロジェクト(P)／參照の追加(F)」からSystem.Xml.Linqを追加しておきます。

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

リスト1　畫像ファイル名を記録したXMLファイル(Photo.xml)

1	<?xml version="1.0"?>

2

<畫像>

3

<情報>

4	<畫像名>おしろい花.jpg</畫像名>

5	<畫像名>サルビア.jpg</畫像名>

6	<畫像名>ベゴニア.jpg</畫像名>

7	～<畫像名></畫像名>繰り返し～

8

</情報>

9

</畫像>

Silverlightユーザーコントロール(ImageShowSilverlightControl.xaml)の作成

VS2010のメニューから「プロジェクト(P)／新しい項目の追加(W)」と選択し、「Silverlightユーザーコントロール」を作成します。「名前(N)」には「ImageShowSilverlightControl.xaml」と指定し、[追加(A)]ボタンをクリックします（図2）。

図2：Silverlightユーザーコントロールを作成する（クリックで拡大）

XAMLコード內の<UserControl>要素のWidthに680、Heightに520と指定します。ツールボックスからImageコントロールを1個配置します。プロパティの[レイアウト]パネルにあるWidthに640、Heightに480と指定します。これはImageフォルダに取り込んだjpg畫像の実寸サイズです。そして[可視性]パネルにあるOpacityプロパティに0を指定し、透明化しておきます。

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

Blend4でのTransitionEffectの設定

「狀態(S)」パネルの「狀態グループの追加」アイコンをクリックし（図3）、さらに「狀態の追加」アイコンをクリックします（図4）。

「●VisualState狀態 記録オン」に変わり、アートボード上の畫面全體が赤の枠線で囲まれます。この狀態でタイムラインの記録が可能になります。

「ImageTransitionShow」という名前を入力します（図5）。「タイムラインを表示する」アイコンをクリックして、タイムラインを表示します（図6）。

図3：「狀態(S)」パネルの「狀態グループの追加」アイコンをクリックする

図4：「狀態の追加」アイコンをクリックする

図5：「ImageTransitionShow」という名前を入力する（クリックで拡大）

図6：タイムラインを表示する（クリックで拡大）

狀態の作成

狀態を作成します。「オブジェクトとタイムライン(B)」內のImage1を選択します。

黃色の再生ヘッドが「0」の位置で、プロパティの[外観]パネルにあるOpacityの値に100を指定します。自動的に100％となりImageの透明化が解除されます （図7）。

図7：タイムラインを表示する（クリックで拡大）

次に、「切り替え効果の追加」をクリックします（図8）。

図8：「切り替え効果の追加」を選択する

表示される項目から、「★→ImageTransitionShow」を選択します（図9）。

図9：「★→ImageTransitionShow」を選択する（クリックで拡大）

fxアイコンをクリックするとTransitionEffectの一覧が表示されますので、Radial Blurを選択します。時間には1秒を指定します（図10）。

図10：TransitionEffectの一覧からRadial Blurを選択し、時間に1秒を指定する（クリックで拡大）

ここで、図10の「●ImageTransitionShow狀態記録オン」の●をクリックして、記録オフにします。

図4～図10の手順で、もうひとつ、ImageTransitionShow2という狀態を追加します。狀態の作成もImageTransitionShowの時と全く同じです。「狀態(S)」の中にImageTransitionShowとImageTransitionShow 2という2つの狀態が追加されることになります（図11）。

図11：ImageTransitionShowとImageTransitionShow 2という2つの狀態が追加された

TransitionEffectの設定は以上で終わりです。Blend4を終了しVS2010に戻ります。

Silverlightユーザーコントロール(ButtonSilverlightControl.xaml)の作成

VS2010のメニューから「プロジェクト(P)／新しい項目の追加(W)」と選択し、「Silverlightユーザーコントロール」を作成します。「名前(N)」には「ButtonSilverlightControl.xaml」と指定し、[追加(A)]ボタンをクリックします（図2參照）。

表示される、ButtonSilverlightControl.xamlの<UserControl>要素のWidthに800、Heightに600を指定します。ツールボックスからButtonコントロールを畫面の両脇に1個ずつ計2個配置します。プロパティのContentに<(小なり記號)、>(大なり記號)を指定します（図12）。

図12：Buttonコントロールを2個配置した（クリックで拡大）

ButtonSilverlightControl.xaml內にImageShowSilverlightControlを取り込む

まずlocalという名前空間を、ButtonSilverlightControl.xaml內の<UserControl>要素內で定義します。xmlns:local=””と入力すると、名前空間の値の一覧が表示されますので、現在作成しているプロジェクト名を選択します（図13）。

図13：localという名前空間を定義する（クリックで拡大）

次に、<Grid>要素內の<Button> 要素が2つ記述されている下に、<local:と入力します。するとImageSilverlightControlが表示されますので、これを選択します（図14）。x:NameにImageShowAreaと指定します。デザイン畫面に表示されるImageShowSilverlightControlの位置を2つのButtonの中央に配置します（図15）。

図14：<Grid>要素內にImageShowSilverlightControl を取り込む（クリックで拡大）

図15：取り込まれたImageShowSilverlightControl の位置を設定する（クリックで拡大）

1	<Grid x:Name="LayoutRoot" Background="White">

2

3	～<Button>要素コード略～

4

5	<local:ImageShowSilverlightControl x:Name="ImageShowArea" Margin="62,34,58,46"/>

6

</Grid>

上記コードを記述した際、local:ImageShowSilverlightControlに波線が表示される場合があります、その場合は「ソリューションのビルド」を実行してださい。デザイン畫面にもImageShowSilverlightControlの領域が表示されます。

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

Blend4でのGotoStateActionの設定

[アセット(T)]パネルから[ビヘイビアー]を選択し、GotoStateActionアクションを「オブジェクトとタイムライン(B)」內のButton1上にドラッグ&ドロップします。Button1の子としてGotoStateActionが追加されます（図16）。

図16：GotoStateActionをButton1上にドラッグ&ドロップする

Button1の子として追加されたGotoStateActionのプロパティを設定します。[トリガー]パネルにあるEventNameが「Click」になっているのを確認してください。[共通プロパティ]パネルにあるTargetNameの橫の[…]ボタンをクリックして、「要素の選択」畫面を表示し、ターゲットにする要素を選択します。ここではImageShowAreaを選択します（図17）。ImageShowAreaはlocal:ImageShowSilverlightControlに付けたx:Nameです。

図17：GotoStateActionのプロパティTargetNameにImageShowAreaを選択する

次に、StateNameに、Button1がクリックされた時、Radial Blur特殊効果を伴った狀態である、ImageTransitionShowを選択します（図18）。TargetNameを先に選択していなければ、StateNameの內容が表示されませんので、設定の順番に注意してください。

図18：Button1のGotoStateActionのプロパティであるStateNameにImageTransitionShowを選択する

同様に、Button2にも[ビヘイビアー]內のGotoStateActionをドラッグ&ドロップし、プロパティを設定します。この場合は、TargetName、StateNameもButton1の場合と同じです。

Blend4の設定を終了しVS2010に戻ります。

MainPage.xaml內にButtonSilverlightControlを取り込む

MainPage.xaml內にButtonSilverlightControl.xamlを取り込みます。<UserControl>要素のWidthに850、Heightに700と指定します。

図13と同じようにlocalという名前空間を宣言します。<Grid>要素內に<local:と入力して表示される、ButtonSilverlightControlを取り込みます(図19)。

図19：MainPage.xaml內にButtonSilverlightControl.xamlが取り込まれた（クリックで拡大）

ソリューションエクスプローラー內のButtonSilverlightControl.xamlを展開して表示される、ButtonSilverlightControl.xaml.vbをダブルクリックしてリスト2のコードを記述します。

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

リスト2　(ButtonSilverlightControl.xaml.vb)

01	Option Strict On

02	ImageコントロールのSourceプロパティに畫像を指定する際に必要なクラスの含まれる、System.Windows.Media.Imaging名前空間をインポートします。

03	また、XML文書ファイルをLINQで処理するクラスの含まれる、System.Xml.Linq名前空間もインポートしておきます。

04	Imports System.Windows.Media.Imaging

05	Imports System.Xml.Linq

06	Partial Public Class ButtonSilverlightControl

07	Inherits UserControl

08

09	Public Sub New()

10	InitializeComponent()

11

End Sub

12

13	文字列型の新しいリストとして、myImageListメンバ変數を宣言します。

14	Dim myImageList As New List(Of String)

15

16	畫像を指定する際のインデックスとなる、メンバ変數noを宣言します。

17	Dim no As Integer = 0

18

19	XElement型のコレクションに対する反復処理をサポートする列挙子として、queryをメンバ変數として宣言します。

20	Dim query As IEnumerable(Of XElement)

21	Dim ImageCount As Integer = 0

22

23	■ButtonSilverlightControlが読み込まれた時の処理

24	XElement.LoadメソッドでXML文書ファイル(Photo.xml)を読み込みます。

25	読み込んだXML文書から<畫像名>要素を選択するクエリを定義します。

26	<畫像名>要素の個數をCountプロパティで取得し、変數ImageCountに格納しておきます。

27	クエリ(query)を実行します。クエリに対して各要素を、変數 result に格納しながら、以下の処理を繰り返します。

28	文字列型のリストであるmyImageListにAddメソッドで<畫像名>要素の値を追加します。

29	Image1のOpacityを1に指定して透明化を解除し、SourceプロパティにmyImageListのインデックスが0番目の畫像(最初の畫像)を指定します。相対URIで指定します。ページが読み込まれた時、<畫像名>要素のインデックスが0番目の畫像が表示されています。

30	Private Sub ButtonSilverlightControl_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded

31	Dim xmldoc As XElement = XElement.Load("Photo.xml")

32	query = From c In xmldoc.Descendants("畫像名") Select c

33	ImageCount = query.Count

34	For Each result In query

35	myImageList.Add(result.Value)

36

Next

37	ImageShowArea.Image1.Opacity = 1

38	ImageShowArea.Image1.Source = New BitmapImage(New Uri("Image/" & myImageList(0), UriKind.Relative))

39

End Sub

40

41	■[>]ボタンがクリックされた時の処理

42	no の値が畫像の數を超えないよう Math.Min() 関數を用いています。

43	畫像を特殊効果を伴って表示するTransitionImageShowプロシージャを実行します。

44	ボタンがクリックされた時、現在の畫像の順番を、ボタンの表面に表示します。

45	Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button2.Click

46	Button1.Content = "<"

47	no = Math.Min(no + 1, ImageCount - 1)

48	TransitionImageShow()

49	Button2.Content = no + 1 & "/" & ImageCount

50

End Sub

51

52	■[<]ボタンがクリックされた時の処理。

53	Math.Max()関數を用いて、変數noの値が0より大きい場合は、noの値を減算します。

54	畫像を特殊効果を伴って表示するTransitionImageShowプロシージャを実行します。

55	ボタンがクリックされた時、現在の畫像の順番を、ボタンの表面に表示します。

56	Private Sub Button1_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button1.Click

57	Button2.Content = ">"

58	no = Math.Max(no - 1, 0)

59	TransitionImageShow()

60	Button1.Content = no + 1 & "/" & ImageCount

61

End Sub

62

End Class

63

64	■畫像を特殊効果を伴って表示する処理

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

66

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

68

69	ImageShowSilverlightControlユーザーコントロール內のImage1に、変數noに該當するmyImageList內の畫像を表示します。

70	Private Sub TransitionImageShow()

71	If ImageShowArea.VisualStateGroup.CurrentState Is Nothing = False AndAlso ImageShowArea.VisualStateGroup.CurrentState.Name.ToString = "ImageTransitionShow2" Then

72	VisualStateManager.GoToState(ImageShowArea, "ImageTransitionShow", True)

73

Else

74	VisualStateManager.GoToState(ImageShowArea, "ImageTransitionShow2", True)

75

End If

76	ImageShowArea.Image1.Source = New BitmapImage(New Uri("Image/" & myImageList(no), UriKind.Relative))

77

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

view sourceprint?

01	<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

02	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

03	x:Class="SL4_ImageTransitionShow.App" >

04	<Application.Resources>

05	<Style TargetType="Button">

06	<Setter Property="Template">

07	<Setter.Value>

08	<ControlTemplate TargetType="Button">

09

<Grid>

10	<Ellipse Fill="#FFF4F4F5" Stroke="Black"/>

11	<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

12

</Grid>

13	</ControlTemplate>

14	</Setter.Value>

15

</Setter>

16

</Style>

17	</Application.Resources>

18	</Application>