PR

FlipViewコントロールを使ってタッチ操作で画像を切り替えるアプリを作る

2014年7月18日(金)
薬師寺 国安

はじめに

前回はユニバーサルアプリの第1歩として、とても簡単なサンプルを作成しました。ユニバーサルアプリ作成の流れはおおまかに理解していただけたと思います。

今回は、前回よりほんの少しだけ手の込んだものになりますが、FlipViewコントロールに画像を読み込み、タッチディスプレイ上でタッチ、スライドすることで画像が切り替わるユニバーサルアプリを作ってみましょう。

FlipViewコントロールを使ったユニバーサルアプリ

FlipViewコントロールは、項目のコレクションを1つずつ順にめくって表示できるようにするコントロールで、イメージギャラリーの表示等に適しています。

プロジェクトの作成

では、実際に作ってみましょう。VS2013を起動して、[ファイル]ー[新しいプロジェクト]と選択して、「新しいプロジェクト」の画面から「テンプレート」の「Visual C#」を展開して表示される「ユニバーサルアプリ」を選択します。
次に、右に表示されるテンプレートから「空のアプリケーション(ユニバーサルアプリ)」を選択します。「名前」には「FlipView」と指定し、「場所」には適当なフォルダーを指定します

「ソリューションエクスプローラー」内に「FlipView.Windows(Windows 8.1)」と「FlipView.WindowsPhone(Windows Phone 8.1)」の2つのプロジェクトと、FlipView.Sharedという共有プロジェクトが作成されます。

「FlipView.Windows(Windows 8.1)」内のMainPage.xamlをFlipView.Sharedの共有プロジェクトにドラッグ&ドロップします。
その後、「FlipView.Windows(Windows 8.1)」と「FlipView.WindowsPhone(Windows Phone 8.1)」内のMainPage.xamlは削除してください。

FlipView.Sharedを選択し、マウスの右クリックで表示されるメニューから[追加]−[新しいフォルダー]と選択して、Imagesというフォルダーを作成します。このImagesフォルダー内に、[追加]−[新しい項目]と選択して画像を追加しておきます。

XMLファイルの作成

また、追加した画像の一覧を記述したXMLファイルも作成します。FlipView.Sharedを選択し、マウスの右クリックで表示されるメニューから、[追加]ー[新しい項目]と選択します。

すると、図1のように「新しい項目の追加」画面が表示されますので、左から「データ」を選択し、表示されるテンプレートから「XMLファイル」を選択します。「名前」には「photo_etc.xml」と指定して[追加]ボタンをクリックします。

図1:XMLファイルを追加する(クリックで拡大)

XMLエディターが起動しますので、リスト1の構造のXMLを記述します。

リスト1 photo_etc.xml

<?xml version="1.0"?>
<画像>
  <情報>
    <画像名>銀杏.jpg</画像名>
    <説明>抜けるような青空に,銀杏の木が突き刺さっている。
          間もなくこの銀杏も黄金色に変わるだろう。
          そして落ちていく。人生もしかり。
    </説明>
  </情報>
  <情報>
    <画像名>枯れ木.jpg</画像名>
    <説明>生きていた証を鼓舞するように,
          枯れ木がその老いた身体をさらしている。
          春になれば,その老いた身体から,
          新しい生命の息吹が芽生えるだろう。
    </説明>
  </情報>
  ~<情報></情報>繰り返し~
</画像>

もし、読者の皆さんが自分の画像を追加する場合は、要素の中の画像ファイル名と、の内容を変更する必要があります。

FlipView.Sharedの共有プロジェクトは図2のようになります。

図2:FlipView.Shared共有プロジェクト内のファイル
Think IT会員限定特典
  • FlipViewコントロールを使った画像切り替えアプリ

    『ユニバーサルWindowsアプリ開発』 第3回のサンプルプログラムです。
薬師寺国安事務所

薬師寺国安事務所代表。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会員サービスの概要とメリットをチェック

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