SHOEISHA iD

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

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

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

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

Windowsストアアプリの画面構成部品、コントロール

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

リスト系コントロール

 リスト系コントロールは、複数のデータを一覧表示するためのコントロールです。

 画面に収まるように表示する個数を調整し、収まらない場合はスクロールを表示してくれるので複数のデータを表示する際に重宝します。

 リスト表示を行うコントロールには、GridViewListViewがあります。

 Windowsストアアプリケーションでは、リスト表示を行うためにデータの集合(コレクション)をデータバインドする場面がよく見受けられます。例えば、コレクションの処理、データバインディング、そして一つ一つのデータを表示するスタイル=データテンプレートです。そのため、リスト系コントロールを利用するには、マスターすべき概念がたくさんあります。

 リスト系の処理については後日しっかり解説しようと思います。

GridView

 GridViewは、グリッド(格子)状にデータの集合を表示できるコントロールです。

GridViewの表示
GridViewの表示

 表示するそれぞれのデータは、DataTemplateで定義します。

 以下のコードは、実際にストアに公開されているアプリのソースコードの一部です。GridViewタグの子要素としてDataTemplateを定義しています。このDataTemplateの中身が、一つ一つのデータを表示するコントロールのレイアウトを示しています。

GridViewのコード
<GridView
    Grid.Row="3"
    ItemsSource="{Binding Path=products}"
    SelectionMode="None"
    IsItemClickEnabled="True"
    ItemClick="productItemClick" Margin="100,0,0,0"
>
    <GridView.ItemTemplate>
        <DataTemplate>
            <Grid HorizontalAlignment="Left" Width="212" Height="220">
                <Grid.Background>
                    <ImageBrush ImageSource="../Assets/bg/itemListBg.gif"/>
                </Grid.Background>
                <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Margin="8">
                    <Image Source="{Binding image}" Stretch="UniformToFill" ImageOpened="imageOpened"/>
                </Border>

ListView

 ListViewは、GridViewと同じくデータのコレクションを表示するコントロールです。GridVeiwと違い、データを縦に一列に表示することができます。

 このためListViewは、スナップ状態で細長く表示されているときに、縦にスクロールしながらデータを表示するのに適しています。

ListViewの表示
ListViewの表示
コラム:List系のコントロールは難しい?

 XAMLを用いたWindowsストアアプリケーションではList系のコントロールは入門者にとって習得が難しいコントロールのトップクラスだと思っています。

 リスト表示するデータはコレクションをバインドする必要があり、リストの一つ1つはテンプレートで定義する必要があります。逆に言うと、リスト系のコントロールを使いこなせればXAML入門者卒業といえると思います。

次のページ
広告

修正履歴

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

速習 Windowsストアアプリケーション連載記事一覧

もっと読む

この記事の著者

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

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

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

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

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/6914 2012/12/21 14:00

イベント

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

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

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

メールバックナンバー