第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>