特殊効果（Radial Blur）を伴った画像の切り替え
まず初めに、このプログラムで実装する機能の動作を、下記に解説しておきます。
画面上の[]ボタンをクリックすると、Radial Blur特殊効果を伴って、画像が前の画像、次の画像に切り替わります。クリックしたボタンには、現在の画像の順番が表示されます。Radial Blurは、放射状に伸びる光線のようにBlurを適用する効果です（図1）。
|
|
| 図1：ボタンクリックでRadial Blur特殊効果を伴って画像が切り替わっている。ボタン上には現在の画像の順番が表示されている（クリックで拡大） |
サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。
新規プロジェクトの作成
早速サンプルを作っていきましょう。本稿では開発言語に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)
<?xml version="1.0"?> <画像> <情報> <画像名>おしろい花.jpg</画像名> <画像名>サルビア.jpg</画像名> <画像名>ベゴニア.jpg</画像名> ～<画像名></画像名>繰り返し～ </情報> </画像>
Silverlightユーザーコントロール(ImageShowSilverlightControl.xaml)の作成
VS2010のメニューから「プロジェクト(P)／新しい項目の追加(W)」と選択し、「Silverlightユーザーコントロール」を作成します。「名前(N)」には「ImageShowSilverlightControl.xaml」と指定し、[追加(A)]ボタンをクリックします（図2）。
|
|
| 図2：Silverlightユーザーコントロールを作成する（クリックで拡大） |
XAMLコード内の
次に、ソリューションエクスプローラー内の、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に戻ります。
「特殊効果（Radial Blur）を伴った画像の切り替え」サンプル
