CODEWITHSUNDEEP
c#.netwpfvb.netxaml
Elmo
Elmo

Reputation: 6471

WrapPanel in ListBox with Horizontal & Vertical Scrolling

According to https://stackoverflow.com/a/2573386/864101, I'm using this code:

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel HorizontalAlignment="Center" VerticalAlignment="Center" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <Image Source="http://placehold.it/50x50" Stretch="None"/>
    <Image Source="http://placehold.it/60x50" Stretch="None"/>
    <Image Source="http://placehold.it/70x50" Stretch="None"/>
    <Image Source="http://placehold.it/80x50" Stretch="None"/>
    <Image Source="http://placehold.it/90x50" Stretch="None"/>
    <Image Source="http://placehold.it/100x50" Stretch="None"/>
    <Image Source="http://placehold.it/600x200" Stretch="None"/>
</ListBox>

This is how it looks like:

I need to have both the horizontal & vertical scrollbars, just like this (just a quick mockup using HTML):

Using ScrollViewer.HorizontalScrollBarVisibility="Disabled" made the images wrap but disabled the horizontal scroll bar, which is why I can't see the rest of the 600x200 image.

I've struggled hours on this fixing this but no luck, can some please help me?

The images in the ListBox are updated with different dimensions from user input.

Upvotes: 2

Views: 1390

Answers (1)

Sjips
Sjips

Reputation: 1258

Add a margin:

<ListBox>
<ListBox.ItemsPanel>
    <ItemsPanelTemplate>
        <WrapPanel MaxWidth="600" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </ItemsPanelTemplate>
</ListBox.ItemsPanel>
<Image Margin ="5" Source="http://placehold.it/50x50" Stretch="None"/>
<Image Margin ="5" Source="http://placehold.it/60x50" Stretch="None"/>
<Image Margin ="5" Source="http://placehold.it/70x50" Stretch="None"/>
<Image Margin ="5" Source="http://placehold.it/80x50" Stretch="None"/>
<Image Margin ="5" Source="http://placehold.it/90x50" Stretch="None"/>
<Image Margin ="5" Source="http://placehold.it/100x50" Stretch="None"/>
<Image Margin ="5" Source="http://placehold.it/600x200" Stretch="None"/>
</ListBox>

Maybe you need a smaller margin than 5; just try. Maybe also an other value for 600.

Upvotes: 2

Related Questions