画像のドラッグ、移動、回転、拡大縮小を行う+1つのサンプル

2013年3月8日(金)
薬師寺 国安

それでは、続けて2つ目のサンプルを紹介します。

文字をアニメーション表示させる

このサンプルでは、画面上の[実行]ボタンをクリックすると、文字がアニメーションを伴って、ゆらり、ゆらりと表示され、消えていく動きを実現します(図3)。画面にちょっとした変化を持たせるのに便利なコントロールといえるでしょう。

図3:島崎藤村の詩の一節が、画面上をゆらり、ゆらりと表示されて消えていきます(クリックで拡大)

実際に動かした動画は下記のようになります。Windows Store Applicationの動画を撮るアプリケーションが存在していませんので、スマホで撮った動画です。見難い点はご了承願います。

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

プロジェクトの作成

VS 2012のメニューから[ファイル(F)/新規作成(N)/プロジェクト(P)]と選択します。次に、「テンプレート」から「Windows ストア」を選択し、右に表示される項目名から「新しいアプリケーション(XAML)」を選択します。「名前(N)」に任意のプロジェクト名を指定します。ここでは「Win8_WinRTXamlToolkit_CascadingTextBlock」という名前を付けています。

NuGetパッケージの管理

今回はCodePlexで公開されている、WinRT XAML Toolkitに含まれているコントロールを使用します。WinRT XAML Toolkitについては下記のURLを参照してください。WinRT XAML Toolkitはよくバージョンアップされますので、常に新しいバージョンをインストールしておくことをお勧めします。
→  WinRT XAML Toolkit

WinRT XAML Toolkitをインストールするには、ソリューションエクスプローラー内の「すべてのファイルを表示」して、表示された「参照設定」の上でマウスの右クリックをします。「NuGetパッケージの管理(N)」が表示されます(図4)。

図4:「NuGetパッケージの管理(N)」を表示する(クリックで拡大)

表示される画面の左に表示されている、「オンライン」を選択し、検索欄にWinRTXAMLToolkitと入力します。するとWinRT XAML Toolkitの〔インストール(I)〕画面が表示されますので(図5)、インストールをクリックします。

図5:「NuGetパッケージの管理(N)」からWinRT XAML Tookitをインストールする(クリックで拡大)

インストールが成功するとインストール済みのチェックアイコンが表示されます(図6)。

図6:インストール済みのチェックアイコンが表示される(クリックで拡大)

[閉じる]ボタンをクリックして画面を閉じます。ソリューションエクスプローラー内の「参照設定」を見るとWinRTXAMLToolkitが追加されています。同時にWinRTXAMLTookitの情報が記述された、packages.configも作成されます(図7)。もし、WinRT XAML Toolkitを削除して、再度「NuGetの管理(N)」からインストールしようとしても、このpackages.configが存在していると、インストール済みとなってしまいますので、このファイルも削除する必要があります。

図7:WinRT XAML Toolkitがインストールされた(クリックで拡大)

コントロールの配置

コントロールを配置する前に、ツールボックスにWinRT XAML Toolkitに含まれているコントロールを追加しておきましょう。ツールボックスの「コモンXAMLコントロール」のタブ上でマウスの右クリックすると、「アイテムの選択(I)」が表示されますので、これをクリックします(図8)。

図8:ツールボックスから「アイテムの選択(I)」を表示する(クリックで拡大)

「ツールボックスアイテムの選択」画面が表示されますので、[参照(B)]ボタンをクリック、現在作成しているプロジェクトフォルダー内に作成されている、packagesフォルダーを展開していきます。

プロジェクトフォルダー
\Win8_WinRTXamlToolkit_CascadingTextBlock\packages\winrtxamltoolkit.1.2.0\lib\winrt45
と辿るとWinRTXAMLToolkit.dllが表示されますので、これを選択して〔開く(O)〕をクリックします。
(※\winrtxamltoolkit.1.2.0\の部分はインストールしたWinRT Xaml Toolkitのバージョンによって数値が変わります)

するとWinRT XAML Toolkitに含まれるコントロールが表示されチェックが付きますので、〔OK〕ボタンで閉じます(図9)。このpackagesフォルダーはソリューションエクスプローラー上には表示されていません。

図9:WinRT XAML Toolkitに含まれるコントロールが表示された(クリックで拡大)

ツールボックスの「コモンXAMLコントロール」内にWinRT XAML Toolkitのコントロールが表示されます(図10)。

図10:ツールボックスにWinRT XAML Toolkitに含まれるコントロールが表示された(クリックで拡大)

※これらのすべてのコントロールが使えるわけではありません。中にはInputDialogのようにエラーになるコントロールも複数あるようですので、ご自身の責任においてご使用ください。

ツールボックスからデザイン画面上にWinRT XAML ToolkitのCascadingTextBlockコントロールを1個、Buttonコントロールを1個配置します。WinRT XAML Toolkitのコントロールを配置すると、自動的にControlsという名前空間が追加されます。コントロールの接頭辞にもControlsが追加されます。

  • 画像のドラッグ、移動、回転、拡大縮小を行うWindowsアプリサンプル

  • 文字をアニメーション表示させるWindowsアプリサンプル

薬師寺国安事務所

薬師寺国安事務所代表。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 Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

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

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