I have a list of BitmapImage and wanted it to appear as follows, 3 images per line, if you do not fill in a line, leave 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 to the left and the rest a blank space.
How can I do this?
Use UniformGrid in XAML and enter the number of columns you want (in this case 3 columns) in the Columns field.
<UniformGrid Name="gridImagens" Columns="3">
</UniformGrid>
Now in the C # code create image controls whose source are the images you want to show on the grid and add those controls to the UniformGrid's child collection. (It is a good practice to clean UniformGrid's child list before uploading the images to ensure that the images do not duplicate.)
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);
}
}
Below is the end result when loading 10 images . Images are loaded 3-by-3 in each line, leaving blanks at the end when the number of images loaded is not multiple of 3, depending on what you specified in your question.
