SHOEISHA iD

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

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

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

分割アプリケーションとグリッドアプリケーション

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

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

グリッドアプリケーション

 続いて「グリッドアプリケーション」を見てみます。「グリッドアプリケーション」は分割アプリケーションと比較して「グループ一覧」「グループ詳細」「アイテム詳細」とグループの詳細ページが加わった3画面構成のテンプレートです。

グループ一覧画面(GroupedItemsPage.xaml)
グループ一覧画面
グループ詳細画面(GroupDetailPage.xaml)
グループ詳細画面
アイテム詳細画面(ItemDetailPage.xaml)
アイテム詳細画面

 「Common」フォルダの中身などの構造は基本的に分割アプリケーションと同様なので、ここではグリッドアプリケーション特有の「FlipViewコントロール」と「RichTextColumnsコントロール」、そして最後にマニフェストファイル「Package.appxmanifest」を紹介します。

FlipViewコントロール

 FlipViewコントロールはグリッドアプリケーションのページ構成のうちの「アイテム詳細画面」で利用されています。アイテム詳細は同じグループの別のアイテムを画面をフリップ操作することで切り替えることができます。これがFlipViewコントロールです。

FlipViewのコード
<!--
    このページの残りは 1 つの大きな FlipView です。ここには、一度に
     1 つのアイテムの詳細が表示され、ユーザーは選択されたグループ内のすべてのアイテムを見ることが
    できます
-->
<FlipView
    x:Name="flipView"
    AutomationProperties.AutomationId="ItemsFlipView"
    AutomationProperties.Name="Item Details"
    TabIndex="1"
    Grid.RowSpan="2"
    ItemsSource="{Binding Source={StaticResource itemsViewSource}}">

    <FlipView.ItemContainerStyle>
        <Style TargetType="FlipViewItem">
            <Setter Property="Margin" Value="0,137,0,0"/>
        </Style>
    </FlipView.ItemContainerStyle>

    <FlipView.ItemTemplate>
        <DataTemplate>

            <!--
                表示状態管理をサポートしているため、テンプレート化されたアイテムとして選択された UserControl
                読み込まれた/アンロードされたイベントが、ページからのビューステートの更新を明示的に定期受信します
            -->

RichTextColumnsコントロール

 RichTextColumnsコントロールもアイテム詳細画面で利用されています。アイテム詳細画面の文章は複数の段組みで構成されています。この自動的に縦にいっぱいになった文章を右の段に移動させる仕組みがRichTextColumnsコントロールです。

 RichTextColumnsはCommonディレクトリのRichTextColumns.csに定義されています。

RichTextColumnsコントロールは自動で段を増やしてくれる
RichTextColumnsコントロールは自動で段を増やしてくれる

 Windowsストアアプリケーションは基本的に横にスクロールする画面構成が多いため、RichTextColumnsコントロールのような自動で横に増えていくコントロールは重宝します

 

Package.appxmanifest

 Windowsストアアプリケーションの構造の説明の最後に「Package.appxmanifest」を紹介します。このファイルではプロジェクトのタイル画像、スプラッシュスクリーン画像、コントラクトなどの機能の宣言、パッケージの情報などを定義する大事なファイルです。

  Package.appxmanifestは以下のタブを持ち、それぞれに割り当てられた項目の設定を行います。

  • アプリケーションUI
  • 機能
  • 宣言
  • パッケージ化

 それぞれの役割は以下の通りです。

アプリケーションUI

 アプリケーションのロゴ画像やタイルの設定、スプラッシュスクリーンの設定などを行うタブです。

アプリケーションUI
アプリケーションUI

機能

 アプリケーションが持つ機能をチェックするタブです。例えばカメラやマイクはこのタブにチェックを入れていないと使えません。

 ユーザーにはアプリケーションインストール時に「アプリが使用する項目」としてアプリケーションが要求する機能項目が提示されます。

機能
機能

宣言

 機能タブと似ていますが、コントラクトなどをアプリケーションが利用することを宣言するタブです(コントラクトについては後の投稿でじっくり説明する予定です)。

宣言
宣言

パッケージ化

 アプリケーションのパッケージ情報を記載するタブです。表示名、バージョン情報などはここに記載します。ストアで表示するロゴ画像はここで指定するので忘れないようにしましょう。

パッケージ化
パッケージ化

まとめ

 第1回の「新しいアプリケーション」に引き続いて、Windowsストアアプリケーションのデフォルトテンプレートの「分割アプリケーション」と「グリッドアプリケーション」を見てきました。これらのテンプレートにはWindowsストアアプリケーションの開発の基礎となる概念がたくさん使われています。

 データバインディングやVisualStateManager、Commonディレクトリに追加されたクラスなど。本記事では詳細に説明しきれないテーマがたくさん登場しました。これらのテーマの詳細は本記事を足掛かりにぜひ皆さんで確かめて、マスターしてください。

 次回以降、何回かにわたってWindowsストアアプリケーションの特徴的な機能を説明していきます。

修正履歴

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

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

もっと読む

この記事の著者

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

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

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6889 2012/12/03 17:35

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング