Windows 8.1 XAML 包装 Stackpanel 子项答案

【问题标题】：Windows 8.1 XAML Wrap Stackpanel ChildrenWindows 8.1 XAML 包装 Stackpanel 子项
【发布时间】：2014-02-27 16:49:41
【问题描述】：

我在 Stackpanel 中有一堆水平方向的列表视图。我希望列表在到达 Stackpanel 的末尾时换行。

这对我来说似乎很容易，但我似乎无法弄清楚如何。

【问题讨论】：

标签： xaml windows-store-apps windows-8.1

【解决方案1】：

StackPanel 不换行。请查看WrapGrid。

【讨论】：

【解决方案2】：

您不能使用StackPanel 作为容器来执行此操作。通常我使用Grid 作为父容器。它更灵活。

类似这样的：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <ListView Grid.Column="0"/>
    <ListView Grid.Column="1"/>
    <ListView Grid.Column="2"/>
</Grid>

【讨论】：

感谢您的想法。所以我不确定这将如何工作并在给定宽度的情况下进行包装。你可以给我一个例子吗？我已经更新了我的帖子以显示我的目标。
哦，我现在才看到你的“草图”。我以为你有固定数量的 ListView 元素。我的回答只有在你知道先验你想要多少ListView元素的行和列时才有效

【解决方案3】：

您可以尝试使用 ItemsControl 并使用 WrapGrid 作为其 ItemsPanel 模板。这是我正在使用的代码：

<ItemsControl Width="Auto" Height="Auto" IsHitTestVisible="False" ItemsSource="{Binding AnnotationTypesShown}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Height="50" Width="Auto" Margin="0,0,5,0">
                        <Image Source="{Binding IconImage}" Stretch="UniformToFill" Margin="0,0,0,0" Width="25" Height="25"/>
                        <TextBlock Text="{Binding TypeName}" Width="Auto" Margin="5,10,5,0" Style="{StaticResource DefaultTextBlockStyle}"></TextBlock>
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid Orientation="Horizontal" VerticalAlignment="Top"></WrapGrid>                        
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>

这是完整视图的结果

在包装视图中

【讨论】：