X軸を中心に画像が回転して入れ替わる

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

画面に表示された、3分割された画像の1枚をクリックすると、クリックされた画像がX軸を中心に回転し、全てクリックすると、最初の画像とは異なった1枚の画像になります（図1）。

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

新規プロジェクトの作成

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

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

ソリューションエクスプローラー内にImageというフォルダーを作成し、2種類の分割された6枚の画像を追加しておきます。

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

コントロールの配置

要素のWidthに800、Heightに600と指定します。ツールボックスからGridコントロールを配置します。Widthに640、Heightに160と指定します。「名前」にはTopGridと指定します。ImageコントロールをGridと同じ幅と高さで配置します。「名前」にはSarubiaImage1としています。プロパティの[共通]パネルにあるSourceに、Imageフォルダー内の「サルビア_1.png」を指定します（図2）。

次に、SarubiaImage1の上に同じサイズのImageコントロールを配置します。「名前」はNanohanaImage1とします。SourceプロパティにImageフォルダー内の「菜の花_1.png」を指定します。NanohanaImage1の上に同じサイズのToggleButtonコントロールを配置します。ToggleButtonがツールボックスに登録されていない場合は、「コモンSilverlightコントロール」または「すべてのSilverlightコントロール」のペイン上で、マウスの右クリックで表示されるメニューの、「アイテムの選択(I)」から、ToggleButtonにチェックを付けてください。ToggleButtonのプロパティの[可視性]パネルにあるOpacityに0を指定して透明化しておきます。ToggleButtonの「名前」はTopToggleButtonとしておきます。

TopGridコントロール上には、Imageが2個とToggleButtonの計3個のコントロールが配置されることになります（図3）。

表1を参考にGrid（TopGrid）と同じサイズのGridコントロールをあと2個配置し、その中にImageを2個とToggleButtonを1個配置します。ImageにはSourceプロパティで画像を指定しておいてください。全て設定すると図4のようになります。「菜の花」の背後には「サルビア」の画像が配置されています。「菜の花」の画像上には透明化されたToggleButtonが配置されています。Grid内に配置されるコントロールの一覧は表1を参照してください。

表1　Grid内に配置されたコントロール

書き出されるXAMLはリスト1のようになります。

リスト1　書き出されたXAMLコード(MainPage.xaml)

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