Improve startup time for apps with GridView and ListView controls (XAML)

  • Article

To create each item in a GridView or ListView control, the Windows Runtime uses computing time and memory. Each item can consist of multiple elements for showing its state, including elements for things like selecting, hovering over, and focusing on an item. In Windows 8, all of these elements are created in advance, even if only a few of them are used. This results in longer startup time. In Windows 8.1, startup time is improved with the introduction of the GridViewItemPresenter and ListViewItemPresenter classes and the GoToElementStateCore method.

GridViewItemPresenter and ListViewItemPresenter

The GridViewItemPresenter class (for the GridView control) and the ListViewItemPresenter class (for the ListView control) create objects only as they're needed, and the objects perform better in Windows 8.1 than in Windows 8. Also, it's much easier to customize item state behavior with these classes in Windows 8.1 than it is in Windows 8.

To demonstrate, here's some Extensible Application Markup Language (XAML) markup for Windows 8.1 that removes the check mark that appears by default when an item is selected, and changes the background color of the selected item to orange.

<!-- ... -->
<GridView>
    <!-- ... -->
    <GridView.ItemContainerStyle>
        <Style TargetType="GridViewItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GridViewItem">
                        <GridViewItemPresenter
                            SelectionCheckMarkVisualEnabled="False"
                            SelectedBackground="Orange"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </GridView.ItemContainerStyle>
</GridView>
<!-- ... -->

Finding the correct two lines of XAML markup to use, SelectionCheckMarkVisualEnabled="False" and SelectedBackground="Orange", involves choosing from a list of about 25 available properties with self-describing property names.

In comparison, doing something similar in Windows 8 involves looking through more than 250 lines of generated XAML markup that is less descriptive, and either modifying the target markup in place or copying the target markup into your own XAML markup code and further modifying it there. Either approach is far more time consuming and error prone.

GoToElementStateCore

If you want to create a custom item template—for example, you want to change the default visual behavior of an item in a GridView or ListView control, such as changing the check mark of a selected item to a different shape—you can use the GoToElementStateCore method. This method can be used to add items to a hierarchy of visual elements that describe an item’s state for things like selection, hover, and focus behaviors. The GoToElementStateCore method enables per-state construction of these types of visual elements, rather than by loading XAML for all states at a control's startup. Using this method can result in better control startup when compared to creating a custom implementation.

For code that shows how to use the GoToElementStateCore method, see the XAML ListView and GridView essentials sample.

Load, store, and display large sets of data efficiently

Update GridView and ListView items incrementally

Minimize startup time