Windows 8 WrapPanel

问题

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?

回答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>

回答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

回答3:

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

回答4:

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

来源：https://stackoverflow.com/questions/11563062/windows-8-wrappanel