Windows 8 WrapPanel

Question

I've got problem with automatically breaking StackPanel into next line. Here's the sample code:

<StackPanel Orientation="Horizontal" Width="180">
   <TextBlock.../>
   <TextBlock.../>
   <TextBlock.../>
   <Image.../>
    ...
</StackPanel>

Now I want to achive something like this: when there is not enough space for another element in the StackPanel it should be placed in new line. How I can achive this (it's not necessary to use stackpanel)?

PS: My goal is to place text and images in one line (it can of course break, when there is not enough space for another element). Maybe you can provide better solution than using textblocks and images?

Answer 1

Try the WrapGrid, it should do what you want: http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.wrapgrid.aspx

The only catch (which isn't a bad thing) is that WrapGrid can only display items in an ItemsControl, so use it this way (changing ListView to any ItemsControl):

<ListView.ItemsPanel>
    <ItemsPanelTemplate>
        <WrapGrid Orientation="Horizontal" />
    </ItemsPanelTemplate>
</ListView.ItemsPanel>