Windows 8 WrapPanel

Question

我遇到了将StackPanel自动换行的问题。这是示例代码：

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

现在我想实现这样的效果：当StackPanel中没有足够的空间容纳另一个元素时，它应该被放置在新行。我该如何实现这一点（不一定要使用StackPanel）？

PS：我的目标是在一行中放置文本和图像（当然可以在没有足够空间容纳另一个元素时换行）。也许您可以提供比使用TextBlock和Image更好的解决方案？

- Krzysztof Kaczor

Answer 1

尝试使用WrapGrid，它应该能满足你的需求： http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.wrapgrid.aspx

唯一需要注意的事项（这并不是坏事）是WrapGrid只能在ItemsControl中显示项目，因此可以这样使用它（将ListView更改为任何ItemsControl）：

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

- aquaseal

---

谢谢您的回复，但我不确定该如何使用它。我应该把内容（文本框等）放在哪里？ - Krzysztof Kaczor

将内容添加到ItemsControl的Items集合中，例如ListView。根据您的具体情况，有几种方法可以实现此目的。我将在另一条评论中发布另一种更好的长期方法，但为了传达一般想法，您可以使用以下代码（不确定如何将代码放在单独的行中，抱歉！）： - aquaseal

我建议使用数据绑定将 ListView 的 ItemsSource 属性绑定到你的数据（或者在 ListView 上或视觉树中更高层次的元素上设置 DataContext 属性）。然后使用 ListView 的 ItemTemplate 属性来创建你希望每个数据项绑定到 ItemsSource 后看起来的方式。 - aquaseal

嗯，你能告诉我如何改变项目之间的间距吗？（也许我必须使用另一个列表元素？） - Krzysztof Kaczor

在您的项目上使用Margin属性或在父容器上使用Padding属性。例如： <TextBlock Text="{Binding YourTextProperty}" Margin="10" /> - aquaseal

Answer 2

WinRT中默认没有WrapPanel可用，至少现在还没有...不过在此期间有一个解决方法...我已经测试过并且它可以工作。

您可以在以下链接中检查以下链接。

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

由于WrapPanel继承自Panel类，因此您可以创建WrapPanel或者简单地使用上述SLV 2应用程序中找到的WrapPanel.cs代码。

然后只需包含类似的代码

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

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

它应该起作用...

信息来自：

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

- DChamberland

Answer 3

使用VariableSizedWrapGrid代替StackPanel，参见http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.variablesizedwrapgrid.aspx 对于多个TextBlocks，请考虑使用一个具有多个Runs的单个TextBlock。您的图像当然不能包含在Runs中，但是一个具有两个Runs的TextBlock比两个连续的TextBlock更好。

更新：实际上，这可能无法帮助您获得所需的布局。您可能需要查看RichTextBlock控件，参见http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.richtextblock.aspx

- Kris Vandermotten

---

WrapPanel在Windows8 RT中不存在。由于图像的原因，我无法使用具有多个运行的TextBlock。 - Krzysztof Kaczor

是的，谢谢 :) 我以前尝试过使用富文本框，但它根本不换行。 - Krzysztof Kaczor

Answer 4

您可以使用GridView，它具有与WrapPanel相似的布局行为。

- NestorArturo

---

如果你的项大小不相等，GridView 就会变得混乱。 - naqvitalha