Height issue of StackPanel.Children

How-to Discussions
1

I am attempting to randomly insert a list of photos with their descriptions into two columns(StackPanels). Here is my code:

    for (int i = 0; i < t_min_list.Count; i++) 
    {
        int int_random;
        do
        {
            int_random = random.NextInt(0,t_min_list.Count);
        }while(inserted_array[int_random]);

        var ui = new MineralPhoto()
        {
            Cover = new BundleFileImageSource(t_img_list[int_random]),
            Description = t_min_list[int_random].Description,
        };

        if (PhotoCol1.Children.Count > PhotoCol2.Children.Count)
        {
            PhotoCol2.Children.Add(ui);
        }
        else
        {
            PhotoCol1.Children.Add(ui);
        }
    }

Here I am tracking the Children.Count among the two columns, but this is resulting in significant difference in the height as different photos are of different size.

How can I get the total height of children elements of each column for the add child decision?

Besides, I want to crop the photos into ratios of 3:4 or 4:3 based on the original dimension of the imported images. May I know whether this can be achieved?

2

Here’s a few things that might help you, depending on what effect you’re trying to achieve.

  • You can use a Grid element with a ColumnCount="2" and add all the images to the same grid. It’ll automatically add the rows as required. By default this will fill up the panel space for the entire grid, shrinking the images. You can instead use DefaultRow="auto" to take the size from the children and let the Grid grow.

  • You can set just the Height on an image and it will, with the default scaling, maintain the aspect ratio given that height.

  • You can use a vertically oriented WrapPanel if you wish to create 1+ columns of images and have them all fit nicely, flowing together. They won’t line up in each column.