Fix bugs in StaggeredPanel (#12)

- Apply HorizontalAlignment of children
- Prevent IndexOutOfRangeExceptions
- Fix overlapping if the element takes all the available columns
- Fix finding the column index with bigger height for wide child

Author: avdynut

src/OpenSilver.ControlsKit.Controls/StaggeredPanel.cs

@@ -18,8 +18,8 @@
 
 using System;
 using System.Linq;
-using System.Windows.Controls;
 using System.Windows;
+using System.Windows.Controls;
 //using Windows.Foundation;
 //using Windows.UI.Xaml;
 //using Windows.UI.Xaml.Controls;
@@ -38,7 +38,6 @@ public class StaggeredPanel : Panel
         /// </summary>
         public StaggeredPanel()
         {
-            //ProgressiveRenderingChunkSize = 1;
             //RegisterPropertyChangedCallback(Panel.HorizontalAlignmentProperty, OnHorizontalAlignmentChanged);
         }
 
@@ -133,7 +132,7 @@ protected override Size MeasureOverride(Size availableSize)
             int numColumns = Math.Max(1, availableWidth == double.PositiveInfinity ? -1 : (int)Math.Floor(availableWidth / _columnWidth));
 
             // adjust for column spacing on all columns expect the first
-            double totalWidth = _columnWidth + ((numColumns - 1) * (_columnWidth + ColumnSpacing));
+            double totalWidth = GetTotalWidth(numColumns);
             if (totalWidth > availableWidth)
             {
                 numColumns--;
@@ -163,17 +162,14 @@ protected override Size MeasureOverride(Size availableSize)
                 child.Measure(new Size(availableWidth, availableHeight));
                 var elementSize = child.DesiredSize;
 
-                double newHeight;
-                int heightDefiningColumnIndex;
-                var columnIndex = GetPlacementInformations(columnHeights, elementSize, out newHeight, out heightDefiningColumnIndex);
                 int elementColumnSpan = GetElementColumnSpan(elementSize.Width);
+                var columnIndex = CalculatePlacement(columnHeights, elementSize, elementColumnSpan, out double newHeight, out _);
 
-                for (int k = 0; k < elementColumnSpan; ++k)
+                for (int k = 0; k < elementColumnSpan && columnIndex + k < numColumns; ++k)
                 {
                     columnHeights[columnIndex + k] = newHeight + (itemsPerColumn[columnIndex] > 0 ? RowSpacing : 0);
                     itemsPerColumn[columnIndex + k]++;
                 }
-                itemsPerColumn[columnIndex]++;
             }
 
             double desiredHeight = columnHeights.Max();
@@ -189,7 +185,7 @@ protected override Size ArrangeOverride(Size finalSize)
             int numColumns = Math.Max(1, (int)Math.Floor(finalSize.Width / _columnWidth));
 
             // adjust for horizontal spacing on all columns expect the first
-            double totalWidth = _columnWidth + ((numColumns - 1) * (_columnWidth + ColumnSpacing));
+            double totalWidth = GetTotalWidth(numColumns);
             #region Explanation for the -0.01 in the if below:
             // we compare to totalWidth -0.01 because such a small overflow wouldn't be visible and it is still a likely scenario:
             // If we are Stretched, MeasureOverride will have changed _columnWidth to availableWidth/numColumns, which can be rounded higher than the actual value.
@@ -201,7 +197,7 @@ protected override Size ArrangeOverride(Size finalSize)
                 numColumns--;
 
                 // Need to recalculate the totalWidth for a correct horizontal offset
-                totalWidth = _columnWidth + ((numColumns - 1) * (_columnWidth + ColumnSpacing));
+                totalWidth = GetTotalWidth(numColumns);
             }
 
             if (HorizontalAlignment == HorizontalAlignment.Right)
