PR

ストーリーボードでアニメーションを実装する

2014年6月20日(金)
薬師寺 国安

VS2013をインストールすると「Blend for Microsoft Visual Studio 2013」(以下、Blend)が同時にインストールされます。Blendとは、XAMLで画面デザインをする上で利用できるツールです。このBlendはVS2013からも直接起動できるようになっています。VS2012当時は、Blendの機能が弱く、評判が決して良かったとは言えませんが、VS2013ではBehavior(特定のアクションやきっかけとなる動作で起こるオブジェクトの動作)も追加されて、機能アップが図られています。

今回は、VS2013のデザイン画面上に配置した画像を、Blendを使ってアニメーションで動かすサンプルを作成します。アニメーションを取り入れるとアプリの表現にも幅ができて、楽しくなること請け合いです。

今回もプロジェクトの作成から始めましょう。「名前」は「Aimation Sample」とします。

ソリューションエクスプローラー内にImagesというフォルダーを作成し、画像を取り込んでおきます(図1)。「GridViewコントロールの使い方」で解説した方法でXMLファイル(winter.xml)も作成しておきます(リスト1)。

図1 Imagesフォルダーに画像を追加した
図1 Imagesフォルダーに画像を追加した

リスト1 winter.xml

<?xml version="1.0" encoding="utf-8" ?>
<画像>
  <画像名>winter_01.png</画像名>
  <画像名>winter_02.png</画像名>
  <画像名>winter_03.png</画像名>
  <画像名>winter_04.png</画像名>
  <画像名>winter_05.png</画像名>
  <画像名>winter_06.png</画像名>
  <画像名>winter_07.png</画像名>
  <画像名>winter_08.png</画像名>
  <画像名>winter_09.png</画像名>
  <画像名>winter_10.png</画像名>
</画像>

では、次にMainPage.xamlを起動して、デザイン画面上に表1のコントロールを配置しましょう

表1 配置する主なコントロール

コントロール 名前 役割
ScrollViewer GridView内の画像を左右にスクロールする
GridView GridView1 画像を表示する
WrapPanel GridView内に収まり切らない画像を折り返して表示する
Image Image1 アニメーションを伴って表示させる画像

表1のWrapPanelはItemsPanelTemplateに指定するため、デザイン画面上には表示されません。ItemsPanelTemplateは、項目のレイアウトに使用されるパネルを指定するテンプレートです。また、WrapPanelはWindRT XAML Toolkitに含まれるコントロールで、VS2013に標準で付属しているコントロールではありません。ここまでの連載を読んできた読者であれば、VS2013にはWinRT XAML Toolkitがインストールされ、「ツールボックス」にもWinRT XAML Toolkitのコントロールを追加しているはずです。もし、WrapPanelコントロールが表示されない場合は過去の記事を参考にWinRT XAML Toolkitをインストールしておきましょう。

表1のコントロールをレイアウトすると図2のようになります。

図2 各コントロールをレイアウトした
図2 各コントロールをレイアウトした

このXAMLをリスト2のように編集します。

  • (1)Page.Resourcesプロパティ要素内にDataTemplate要素を配置し、このDataTemplateにKeyを使ってキー名を付けておく。ここではGridViewTemplateというキー名を付けた。
  • (2)DataTemplateの子要素として、Widthは256、Heightが192のImage要素を配置し、Sourceプロパティに「画像名」をデータバインドしておく。この「画像名」はVBコード内で定義されるプロパティ名だ。データバインドとは、アプリケーションのUI とビジネスロジックを関連付けるプロセスだ。バインディングが適切に設定されており、データが適切な通知を提供する場合、データの値が変更されると、データにバインドされている要素にその変更が自動的に反映される。
  • (3)ItemsTemplate要素を配置しキー名にGridViewItemsTemplateと付けておく。その子要素として、WinRT XAML ToolkitのコントロールであるWrapPanelコントロールを配置しておく。Widthは必ず指定する。大体GridViewのWidthに近い値を指定しておく。
  • (4)ViewBox要素を入れる。伸縮およびスケーリングを実行して単一の子を使用可能な領域全体に引き伸ばすことができるコンテンツ デコレータを定義する要素だ。これによって画面の解像度に応じてオブジェクトのサイズも調整されて表示されるようになる。
  • (5)ScrollViewer要素を配置し、その子要素として名前がGridView1というGridView要素を配置する。ItemTemplateプロパティにStaticResourceを使って(1)で定義したGridViewTemplateを参照し、ItemsPanelにStaticResourceを使って(3)で定義したGridViewItemsTemplateを参照している。
  • (6)アニメーションを伴って画像が表示されるImage要素を配置する。最初は非表示としておく。

リスト2 編集されたXAML(MainPage.xaml)

<Page xmlns:Controls="using:WinRTXamlToolkit.Controls"
    x:Class="Animation_Sample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Animation_Sample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>■(1)
        <DataTemplate x:Key="GridViewTemplate">■(1)
            <Image Width="256" Height="192" Source="{Binding 画像名}"/>■(2)
        </DataTemplate>■(1)

        <ItemsPanelTemplate x:Key="GridViewItemsTemplate">■(3)
            <Controls:WrapPanel Width="1300"/>■(3)
        </ItemsPanelTemplate>■(3)
    </Page.Resources>■(1)
    <Viewbox>■(4)
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ScrollViewer HorizontalAlignment="Left" Height="758" Margin="10,10,0,0" VerticalAlignment="Top" Width="1356">
                <GridView Height="709" Width="1328" x:Name="GridView1" ItemTemplate="{StaticResource GridViewTemplate}" ItemsPanel="{StaticResource GridViewItemsTemplate}"/>■(5)
            </ScrollViewer>
         <Image x:Name="Image1" Width="80" Height="60" Visibility="Collapsed"/>■(6)
    </Grid>
    </Viewbox>■(4)
  </Page>

では、次にGridViewに画像の一覧を表示させるコードを記述しましょう。ソリューションエクスプローラーからMainPage.xamlを展開して、MainPage.xaml.vbをダブルクリックします。

Think IT会員限定特典
  • 選択した画像がアニメーションを伴って表示されるプログラム

    『Windows ストア アプリ 100行プログラミング』 第8回のサンプルプログラムです。
薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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