How to display listbox items in column view in WPF c#

Question

Am using listbox control in WPF its display listbox item in row wise but I want to display in column wise ( Something like bootstrap grid)

XMAL

<ListBox x:Name="lb_items">
   <ListBox.ItemTemplate>
        <DataTemplate>                            
            <StackPanel Margin="10 0 0 0">
                <Image Source="{Binding ImageSource}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Am binding Listbox from code behind

lb_items.ItemsSource = modules.ToList();

Answer 1

Try this one.

    <ListBox x:Name="lb_items">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel IsItemsHost="True" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Margin="10 0 0 0">
                    <Image Source="{Binding ImageSource}" />
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Answer 2

ListBox has property called ItemsPanel, which determines how items are rendered.

Somewhere in application resource create different ItemsPanelTemplate, so you can easily reuse it:

<ItemsPanelTemplate x:Key="WrapPanelTemplate">
    <WrapPanel />
</ItemsPanelTemplate>

<ItemsPanelTemplate x:Key="HorizontalStackPanelTemplate">
    <StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>

then you can easily use it:

<ListBox ItemsPanel="{StaticResource HorizontalStackPanelTemplate}">...
<ItemControl ItemsPanel="{StaticResource WrapPanelTemplate}">...

always put such assets into application resources in order to make the code for your views clean and readable.

---

Extra Tip: Here is animated WrapPanel, that animates items, when you resize window or an item is inserted to the list:

<ItemsPanelTemplate x:Key="FluidWrapPanel">
    <WrapPanel>
        <i:Interaction.Behaviors>
            <ei:FluidMoveBehavior AppliesTo="Children" Duration="0:0:0.5">
                <ei:FluidMoveBehavior.EaseY>
                    <SineEase EasingMode="EaseInOut" />
                </ei:FluidMoveBehavior.EaseY>
                <ei:FluidMoveBehavior.EaseX>
                    <CubicEase EasingMode="EaseInOut" />
                </ei:FluidMoveBehavior.EaseX>
            </ei:FluidMoveBehavior>
        </i:Interaction.Behaviors>
    </WrapPanel>
</ItemsPanelTemplate>

dont forget to include these xml namespaces:

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"