0

Please take a look at the image below:

enter image description here

So I will get data from database and bind to a list. Now my objective is simply make sure there are only 6 items at max, and the remaining item go to the next row.
Please take a look at my current approach:

<ScrollViewer>
    <ItemControl DataContext ="{Binding [SomeViewModel]}" ItemSource="{Binding printerList}">
        <ItemControl.ItemTemplate>
            <DataTemplate>
                <WrapPanel ItemWidth="100" Width="800" Orientation="Horizontal">
                    <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
                        <Image Source="{Binding printerImage}"/>
                        <TextBlock Text="{Binding PrinterName}"
                    </StackPanel>
                </WrapPanel>
            </DataTemplate>
        </ItemControl.ItemTemplate>
    </ItemControl
</ScrollViewer>

I'm using a scrollviewer because if the number of rows exceeds the page height, a scrollbar should appear.
I've no idea why the above code will have each and every printer in vertical, meaning each row will have only one printer. I've already set the Orientation of WrapPanel to Horizontal. Please point me to the correct direction if there is even easier way to achieve my objective.

SuicideSheep
  • 5,260
  • 19
  • 64
  • 117

1 Answers1

1

you can use a Uniform grid

        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Columns="6"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
ZSH
  • 905
  • 5
  • 15