Search code examples
silverlightbindingwpf-controlsitemscontrol

Canvas ItemsControls item position issue


<Canvas x:Name="MainCanvas"
        Width="350"
        Height="622">
    <Canvas.RenderTransform>
        <CompositeTransform TranslateX="-350" />
    </Canvas.RenderTransform>
    <ItemsControl ItemsSource="{Binding ElementList}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding name}" Foreground="Red"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Canvas>

So this is what I have. However, when I bind a list to the itemscontrol, all items are placed underneath eachother.

How can I make them to spawn the first 4 on the first row, then the net 4 of the next row ?

like when I have 10 elements it should be like:

1 2 3 4

5 6 7 8

9 10


Solution

  • The default items panel for the ItemsControl uses the StackPanel. You need to get the Silverlight Toolkit and user the WrapPanel control in the ItemsControl ItemsPanel template. You will also need to give the WrapPanel fixed width.