ItemsControl 包装答案

【问题标题】：ItemsControl WrappingItemsControl 包装
【发布时间】：2014-11-12 16:10:21
【问题描述】：

我有一个动态数据列表，需要按以下方式显示：

1  4  7  10
2  5  8  11
3  6  9  12

13 16 19 22
14 17 20 23
15 18 21 24
...

但是我的代码只迭代顶部并跑出屏幕。以下代码位于网格内。我做错了什么？

          <toolkit:WrapPanel Orientation="Vertical" Grid.Row="2" >
                <ItemsControl ItemsSource="{Binding ImagingTypes, Mode=TwoWay}" 
                              Margin="5">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                                <toolkit:WrapPanel Orientation="Vertical"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" Margin="5,0,5,0">
                                <CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay}" VerticalAlignment="Top" />
                                <TextBlock Grid.Column="1" Text="{Binding Description}" MaxWidth="150" TextWrapping="Wrap" />
                            </StackPanel>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </toolkit:WrapPanel>

【问题讨论】：

标签： xaml silverlight itemscontrol wrappanel

【解决方案1】：

对不起。我不太懂英语，所以我不能完全理解你的意思。但是如果你想要一个如上所述的序列并且如果你想保持项目的静态位置。你可以使用 UniformGrid 。我希望这就是你要找的。p>

代码如下：

我做了一个列表视图示例；

  <ListView x:Name="SharedSizeScopeListView">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate >                   
                <UniformGrid IsItemsHost="True" Columns="4"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListViewItem Content="1"/>
        <ListViewItem Content="4"/>
        <ListViewItem Content="7"/>
        <ListViewItem Content="10"/>

        <ListViewItem Content="2"/>
        <ListViewItem Content="5"/>
        <ListViewItem Content="8"/>
        <ListViewItem Content="11"/>

        <ListViewItem Content="3"/>                       
        <ListViewItem Content="6"/>                        
        <ListViewItem Content="9"/>                        
        <ListViewItem Content="12"/>

        <ListViewItem Content="13"/>
        <ListViewItem Content="16"/>
        <ListViewItem Content="19"/>
        <ListViewItem Content="22"/>

        <ListViewItem Content="14"/>
        <ListViewItem Content="17"/>
        <ListViewItem Content="20"/>
        <ListViewItem Content="23"/>

        <ListViewItem Content="15"/>                        
        <ListViewItem Content="18"/>                       
        <ListViewItem Content="21"/>                     
        <ListViewItem Content="24"/>

    </ListView>

【讨论】：

【解决方案2】：

我不认为WrapPanel 支持这种分层包装。嵌套方法不起作用 - 内部面板无法将其“剩余”项目“转发”到外部面板。

最简单的方法取决于您是想要固定数量的列，还是想要适应容器大小。如果是前者，那么您可以使用 Grid 并连续填充其单元格（使用代码隐藏或行为），即 (0,0), (0,1), (0,2), (1,0 ), ..., (0,4), (0,5), (0,6), (1,4), ...

如果是后者——您想继续水平布置项目直到空间用完——那么可能需要custom Panel。编写自己的面板有一些学习曲线（您必须阅读 Silverlight 布局系统），但它为您提供了很大的灵活性。

【讨论】：