ItemsControl and Templates

Analogy categoryAnalogies

ItemsControl and ItemsSource

ItemsControl is the base class for any XAML control that displays a collection of items — ListBox, ComboBox, ListView, and TreeView all derive from it. Binding ItemsSource to an IEnumerable (commonly an ObservableCollection<T>) tells the control what data to render, while the control itself generates one container (like a ListBoxItem) per data item automatically.

🏏

Cricket analogy: ItemsControl is like a scoreboard operator who receives the full list of batsmen from the scorer's collection and automatically creates a new scoreboard slot for each name, without anyone manually writing each entry by hand.

ItemTemplate: Shaping Each Row

ItemTemplate is a DataTemplate applied to every item in the collection, defining how a single data object is visually represented — for instance turning a Product object into a row showing its thumbnail, name, and price. Without an ItemTemplate, ItemsControl falls back to calling ToString() on each item, the same fallback ContentControl uses for its Content.

🏏

Cricket analogy: ItemTemplate is like the standard player-card design a broadcaster reuses for every batsman shown on screen — photo, name, and strike rate laid out identically — instead of just flashing each player's plain database ID.

ItemsPanelTemplate: Changing the Arrangement

By default, ItemsControl arranges its generated item containers in a vertical StackPanel, but ItemsPanelTemplate lets you swap that arrangement for any other panel — a WrapPanel for a photo gallery, a Grid for a calendar, or a Canvas for a custom diagram — without touching how individual items are templated. This separation between 'how each item looks' (ItemTemplate) and 'how items are arranged as a group' (ItemsPanelTemplate) is one of the most powerful ideas in XAML's data-driven UI model.

🏏

Cricket analogy: ItemsPanelTemplate is like keeping the same player-card design but changing how the pavilion arranges those cards — a single line for a batting order, or a grid for a squad photo wall — without redesigning each individual card.

Container Generation and Virtualization

For large collections, VirtualizingStackPanel (the default items panel in many ListBox templates) only generates UI containers for items currently scrolled into view, recycling containers as the user scrolls instead of materializing thousands of ListBoxItem objects up front. This container virtualization is critical for performance when binding ItemsSource to collections with hundreds or thousands of entries.

🏏

Cricket analogy: Container virtualization is like a stadium only printing scoreboard cards for the batsmen currently visible on the big screen, recycling old cards as new ones scroll into view instead of pre-printing a card for every player in domestic cricket history.

xml

<ListBox ItemsSource="{Binding Products}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Width="120" Margin="4">
                <Image Source="{Binding Thumbnail}" Height="80"/>
                <TextBlock Text="{Binding Name}" FontWeight="Bold"/>
                <TextBlock Text="{Binding Price, StringFormat=C}"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

ItemTemplate and ItemsPanelTemplate are independent: changing how each row looks never requires touching how rows are arranged as a group, and vice versa — that separation is what makes the same DataTemplate reusable across a ListBox, a WrapPanel-based gallery, or a Grid-based calendar.

Setting VirtualizingPanel.IsVirtualizing="False" (or swapping the ItemsPanel for a non-virtualizing panel like a plain WrapPanel on a large ListBox) forces every item container to be generated immediately, which can freeze the UI when binding to collections with thousands of entries.

ItemsControl is the base class for any control that renders a collection, binding data via ItemsSource.
ItemsControl generates one container (e.g., ListBoxItem) per data item automatically.
ItemTemplate defines how each individual data item is visually represented; without it, ToString() is used.
ItemsPanelTemplate controls how the generated item containers are arranged as a group, independent of ItemTemplate.
The default items panel is a vertical StackPanel, but it can be swapped for WrapPanel, Grid, Canvas, or others.
VirtualizingStackPanel generates containers only for visible items, recycling them as the user scrolls.
Disabling virtualization on large collections can cause severe performance problems.