GridView でアイテムを横に並べる

初期配置では GridView のアイテムは縦に並んでいますが横に並べることもできます。
gridview_vertical
通常↑のように並んでいるのを↓のようにしたい。
gridview_horizontal

(確認用のサンプルデータの都合上)新規プロジェクト「グリッド アプリケーション」を作成。
GroupedItemsPage.xaml に用意されている GridView で
GroupStyle.Panel の VariableSizedWrapGrid を調整すれば実現できます。

<GridView ...>
    ...
    <GridView.GroupStyle>
        <GroupStyle>
            <GroupStyle.Panel>
                <ItemsPanelTemplate>
                    <!--<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>--><!-- 変更前 -->
                    <VariableSizedWrapGrid Margin="0,0,80,0"
                        Orientation="Horizontal" MaximumRowsOrColumns="3"/><!-- 変更後 -->
                </ItemsPanelTemplate>
            </GroupStyle.Panel>
        </GroupStyle>
    </GridView.GroupStyle>
</GridView>

グループもアイテムも横だとアイテムを横にいくつ表示すればいいか分からないので
MaximumRowsOrColumns の指定が必要。指定しないとアイテムが全て横1列に並びます。


というのを Twitter で @shinji_japan さんに教えてもらいました。
忘れないようにメモ。


カテゴリー: Windows ストア アプリ タグ: , パーマリンク