Freigeben über

Windows 8 ストアアプリテンプレート - Basic Photo紹介

  • Artikel

Basic Photo テンプレートの解説です。

準備は、こちらを参照してください。
https://blogs.msdn.com/b/hirosho/archive/2012/09/09/apptemplateforwin8storeapp_5f00_intro.aspx

このテンプレートは、Visual Studio 2012がデフォルトで提供しているVisual C#のWindowsストアテンプレートのグリッドアプリテンプレートを基に作っています。グリッドアプリテンプレートで作成したプロジェクトに、

  • アイテムテンプレートの検索を追加
  • 検索時の検索ロジック（SearchResultsPage.xaml.cs）を追加
  • アイテムテンプレートの共有ターゲットを追加
  • ItemDetailPage.xaml.csに共有ソースロジック（OnDataRequestedメソッド）を追加
  • GroupedItemsPageにSemanticZoomを追加
  • App.xaml.csで設定チャームのヘルプとプライバシーポリシーの表示を追加
  • ヘルプページ（HelpPage.xaml）を追加

等の追加を行っています。元々のグリッドテンプレートで作られたページのデザインはいじっていないので、Snap表示も含め、デザインガイドラインに従った表示になっています。

各アプリ向けには、各画面の背景をアプリのフレーバーに即した背景色や画像への変更を行ってください。
以下、カスタマイズのポイントをいくつか紹介していきます。

固定画像の埋め込み

表示されている画像は、プロジェクトのAssetsフォルダーに格納されています。表示するグループ化された画像が固定的な場合は、一式をAssetsフォルダーに追加してください。エクスプローラーで画像が格納されたフォルダーを開き、追加したい画像を選択し、Visual Studio 2012のソリューションビューのAssetsフォルダーにドラッグ＆ドロップすれば、プロジェクトに画像が追加されます。
F5実行で表示される画像群とグループ-項目の構成は、DataModelフォルダーのSampleDataSource.csのSampleDataSourceクラスのコンストラクターで実装されています（260行目付近）。この辺りのコードは、一目瞭然ですね。画像は、Assets/XXX.png等で指定されているので、そこを書き換えればOKです。

SampleDataGroupがグループの名前や画像を保持するクラスです。コンストラクタの引数は順番に

  • 識別子
    デフォルトでは文字列。GUID等でも可。キーとして使われ表示には使われない。
  • タイトル
    GroupedItemsPage、GroupDetailPage、ItemDetailPageのグループ名表示に使われる
  • サブタイトル
    GroupDetailPageのサブタイトル表示に使われる
  • コメント
    GroupDetailPageのGroup Descriptionで表示される文字列

です。アプリ向けに変えていきましょう。

SampleDataItemがグループに所属する項目の名前や画像を保持するクラスです。コンストラクタの引数は順番に

  • 識別子
    デフォルトでは文字列。GUID等でも可。キーとして使われ表示には使われない。
  • タイトル
    GroupedItemsPage、GroupDetailPage、ItemDetailPageのアイテム名表示に使われる。
  • サブタイトル
    GroupDetailPage、ItemDetailPageの各項目表示のアイテムのサブタイトルとして表示される。
  • コメント
    ItemDetailPageの詳細説明で使われる。

です。アプリ向けに変えていきましょう。作りたいアプリ向けに表示項目を追加したい場合は、SampleDataSource.csのSampleDataItemクラスにプロパティを追加します。たとえば”撮影者名”を追加したければ、

    private string _photographer;
public string Photographer
{
get { return this._photographer; }
set { this.SetProperty(ref this._photographer, value); }
}

といったように追加していきます。プロパティを新たに追加したら、SampleDataSourceのコンストラクタでのプロパティ値設定を忘れずに。

ネット上の画像を埋め込む

場合によっては、ネット上の画像を表示したい場合もあるでしょう。たとえば、

https://twimg0-a.akamaihd.net/profile_images/2247770464/MyFaceWFTrim.png

をアプリで表示したい場合（私のTwitter（@embedded_george)のアイコンですが何か？w）、SampleDataSourceのコンストラクタの中の

            group1.Items.Add(new SampleDataItem("Group-1-Item-1",
"Item Title: 1",
"Item Subtitle: 1",
"https://twimg0-a.akamaihd.net/profile_images/2247770464/MyFaceWFTrim.png",
"Item Description: Pellentesque porta, mauris quis interdum vehicula, urna sapien ultrices velit, nec venenatis dui odio in augue. Cras posuere, enim a cursus convallis, neque turpis malesuada erat, ut adipiscing neque tortor ac erat.",
ITEM_CONTENT,
group1));

といったように、画像の”Assets/XXX.png”の部分をURLに変更するだけで、ネット上の画像を表示することも可能です。

アプリによっては、グループ自体、グループに属する項目を都度条件に従って、ネットなどの情報から変えたい場合もあるでしょう。そんな場合の修正方法はまた別のポストで説明の予定です。画像については、ここで示した応用で色々とできるはずなので試してみてください。

ItemDetailPage表示の修正

このアプリのトップページと、グループ表示のページは、色合いやデザインをちょっといじれば、それなりの感じになります。XAMLでのスタイル定義を使ってうまくやってください。
ItemDetailPageは各アプリでかなり表示内容が変わると思われます。先ほど紹介したSampleDataItemにプロパティを追加した時などは、表示も変えないといけませんね。
ItemDetailPageは、FlipViewになっています。同一グループに属したアイテム群を切り替えて表示（左右にスライドさせることができる）できるようになっています。このFlipViewの中身ですが、ItemDetailPage.xamlの69行目あたりから始まっているRichTextColumnsタグで各アイテムの表示内容が定義されています。RichTextColumns自体は、CommonフォルダーのRichTextColumns.csファイルで定義されたコントロールです。複数の一連の項目を左から右へカラム形式でフロー的に表示する部品になっています。デフォルトでは、タイトル、サブタイトル、画像、コンテントの順番で表示されています。表示項目を増やしたい場合は、たとえば、先ほどのPhotographerを追加したとすれば、80行目と81行目の間に

                                    <Paragraph>
<Run FontWeight="SemiLight" Text="{Binding Photographer}"/>
<LineBreak/>
<LineBreak/>
</Paragraph>

と追加してあげれば、SampleDataItemのPhotographerプロパティに格納された値が表示されます。<Run/>は、RichTextColumnsの1カラムで文字列が適切に折り返す表示がなされる部品です。<LineBreak/>は改行を指定する部品です。

カラムの幅は、89行目のRichTextBlockOverflowのWidth属性を変えれば変更できるので整えてください。

以上、簡単に修正ポイントを紹介してきました。アプリの構想を練る時は、Entertainment Photoアプリテンプレートで作ったアプリを使ってみてください。アプリを作って、集めた画像を適宜追加して表示してみます。Entertainment Photoテンプレートは、Basic Photoアプリテンプレートの可変版なので、色々と画像を集めてみて試してみた後、Basic Photoアプリテンプレートで画像を固定するとよいでしょう。

皆さん、是非トライしてみてくださいね。