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

投稿日: 2013年11月5日作成者: snowcait

初期配置では GridView のアイテムは縦に並んでいますが横に並べることもできます。

通常↑のように並んでいるのを↓のようにしたい。

（確認用のサンプルデータの都合上）新規プロジェクト「グリッドアプリケーション」を作成。
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 ストアアプリタグ: GridView, XAML パーマリンク