ピクセル単位で仮想化するパネル ItemsWrapGrid & ItemsStackPanel

Windows ランタイムアプリの特定のパネルには、画面に表示されている領域だけ UI 項目を生成したり使いまわしたりして、使用メモリの削減やスクロール動作を高速化する「仮想化」という仕組みが用意されています

f:id:matatabi_ux:20140802100931p:plain

次の GridView は ItemsPanel（ItemsContainer を並べていくパネル）に StackPanel を指定しています

        <GridView x:Name="gridView" Grid.Row="1">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Image Margin="0,0,70,0" Source="Assets/cat_was_seen.jpg" />
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>

StackPanel には仮想化の仕組みがないため、ItemsSource に設定したデータの件数だけ、ItemsContainer （とその内部の Image コントロール）を生成しようとします

一方、次の GridView は ItemsPanel に ItemsStackPanel を指定しています

        <GridView x:Name="gridView" Grid.Row="1">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsStackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Image Margin="0,0,70,0" Source="Assets/cat_was_seen.jpg" />
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>