How to make WrapPanel items line by line?

Question

I have WrapPanel with icons. I want to create it line by line (5 items per line).

So, my code:

<WrapPanel Grid.Row="3"
        Grid.RowSpan="2"
        Grid.Column="4"
        x:Name="wpIcons">
</WrapPanel>


foreach(var ic in obj.Icons)
{
    BitmapImage bi = new BitmapImage();
    bi.BeginInit();
    bi.StreamSource = new MemoryStream(ic.image);
    bi.EndInit();

    Image im = new Image();
    im.Source = bi;
    wpIcons.Children.Add(im);
}

So, it works but not line by line.

How to make icons line by line?

Why not using a Stackpanel instead? And you should have a look at the MVVM pattern. Adding items in the code behind is far from good. — Mighty Badaboom, Apr 04 '17 at 10:08
what do you mean by line by line? Is it verically or horizontally? — Parag, Apr 04 '17 at 10:12
"5 items per line" requirement may range from easy (limiting width of `WrapPanel`, vertical stackpanel with horizontal stackpanels as items or just a pure `UniformGrid`?) to [hard](http://stackoverflow.com/a/9770590/1997232) (creating own panel), depends on what exactly you want to achieve. In given code you can just try to limit `im.Width`, so that only `5` images will fit and then `6th` will be wrapped, but what should happens if window is resized, etc. ? — Sinatr, Apr 04 '17 at 10:14
Possible duplicate of [Equivalent to 'FlowBreak' property for WPF WrapPanel](http://stackoverflow.com/questions/29403620/equivalent-to-flowbreak-property-for-wpf-wrappanel) — Sinatr, Apr 04 '17 at 10:16

score 1 · Answer 1 · answered Apr 04 '17 at 10:21

If you want 5 items per line you could specify a fixed width of the Image elements and the WrapPanel:

<WrapPanel x:Name="wpIcons" Grid.Row="3"
            Grid.RowSpan="2"
            Grid.Column="4"
            Width="100">
</WrapPanel>

foreach (var ic in obj.Icons)
{
    BitmapImage bi = new BitmapImage();
    bi.BeginInit();
    bi.StreamSource = new MemoryStream(ic.image);
    bi.EndInit();

    Image im = new Image();
    im.Width = 20; //<-- = 100 / 5
    im.Source = bi;
    wpIcons.Children.Add(im);
}

score 0 · Answer 2 · answered Apr 04 '17 at 10:21

To have control on how many items are on a single I suggest you to use UniformGrid. Here is an example:

  <UniformGrid Columns="2" Rows="2" Name="uniformGrid1" >
            <Image Source="pic1.jpg"></Image>
            <Image Source="pic2.jpg"></Image>
            <Image Source="pic3.jpg"></Image>
            <Image Source="pic4.jpg"></Image>
  </UniformGrid>

In the given example the pictures will be displayed on 2 rows, and 2 columns (in your case you could set Rows="5" without setting the columns). You could modify the Columns and/or rows as you wish.

How to make WrapPanel items line by line?

2 Answers2