SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

速習 Windowsストアアプリケーション

Windowsストアアプリのメディアファイル操作の基礎

速習 Windowsストアアプリケーション 第7回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 Windows 8が発売され、タッチ操作向けのアプリケーションのストア「Windowsストア」がオープンしました。本記事ではその新しい「Windowsストア」向けのアプリケーションを開発するお手伝いをします。今回は、メディアファイルについて紹介していきます。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 Windowsストアアプリ(以下、ストアアプリ)はコンテンツに集中させるために、影(シャドウ)やグラデーションを用いないレイアウトが推奨されています。

 そのため装飾が少ない画面となり、映像や画像などのコンテンツの品質がストアアプリの品質に大きく影響します。今回は文字以外のコンテンツ、画像、動画、音声などのメディアファイルについて扱います。

 本記事はXAML+C#での開発を想定しています。

画像ファイル

 ストアアプリには、画像を扱うためのAPIが多数用意されています。

 今回は、その中から以下のAPIについての解説します。

  • 画面に画像を表示するためのImageコントロール。
  • 画像を含めてファイルを扱うためのStorageFileクラス。
  • ビットマップデータとして扱うためのBitmapImageクラス。
  • Imageコントロール以外のコントロールのブラシとして利用するためのImageBrushクラス。
  • ピクセルデータを操作するためのWriteableBitmapクラス。

Imageコントロール

 Imageコントロールは、画面に画像を表示するためのコントロールです。

Imageコントロールの表示サンプル
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Image HorizontalAlignment="Left" Height="225" Margin="273,252,0,0" VerticalAlignment="Top" Width="226" Source="Assets/icon.png"/>
</Grid>
Imageコントロールを配置
Imageコントロールを配置

 ImageコントロールのSourceプロパティで、画像を指定します。

 画像のパスの指定について、ストアアプリではアプリに埋め込まれた画像と、ストレージの画像で異なるので注意しましょう。

 ストアアプリに埋め込まれた(Assetsディレクトリ以下のファイルなど)を指定する方法は、下記のとおりです。

Imageコントロールの表示サンプル
<Image HorizontalAlignment="Left" Height="225" Margin="273,252,0,0" VerticalAlignment="Top" Width="226" Source="ms-appx:///Assets/icon.png"/>

 最初のコードの「Assets/icon.png」という指定は「ms-appx:///Assets/icon.png」の略式指定です。

 ストアアプリごとに固有のストレージ領域の画像の指定は、以下のように記述します。

Imageコントロールの表示サンプル
<Image HorizontalAlignment="Left" Height="225" Margin="273,252,0,0" VerticalAlignment="Top" Width="226" Source="ms-appdata:///local/sample.png"/>

 localの部分は一時ストレージの場合は「temp」、ローミングストレージの場合は「roaming」という記載になります。

Stretchプロパティ

 Imageコントロールで画像を表示する際、Imageコントロールと画像の縦横サイズが異なる場合に引き伸ばし方を指定するプロパティです。

 Stretchプロパティは以下の値を持ちます。

  • None:画像を引き延ばさずに表示します
  • Fill:Imageコントロールの幅に合わせるように表示します。元の画像とImageコントロールの縦横比が異なる場合は画像の比率が維持されず、Imageコントロールに合わせて変更されます。
  • Uniform:画像の比率を維持した状態で拡大します。
  • UniformToFill:画像の縦横比を維持したまま、Imageコントロールを埋めるように拡大します。Imageコントロールと画像の縦横比が異なる場合は、画像がはみ出します。はみ出した画像はクリッピング(切り取り)されます。
StretchをNoneに指定
StretchをNoneに指定
StretchをFillに指定
StretchをFillに指定
StretchをUniformに指定
StretchをUniformに指定
StretchをUniformToFillに指定
StretchをUniformToFillに指定

次のページ
StorageFile

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
速習 Windowsストアアプリケーション連載記事一覧

もっと読む

この記事の著者

西村 誠(ニシムラ マコト)

 Microsoft MVP Windows Platform Development。 Flash、PHPの開発経験もあり国産ECサイト構築フレームワーク「EC-CUBE」の公式エバンジェリストでもある。 ブログ:眠るシーラカンスと水底のプログラマー 著書:基礎から学ぶ Windowsストアアプリ開発

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7059 2013/03/26 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング