Using a WrapPanel in Conjunction with a ListBox

WrapPanel is useful to present a list of items using XAML. However, using a WrapPanel to present a bound list of values located in a viewmodel can be best achieved by supplanting the ItemsPanelTemplate of a ListBox with a WrapPanel.

This technique is demonstrated in the downloadable sample code. The WrapPanelViewModel class contains a list of strings, representing the numbers 1 to 5, which we use as the source collection for a ListBox control. The list of strings is generated using the LINQ Range and Select methods. See the following excerpt:

Click here to view code image

readonly IEnumerable<string> items
    = Enumerable.Range(1, 5).Select(x => x.ToString());

public IEnumerable<string> Items
{
    get
    {
        return items;
    }
}

The view contains a ListsBox with its ItemsSource property bound to the viewmodel’s Items property. We redefine the ItemsPanel of the ListBox and use a WrapPanel to host the child elements.

The ItemTemplate of the ListBox is also defined so that each item is presented in a TextBox, which is compatible with the custom WrapPanelItem template:

Click here to view code image

<ListBox ItemsSource="{Binding Items}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <toolkit:WrapPanel
              ItemHeight="120" ItemWidth="120" Height="280"
              Background="DimGray"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBox Text="{Binding}" Background="Blue"
            Style="{StaticResource WrapPanelItem}" />
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

You see in Figure 9.26, that each item in the list is presented in a similar manner as the statically defined items presented earlier in this section.

FIGURE 9.26 A WrapPanel is used to display the items in a ListBox.

Another example of presenting a list of items using a WrapPanel in conjunction with a ListBox can be found in Chapter 11, “Creating Expansive and Engaging Apps with the Pivot and Panorama.”