Auto adjustable list in shampoo

Question

I have a list of BitmapImage and wanted it to appear as follows, 3 images per line, if you do not fill a line, stay a blank at the end.

For example, I have my list with 10 small images and I want it to appear 3 images in the first 3 lines and an image in the fourth line pasted on the left and the rest a blank.

How can I do that?

Answer 1

Use in XAML a Uniformgrid and enter the amount of columns you want (in this case they are 3 columns) in the field Columns.

<UniformGrid Name="gridImagens" Columns="3">

</UniformGrid>

Now in code C# create image controls whose source is the images you want to show on the grid and add these controls to the Uniformgrid children collection. (A good practice is to clear the Uniformgrid child list before uploading the images, to ensure that the images will not be duplicated).

 private void CarregueListaDeImagens()
 {
     gridImagens.Children.Clear();

     var arquivosDeImagem = Directory.GetFiles(@"C:\Users\Ulysses\Pictures\TesteUniformGrid");

     foreach (var imagem in arquivosDeImagem)
     {
         var bitmap = new BitmapImage(new Uri(imagem));

         var controleImagem = new Image();
         controleImagem.Source = bitmap;

         gridImagens.Children.Add(controleImagem);
     }
 }

Follows below the final result when loading 10 images. Images are loaded 3 by 3 on each line, leaving blank spaces at the end when the number of images loaded is not multiple of 3, according to what you specified in your question.