@@ -218,27 +214,31 @@ protected override Size ArrangeOverride(Size finalSize)
 
             for (int i = 0; i < Children.Count; i++)
             {
-
-                var child = Children[i];
+                var child = Children[i] as FrameworkElement;
                 var elementSize = child.DesiredSize;
                 double elementHeight = elementSize.Height;
 
                 //get the element's column span:
                 double elementWidth = elementSize.Width;
-                int elementColumnsSpan = Math.Max(1, (int)Math.Ceiling((elementWidth - _columnWidth) / (_columnWidth + ColumnSpacing)) + 1);
-
-                int columnIndex, heightDefiningColumnIndex;
-                double newHeight;
-              
-                columnIndex = GetPlacementInformations(columnHeights, elementSize, out newHeight, out heightDefiningColumnIndex);
+                int elementColumnSpan = GetElementColumnSpan(elementWidth);
+                int columnIndex = CalculatePlacement(columnHeights, elementSize, elementColumnSpan, out double newHeight, out int heightDefiningColumnIndex);
 
                 double itemHorizontalOffset = horizontalOffset + (_columnWidth * columnIndex) + (ColumnSpacing * columnIndex);
                 double itemVerticalOffset = columnHeights[heightDefiningColumnIndex] + verticalOffset + (RowSpacing * itemsPerColumn[heightDefiningColumnIndex]);
 
-                Rect bounds = new Rect(itemHorizontalOffset, itemVerticalOffset, elementWidth, elementHeight);
+                if (child.HorizontalAlignment == HorizontalAlignment.Right)
+                {
+                    itemHorizontalOffset += GetTotalWidth(elementColumnSpan) - elementWidth;
+                }
+                else if (child.HorizontalAlignment == HorizontalAlignment.Center)
+                {
+                    itemHorizontalOffset += (GetTotalWidth(elementColumnSpan) - elementWidth) / 2;
+                }
+
+                var bounds = new Rect(itemHorizontalOffset, itemVerticalOffset, elementWidth, elementHeight);
                 child.Arrange(bounds);
 
-                for (int k = 0; k < elementColumnsSpan; ++k)
+                for (int k = 0; k < elementColumnSpan && columnIndex + k < numColumns; ++k)
                 {
                     columnHeights[columnIndex + k] = newHeight;
                     itemsPerColumn[columnIndex + k]++;
@@ -248,6 +248,11 @@ protected override Size ArrangeOverride(Size finalSize)
             return base.ArrangeOverride(finalSize);
         }
 
+        private double GetTotalWidth(int numColumns)
+        {
+            return _columnWidth + ((numColumns - 1) * (_columnWidth + ColumnSpacing));
+        }
+
         private static void OnDesiredColumnWidthChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
         {
             var panel = (StaggeredPanel)d;
@@ -270,15 +275,11 @@ private int GetElementColumnSpan(double elementWidth)
             return Math.Max(1, (int)Math.Ceiling((elementWidth - _columnWidth) / (_columnWidth + ColumnSpacing)) + 1);
         }
 
-        private int GetPlacementInformations(double[] columnHeights, Size elementSize, out double newHeight, out int heightDefiningColumnIndex)
+        private int CalculatePlacement(double[] columnHeights, Size elementSize, int elementColumnSpan, out double newHeight, out int heightDefiningColumnIndex)
         {
             double elementHeight = elementSize.Height;
 
-            //get the element's column span:
-            double elementWidth = elementSize.Width;
-            int elementColumnSpan = GetElementColumnSpan(elementWidth);
-
-            int columnIndex = 0;
+            int columnIndex;
             if (elementColumnSpan == 1)
             {
                 columnIndex = GetColumnIndex(columnHeights);
@@ -313,16 +314,24 @@ private int GetColumnIndex(double[] columnHeights, int elementColumnSpan, out do
         {
             if (columnHeights.Length <= elementColumnSpan)
             {
-                // there is no option on where to put the element anyway so let's just return 0.
                 bestHeight = columnHeights[0];
                 heightDefiningColumnIndex = 0;
+                for (int i = 1; i < columnHeights.Length; i++)
+                {
+                    if (columnHeights[i] > bestHeight)
+                    {
+                        heightDefiningColumnIndex = i;
+                        bestHeight = columnHeights[i];
+                    }
+                }
                 return 0;
             }
 
-            //initialization:
             int bestIndex = 0;
             bestHeight = double.MinValue;
             heightDefiningColumnIndex = 0;
+
+            // Initialize bestHeight using the first valid span
             for (int i = 0; i < elementColumnSpan; ++i)
             {
                 if (bestHeight < columnHeights[i])
@@ -331,38 +340,42 @@ private int GetColumnIndex(double[] columnHeights, int elementColumnSpan, out do
                     heightDefiningColumnIndex = i;
                 }
             }
-            int lastColumnIndex = columnHeights.Length - elementColumnSpan + 1;
+
+            int maxStartIndex = columnHeights.Length - elementColumnSpan;
 
             //we look for the set of columns that will allow us to put the element with the smallest vertical offset:
-            for (int j = 1; j < lastColumnIndex; j++)
+            for (int startIndex = 1; startIndex <= maxStartIndex; ++startIndex)
             {
                 //We get the height of the new column to consider:
-                double newHeight = columnHeights[j + elementColumnSpan - 1];
-                if (newHeight > bestHeight)
+                double newColumnHeight = columnHeights[startIndex + elementColumnSpan - 1];
+
+                if (newColumnHeight > bestHeight)
                 {
                     //we can exclude any set of columns that include the new column since at best, it won't be as good as what we have already found:
-                    j += elementColumnSpan - 1; // -1 because the loop will also add 1.
+                    startIndex += elementColumnSpan - 1; // -1 because the loop will also add 1.
                     continue;
                 }
 
                 //Calculate the height of the current set of columns:
                 //Note: (perf) we could also read the height on j-1 and if that column's height is < bestHeight, it means that column was not the limiting one in the previous loop so no need to recalculate.
                 double currentHeight = double.MinValue;
-                for (int i = 0; i < elementColumnSpan; ++i)
+                int currentIndex = 0;
+                for (int offset = 0; offset < elementColumnSpan; ++offset)
                 {
-                    if (currentHeight < columnHeights[j + i])
+                    int index = startIndex + offset;
+                    if (currentHeight < columnHeights[index])
                     {
-                        currentHeight = columnHeights[j + i];
-                        heightDefiningColumnIndex = j + i;
+                        currentHeight = columnHeights[index];
+                        currentIndex = index;
                     }
                 }
 
                 if (currentHeight < bestHeight)
                 {
                     bestHeight = currentHeight;
-                    bestIndex = j;
+                    heightDefiningColumnIndex = currentIndex;
+                    bestIndex = startIndex;
                 }
-
             }
 
             return bestIndex;