Reputation: 6471
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
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