Windows 8 包裹面板答案

【问题标题】：Windows 8 WrapPanelWindows 8 包裹面板
【发布时间】：2012-07-18 18:27:04
【问题描述】：

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

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

现在我想实现这样的目标：当 StackPanel 中没有足够空间容纳另一个元素时，它应该被放置在新行中。我怎样才能做到这一点（不需要使用 stackpanel）？

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

【问题讨论】：

【解决方案1】：

唯一的问题（这不是一件坏事）是 WrapGrid 只能显示 ItemsControl 中的项目，因此请以这种方式使用它（将 ListView 更改为任何 ItemsControl）：

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

【讨论】：

感谢您的回复，但我不知道应该如何使用它。我应该在哪里放置内容（文本框等）？
内容应添加到 ItemsControl 上的 Items 集合中，例如 ListView。根据您的具体情况，您可以通过几种方式完成此操作。我将使用另一种从长远来看会更好的替代方法发表另一条评论，但要了解总体思路，您可以使用以下代码（不确定如何在单独的行中获取代码，抱歉！）：<ListView.Items> <TextBlock Text="Item 1" /> <Image Source="../Assets/DarkGray.png" /> <TextBlock Text="Item 2" /> <Image Source="../Assets/LightGray.png" /> </ListView.Items>
我建议使用数据绑定将 ListView 上的 ItemsSource 属性绑定到您的数据（或在 ListView 或可视树中更高的元素上设置 DataContext 属性）。然后使用 ListView 上的 ItemTemplate 属性来创建您希望绑定到 ItemsSource 的每个数据项的外观。 <ListView ItemsSource="{Binding}"> <ListView.ItemTemplate <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding YourTextProperty}" /> <Image Source="{Binding YourImagePathProperty}" /> </StackPanel> </DataTemplate> </ListView.ItemTemplate> </ListView>
像魅力一样工作 :) 谢谢！
嗯，您能告诉我如何更改项目之间的间距吗？（也许我必须使用另一个 List 元素？）

【解决方案2】：

对于多个 TextBlock，请考虑使用具有多个 Run 的单个 textBlock。你的图片当然不能包含在runs中，但是一个TextBlock有两个Runs比两个连续的TextBlocks要好。

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

【讨论】：

【解决方案3】：

开箱即用，没有可用于 WinRT 的 WrapPanel。至少现在不会…… 但是与此同时，有一种解决方法...我已经对其进行了测试，并且可以正常工作。

您可以在以下链接查看以下链接。

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

然后简单地包含类似的代码

xmlns:wrapPanel="使用:yourWinRTApp"
....

....

它应该可以解决问题...

信息取自：

【讨论】：

【解决方案4】：

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

【讨论】：