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>

Answer 2

Use VariabeSizedWrapGrid instead of StackPanel, see http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.variablesizedwrapgrid.aspx

For the multiple TextBlocks, consider using a single textBlock with multiple Runs. Your Image can of course not be included in the runs, but one TextBlock with two Runs is better than two consecutive TextBlocks.

UPDATE: This might actually not help you at all to get the layout you want. You may have to look at the RichTextBlock control, see http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.richtextblock.aspx