Insert list of user control to a specific column and rows

Question

I have a user control which contains a list of items. I want to display them like the below image.

The grid has 4 columns but numbers of rows depend on the count of the items. I tried the Uniform grid and Grid but I could not find a solution.

My XAML

<ItemsControl Grid.Row="1" ItemsSource="{Binding Foods}" >
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <UniformGrid  Width="750" >
                <local:FoodItemControl />
            </UniformGrid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

When I use the uniform grid it shows items vertically. Is there any solution to my problem?

Maybe this can help : https://stackoverflow.com/questions/16596579/how-to-setup-a-grid-as-template-for-an-items-control — vernou, Aug 13 '20 at 14:21
How about a wrappanel? like this https://social.technet.microsoft.com/wiki/contents/articles/33327.wpf-wrappanel-itemspanel-last-of-line.aspx. — Andy, Aug 13 '20 at 14:27
@Vernou Yes but using wrap panel is a better choice in this case — ad79h, Aug 15 '20 at 15:54

score 2 · Accepted Answer · answered Aug 13 '20 at 14:53

If you use a wrappanel with Orientation horizontal:

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <WrapPanel Orientation="Horizontal"

This will arrange content in the panel left to right and down.

Note that this is the itemspaneltemplate. As in the template for the container which will hold a number of usercontrols and arrange them like your picture.

In your markup you have itemtemplate.

The itemtemplate provide just your usercontrol.

   <ItemsControl.ItemTemplate>
         <DataTemplate>
             <local:FoodItemControl  Width="200"  />
           </DataTemplate>
   </ItemsControl.ItemTemplate>

It seems unlikely that you will want 4 usercontrols in a row that are 750 pixels wide each. Above, I have the width as 200 but that is just an arbitrary guess.

Insert list of user control to a specific column and rows

1 Answers1