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

2011年5月31日(火)
PROJECT KySS

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

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

3

図1:クリックした画像がX軸を中心に回転し、全てクリックすると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)。

3

図2:Gridの中にImageを配置し画像を読み込んだ(クリックで拡大)

次に、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)。

3

図3:Grid上に2個のImageと1個のToggleButtonを配置した(クリックで拡大)

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

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

Grid名 Grid内に配置されたコントロール
Grid(TopGrid) Image(SarubiaImage1) Sourceにサルビア_1.png
Image(NanohanaImage1) Sourceに菜の花_1.png
ToggleButton(TopToggleButton)
Grid(MidGrid) Image(SarubiaImage2) Sourceにサルビア_2.png
Image(NanohanaImage2) Sourceに菜の花_2.png
ToggleButton(MidToggleButton)
Grid(BottomGrid) Image(SarubiaImage3) Sourceにサルビア_3.png
Image(NanohanaImage3) Sourceに菜の花_3.png
ToggleButton(BottomToggleButton)

3

図4:3個のGrid上に、それぞれ2個のImageと1個のToggleButtonを配置し、Imageに画像を読み込んでいる(クリックで拡大)

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

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

(1)3個の<Grid>要素内に、<Image>要素が2個と、<ToggleButton>要素が1個配置されています。
~コード略~
<Grid x:Name="LayoutRoot" Background="White">
    <Grid Height="160" HorizontalAlignment="Left" Margin="68,54,0,0" Name="TopGrid" VerticalAlignment="Top" Width="640"> ■(1)
      <Image Height="160" HorizontalAlignment="Left" Name="SarubiaImage1" Stretch="Fill" VerticalAlignment="Top" Width="640" Source="/SL4_ImageFrontBackChange;component/Image/サルビア_1.png" />
      <Image Height="160" HorizontalAlignment="Left" Name="Image1" Stretch="Fill" VerticalAlignment="Top" Width="640" Source="/SL4_ImageFrontBackChange;component/Image/菜の花_1.png" />
      <ToggleButton Height="160" HorizontalAlignment="Left" Name="TopToggleButton" VerticalAlignment="Top" Width="640" Opacity="0" />
    </Grid>
    <Grid Height="160" HorizontalAlignment="Left" Margin="68,214,0,0" Name="MidGrid" VerticalAlignment="Top" Width="640"> ■(1)
      <Image Height="160" HorizontalAlignment="Left" Name="SarubiaImage2" Source="/SL4_ImageFrontBackChange;component/Image/サルビア_2.png" Stretch="Fill" VerticalAlignment="Top" Width="640" />
      <Image Height="160" HorizontalAlignment="Left" Name="NanohanaImage2" Source="/SL4_ImageFrontBackChange;component/Image/菜の花_2.png" Stretch="Fill" VerticalAlignment="Top" Width="640" />
      <ToggleButton Height="160" HorizontalAlignment="Left" Name="MidToggleButton" Opacity="0" VerticalAlignment="Top" Width="640" />
    </Grid>
    <Grid Height="160" HorizontalAlignment="Left" Margin="68,374,0,0" Name="BottomGrid" VerticalAlignment="Top" Width="640"> ■(1)
      <Image Height="160" HorizontalAlignment="Left" Name="SarubiaImage3" Source="/SL4_ImageFrontBackChange;component/Image/サルビア_3.png" Stretch="Fill" VerticalAlignment="Top" Width="640" />
      <Image Height="160" HorizontalAlignment="Left" Name="NanohanaImage3" Source="/SL4_ImageFrontBackChange;component/Image/菜の花_3.png" Stretch="Fill" VerticalAlignment="Top" Width="640" />
      <ToggleButton Height="160" HorizontalAlignment="Left" Name="BottomToggleButton" Opacity="0" VerticalAlignment="Top" Width="640" />
    </Grid>
  </Grid>
~コード略~

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

  • 「X軸を中心に画像が回転して入れ替わる」サンプルプログラム

四国のSOHO。薬師寺国安(VBプログラマ)と、薬師寺聖(デザイナ、エンジニア)によるコラボレーション・ユニット。1997年6月、Dynamic HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。最新刊は「Silverlight実践プログラミング」両名とも、Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。http://www.PROJECTKySS.NET/

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています