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();

I think that it's easier using an ItemControl http://stackoverflow.com/questions/3356719/bind-collection-to-stackpanel that a ListBox — ganchito55, May 05 '16 at 11:56

score 2 · Accepted Answer · answered May 05 '16 at 12:02

2

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>

answered May 05 '16 at 12:02

vercin

210
4
12

Thanks @vercin will try this one. – basit raza May 05 '16 at 14:29
1

@basitraza can you mark it as a solution ? If it helps you. – vercin May 06 '16 at 10:07
Actually both of answer works , that's why am confused which one to mark :) – basit raza May 07 '16 at 16:07
@basitraza Could you please `Mark` the `Response` that helped you most. It will be a sign of appreciating someone who helped you; moreover it will help other readers of this post, as well. Readers pay more attention when a response has been marked as an `Answer`. I was about to jump to the next search when I did not see any response to your post marked as an `Answer` - thinking the issue probably was not resolved, – nam Jul 11 '19 at 22:29

score 1 · Answer 2 · answered May 05 '16 at 12:41

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"

This error message prompt in VS "The name `FluidMoveBehavior` does not exits in the namespace `http://schemas.microsoft.com/expression/2010/interactivit`" — basit raza, May 05 '16 at 15:09
Its works buddy , am not add `microsoft.expression.interactions.dll` in project reference set. — basit raza, May 05 '16 at 15:24

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

2 Answers2