9

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?

Kris Vandermotten
  • 10,111
  • 38
  • 49
Krzysztof Kaczor
  • 5,408
  • 7
  • 39
  • 47

4 Answers4

16

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>
aquaseal
  • 251
  • 1
  • 2
  • 1
    Thanks for your reply but I'm not sure how i should use it. Where should I place content (textboxes etc.)? – Krzysztof Kaczor Jul 19 '12 at 20:04
  • Content should be added to the Items collection on an ItemsControl, such as ListView. You can accomplish this in a few ways depending on your specific scenario. I will post another comment with an alternative method that would be better in the long run, but to get the general idea across you can use the following code (not sure how to get the code on separate lines, sorry!): ` ` – aquaseal Jul 20 '12 at 17:00
  • I would recommend using databinding to bind the ItemsSource property on the ListView to your data (or set the DataContext property on the ListView or on an element higher in the visual tree). Then use the ItemTemplate property on the ListView to create how you want each data item bound to your ItemsSource to look. ` ` – aquaseal Jul 20 '12 at 17:11
  • 1
    Hmm could you tell me how can I change spacing between items? (maybe i must use another List element?) – Krzysztof Kaczor Jul 21 '12 at 17:49
  • Use the Margin property on your items or the Padding property on the parent container. For example: `` – aquaseal Jul 24 '12 at 01:23
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

Kris Vandermotten
  • 10,111
  • 38
  • 49
2

Out of the box, there's no WrapPanel available for WinRT. At least not for now... However in the meantime there's a workaround... I've tested it and it works.

you can check the following links at the following link.

http://www.codeproject.com/Articles/24141/WrapPanel-for-Silverlight-2-0

Since WrapPanel inherits from Panel class, you can create a WrapPanel or simply use the the WrapPanel.cs code you'll find in the above SLV 2 app.

then simply include similar code

xmlns:wrapPanel="using:yourWinRTApp"
....

<wrapPanel:WrapPanel Orientation="Horizontal" Width="400" >
....
</wrapPanel:WrapPanel>

it should do the trick ...

Info taken from:

http://www.michielpost.nl/PostDetail_75.aspx

DChamberland
  • 21
  • 2
0

You might use GridView, it have similar layout-behavior as the WrapPanel.

NestorArturo
  • 2,476
  • 1
  • 18
  • 21