WPF listbox won't show images wrapped in multiple columns - wpf

Question

I am trying to get the content of a directory with many images displayed in a listbox wrapping the content horizontally, showing pics small and resizable. There's a sample on http://msdn.microsoft.com/en-us/library/ms771331%28v=vs.85%29.aspx which is doing just that, but it takes 10 seconds to build with 2500 pictures while I want it filled dynamically and also it uses thumbnails which do not always seem to be stored in images.
I've tried to add a VirtualizingStackPanel without any visible change and lots more and finally built a new program from a very basic sample, see below. This shows content immediatly, also when I apply a size converter, but I can in no way get it in multiple columns! It seems that the Microsoft example gets this done by adding a WrapPanel to the a style which targets the listbox, and the line IsItemsHost="True" apparently is crucial to getting the images in multiple columns. When I try the same in my sample (in PhotoListBoxStyle), the program doesn't even start anymore. When I rebuild the program as the Microsoft example but keep the code behind to arrange the binding, it is still fast, but the resizer stops working properly and it still uses 1 column.
What can I do to get the below code wrapped in multiple columns?
Dick
XAML:
<Window x:Class="PhotoData.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:PhotoData"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<local:UriToBitmapConverter x:Key="UriToBitmapConverter" />
<!-- Main photo catalog view -->
<Style TargetType="{x:Type ListBox}" x:Key="PhotoListBoxStyle">
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}" >
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<GroupBox Grid.Column="0" Grid.Row="1">
<ListBox Margin="10" Name="designerListBox" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal"
VerticalAlignment="Center"
HorizontalAlignment="Center"
IsItemsHost="True">
<Image Source="{Binding imageLocation, Converter={StaticResource UriToBitmapConverter}}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</GroupBox>
</Window>
Code behind:
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace PhotoData
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
List<binderClass> myList = new List<binderClass>();
foreach (string file in Directory.GetFiles(#"c:\temp", "*.jpg", SearchOption.AllDirectories))
{
myList.Add(new binderClass() { imageLocation = file, displayName = "TEST" });
Debug.WriteLine(file);
}
designerListBox.ItemsSource = myList;
}
}
public class UriToBitmapConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
BitmapImage bi = new BitmapImage();
bi.BeginInit();
bi.DecodePixelWidth = 100;
bi.CacheOption = BitmapCacheOption.OnLoad;
bi.UriSource = new Uri(value.ToString());
bi.EndInit();
return bi;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new Exception("The method or operation is not implemented.");
}
}
class binderClass
{
public string imageLocation
{
get;
set;
}
public string displayName
{
get;
set;
}
}
}

Answer 1

If you want to wrap content of ListBox then you need to change ListBox.ItemsPanel, which hosts all items, to be WrapPanel and then your ItemTemplate will be just Image:
<ListBox Name="designerListBox" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Image Width="100" Source="{Binding imageLocation, Converter={StaticResource UriToBitmapConverter}}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
StackPanel or VirtualizingStackPanel will never wrap content. It will stack child item horizontally or vertically.
EDIT
You may hit some performance issues, especially when working with images, when using panel different then VirtualizingStackPanel. Other panels don't provide virtualization so all items are treated as if they are visible and will be loaded immediately.
The standard layout system creates item containers and computes layout for each item associated with a list control. The word "virtualize" refers to a technique by which a subset of user interface (UI) elements are generated from a larger number of data items based on which items are visible on-screen. Generating many UI elements when only a few elements might be on the screen can adversely affect the performance of your application. The VirtualizingStackPanel calculates the number of visible items and works with the ItemContainerGenerator from an ItemsControl (such as ListBox or ListView) to create UI elements only for visible items.