TransitionEffectによる特殊効果を伴った画像表示

今回はExpression Blend 4（以下Blend4）に実装されているTransitionEffectを使って、画像に対して特殊効果を持たす処理を全5回に亘って解説します。

筆者の環境は、Windows 7 Professional 32ビット+ SP1、Visual Studio 2010 Ultimate + SP1です。

Windows 7のService Pack 1は下記URLよりダウンロードできます。
→　Windows 7 および Windows Server 2008 R2 Service Pack 1

Visual Studio 2010のService Pack 1は下記URLよりダウンロードできます。
→　Microsoft Visual Studio 2010 Service Pack 1

以上を必要に応じてインストールしてください。

第1回は、TransitionEffectを使って、特殊効果を伴って画像を表示するサンプルの紹介です。用意されているTransitionEffectは以下の11種類です。

今回は、この中からBlinds、SmoothSwirlGrid、Waveの3つのTransitionEffectを実装してみます。そのほかの特殊効果についても、設定の手順は今回解説するものと同じですので、各自が設定して動作を確認してみると良いでしょう。

画面に表示されているボタンをクリックすると、ボタンに該当するTransitionEffectのかかった画像が表示されます（図1）。

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

新規プロジェクトの作成

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

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

ソリューションエクスプローラー内にImageというフォルダを作成して、3枚の画像も追加しておきます。ダウンロードされたサンプル・ファイルには画像は追加済みです。

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

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

XAMLコード内の要素のWidthに800、Heightに600と指定します。ツールボックスからImageコントロールを3個配置します。プロパティの[レイアウト]を展開して表示されるWidthに640、Heightに480と指定します。Imageフォルダに取り込んだjpg画像の実寸のサイズです。これら3枚のImageコントロールを同じ位置に重ねてください。配置した各Imageコントロールのプロパティの[共通]内にあるSourceプロパティに、Imageフォルダ内に取り込んだ画像を指定し、[可視性]のOpacityに0を指定します。Sourceプロパティに指定した画像が透明化され画面上では見えなくなります。XAMLコードはリスト１のように書き出されます。

リスト１　書き出されたXAMLコード（TransitionEffectImageShow.xaml）

<UserControl x:Class="SL4_TransitionEffect.TransitionEffectImageShow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  d:DesignHeight="300" d:DesignWidth="400" Width="800" Height="600">
  
（１）各<Image>要素のSourceプロパティに画像が指定され、Opacityプロパティには0が指定されている。
  <Grid x:Name="LayoutRoot" Background="White">
  <Image Height="480" HorizontalAlignment="Left" Margin="79,46,0,0" Name="Image1" Stretch="Fill" VerticalAlignment="Top" Width="640" Source="/SL4_TransitionEffect;component/Image/ポピー.jpg" Opacity="0" />　■（１）
  <Image Height="480" HorizontalAlignment="Left" Margin="79,46,0,0" Name="Image2" Stretch="Fill" VerticalAlignment="Top" Width="640" Source="/SL4_TransitionEffect;component/Image/菜の花.jpg" Opacity="0" />　■（１）
  <Image Height="480" HorizontalAlignment="Left" Margin="79,46,0,0" Name="Image3" Stretch="Fill" VerticalAlignment="Top" Width="640" Source="/SL4_TransitionEffect;component/Image/桜.jpg" Opacity="0" />　■（１）
  </Grid>
  </UserControl>

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

Blend4でのTransitionEffectの設定

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

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

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