Question

I have a listbox and it’s bound to a list of simple objects. As we know the listbox by default has it’s items host as a Stackpanel and so it lays out items in this fashion

item1
item2
item3
item4
item5
item6

However i have some conditions through which i check whether the item is to be displayed horizontally or vertically and therefore the items could be laid out in this fashion

Eg :-

item1
item2
item3 item4 item 5
item6

How is it possible to do this?

(If you are wondering why would i ever need such a thing, an example scenario would be “facebook style updates” where if a user uploads 3-4 photos continously they don’t always appear on the next line but it may appear horizontally whereas if he posts some event it appears in next line.)

Thanks in advance 🙂

Answer 1

The fundementals of the solution is to use another ItemsControl in the ItemTemplate of the ListBox. This ItemsControl should have a horizontal oriented StackPanel as its ItemsPanel.

Here is a basic example. Lets start with some very simple testdata:-

public class TestStringList : List<string>
{
    public TestStringList()
    {
        AddRange(new[] {"Anthony", "Kar", "Martin", "Jon", "Erik", "Darin",
            "Balus", "Mike", "Hans", "Alex", "Anomie", "David" });

    }
}

Now we want to display this list in a ListBox but keep all the names that have the same first initial on the same line. I’m going to use an implementation of IValueConverter to deal with the grouping that we need. If you are using MVVM then you’d have your ViewModel take of this.

public class Grouper : IValueConverter
{

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return ((IEnumerable<string>)value).OrderBy(s => s).GroupBy(s => s[0]);
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

The output of this converter is basically IEnumerable<IEnumerable<string>> which is what we want. The outer ListBox will enumerate the outer set and the inner ItemsControl will enumerate the inner set of strings which will be a set of names with the same initial.

Here is the xaml:-

<UserControl x:Class="SilverlightApplication1.SimpleGrouping"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:SilverlightApplication1"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <UserControl.Resources>
        <local:TestStringList x:Key="TestData" />
        <local:Grouper x:Key="grouper" />
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot">
        <ListBox ItemsSource="{Binding Converter={StaticResource grouper}, Source={StaticResource TestData}}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <ItemsControl ItemsSource="{Binding}">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding}" Margin="5" />
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</UserControl>