code is working

Author: vgromfeld

Microsoft.Toolkit.Uwp.UI.Controls/WrapPanel/WrapPanel.Data.cs

@@ -2,6 +2,7 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 // See the LICENSE file in the project root for more information.
 
+using Windows.Foundation;
 using Windows.UI.Xaml.Controls;
 
 namespace Microsoft.Toolkit.Uwp.UI.Controls
@@ -14,12 +15,17 @@ public partial class WrapPanel
         [System.Diagnostics.DebuggerDisplay("U = {U} V = {V}")]
         private struct UvMeasure
         {
-            internal static readonly UvMeasure Zero = default(UvMeasure);
+            internal static readonly UvMeasure Zero = default;
 
             internal double U { get; set; }
 
             internal double V { get; set; }
 
+            public UvMeasure(Orientation orientation, Size size)
+                : this(orientation, size.Width, size.Height)
+            {
+            }
+
             public UvMeasure(Orientation orientation, double width, double height)
             {
                 if (orientation == Orientation.Horizontal)

Microsoft.Toolkit.Uwp.UI.Controls/WrapPanel/WrapPanel.cs

@@ -3,6 +3,8 @@
 // See the LICENSE file in the project root for more information.
 
 using System;
+using System.Collections.Generic;
+using System.Linq;
 using Windows.Foundation;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
@@ -54,6 +56,24 @@ public double VerticalSpacing
                 typeof(WrapPanel),
                 new PropertyMetadata(0d, LayoutPropertyChanged));
 
+        /// <summary>
+        /// Gets or sets the vertical alignment to use when the control <see cref="Orientation"/> is set to <see cref="Orientation.Horizontal"/>.
+        /// </summary>
+        public VerticalAlignment VerticalContentAlignment
+        {
+            get => (VerticalAlignment)GetValue(VerticalContentAlignmentProperty);
+            set => SetValue(VerticalContentAlignmentProperty, value);
+        }
+
+        /// <summary>
+        /// The DP to store the <see cref="VerticalContentAlignment"/> property value.
+        /// </summary>
+        public static readonly DependencyProperty VerticalContentAlignmentProperty = DependencyProperty.Register(
+            nameof(VerticalContentAlignment),
+            typeof(VerticalAlignment),
+            typeof(WrapPanel),
+            new PropertyMetadata(VerticalAlignment.Top));
+
         /// <summary>
         /// Gets or sets the orientation of the WrapPanel.
         /// Horizontal means that child controls will be added horizontally until the width of the panel is reached, then a new row is added to add new child controls.
@@ -141,7 +161,7 @@ protected override Size MeasureOverride(Size availableSize)
             foreach (var child in Children)
             {
                 child.Measure(availableSize);
-                var currentMeasure = new UvMeasure(Orientation, child.DesiredSize.Width, child.DesiredSize.Height);
+                var currentMeasure = new UvMeasure(Orientation, child.DesiredSize);
                 if (currentMeasure.U == 0)
                 {
                     continue; // ignore collapsed items
@@ -207,10 +227,14 @@ protected override Size ArrangeOverride(Size finalSize)
                 var paddingEnd = new UvMeasure(Orientation, Padding.Right, Padding.Bottom);
                 var position = new UvMeasure(Orientation, Padding.Left, Padding.Top);
 
-                double currentV = 0;
-                void Arrange(UIElement child, bool isLast = false)
+                var allMeasures = Children.Select(c => new UvMeasure(Orientation, c.DesiredSize)).ToList();
+                var allData = new List<(UvMeasure position, UvMeasure size)>();
+
+                var currentV = 0.0;
+                void Arrange(int childIndex, bool isLast = false)
                 {
-                    var desiredMeasure = new UvMeasure(Orientation, child.DesiredSize.Width, child.DesiredSize.Height);
+                    var child = Children[childIndex];
+                    var desiredMeasure = allMeasures[childIndex];
                     if (desiredMeasure.U == 0)
                     {
                         return; // if an item is collapsed, avoid adding the spacing
@@ -230,15 +254,7 @@ void Arrange(UIElement child, bool isLast = false)
                         desiredMeasure.U = parentMeasure.U - position.U;
                     }
 
-                    // place the item
-                    if (Orientation == Orientation.Horizontal)
-                    {
-                        child.Arrange(new Rect(position.U, position.V, desiredMeasure.U, desiredMeasure.V));
-                    }
-                    else
-                    {
-                        child.Arrange(new Rect(position.V, position.U, desiredMeasure.V, desiredMeasure.U));
-                    }
+                    allData.Add((position, desiredMeasure));
 
                     // adjust the location for the next items
                     position.U += desiredMeasure.U + spacingMeasure.U;
@@ -248,10 +264,61 @@ void Arrange(UIElement child, bool isLast = false)
                 var lastIndex = Children.Count - 1;
                 for (var i = 0; i < lastIndex; i++)
                 {
-                    Arrange(Children[i]);
+                    Arrange(i);
                 }
 
-                Arrange(Children[lastIndex], StretchChild == StretchChild.Last);
+                Arrange(lastIndex, StretchChild == StretchChild.Last);
+
+                // Now that we have all the data, we do the actual arrange pass
+                var lastArrangeV = -1.0;
+                var maxRowHeight = 0.0;
+                for (var i = 0; i < Children.Count; i++)
+                {
+                    // place the item
+                    var child = Children[i];
+                    (UvMeasure arrangePosition, UvMeasure arrangeMeasure) = allData[i];
+
+                    if (lastArrangeV != arrangePosition.V)
+                    {
+                        // We are on a new row, we scan all the items to get the max row height
+                        maxRowHeight = allData
+                            .Skip(i) // ignore what has already being processed
+                            .TakeWhile(d => d.position.V == arrangePosition.V) // we are still on the same row
+                            .Max(d => d.size.V); // We want the max.
+                    }
+
+                    if (Orientation == Orientation.Horizontal)
+                    {
+                        switch (VerticalContentAlignment)
+                        {
+                            case VerticalAlignment.Center:
+                            {
+                                var vOffset = Math.Max((maxRowHeight - arrangeMeasure.V) / 2.0, 0.0);
+                                child.Arrange(new Rect(arrangePosition.U, arrangePosition.V + vOffset, arrangeMeasure.U, arrangeMeasure.V));
+                                break;
+                            }
+
+                            case VerticalAlignment.Bottom:
+                            {
+                                var vOffset = Math.Max(maxRowHeight - arrangeMeasure.V, 0.0);
+                                child.Arrange(new Rect(arrangePosition.U, arrangePosition.V + vOffset, arrangeMeasure.U, arrangeMeasure.V));
+                                break;
+                            }
+
+                            case VerticalAlignment.Stretch:
+                                child.Arrange(new Rect(arrangePosition.U, arrangePosition.V, arrangeMeasure.U, maxRowHeight));
+                                break;
+                            case VerticalAlignment.Top:
+                            default:
+                                child.Arrange(new Rect(arrangePosition.U, arrangePosition.V, arrangeMeasure.U, arrangeMeasure.V));
+                                break;
+                        }
+                    }
+                    else
+                    {
+                        child.Arrange(new Rect(arrangePosition.V, arrangePosition.U, arrangeMeasure.V, arrangeMeasure.U));
+                    }
+                }
             }
 
             return finalSize;