ItemsControl Wrapping

Question

I have a list of dynamic data that needs to display in the following manner:

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

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

However my code only iterates the top portion and runs off the screen. The following code is inside a grid. What am I doing wrong?

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

Answer 1

Sorry.I don't know very well English so I couldn't understand exactly what you mean.But If you want a sequence as above and If you want to remain static position of items.You can use UniformGrid . I hope this is what you're looking for.

Here is code:

I did a listview sample;

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

Answer 2

I don't think that WrapPanel supports that kind of layered wrapping. The nested approach won't work -- there is no way for the inner panel to "forward" its "left-over" items to the outer panel.

The easiest approach to this depends on whether you want a fixed number of columns, or whether you want to fit to the container size. If the former, then you could use a Grid and populate its cells serially (using code-behind or a behavior), ie (0,0), (0,1), (0,2), (1,0), ..., (0,4), (0,5), (0,6), (1,4), ...

If the latter -- you want to continue laying out items horizontally until running out of room -- then a custom Panel might be required. Writing your own panels has a bit of a learning curve (you have to read up on the Silverlight layout system), but it gives you a lot of flexibility.