Add FrameworkElement.VerticalAlignment and FrameworkElement.HorizontalAlignment support to WrapPanel

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/WrapPanel/WrapPanel.bind

@@ -49,6 +49,16 @@
                               HorizontalSpacing="@[HorizontalSpacing:Slider:5:0-200]@" />
         </ItemsPanelTemplate>
       </ItemsControl.ItemsPanel>
+      <ListView.ItemContainerStyle>
+        <Style TargetType="ListViewItem">
+          <!-- Change those values to change the WrapPanel's children alignment -->
+          <Setter Property="VerticalContentAlignment" Value="Center" />
+          <Setter Property="HorizontalContentAlignment" Value="Center" />
+          <Setter Property="Padding" Value="0" />
+          <Setter Property="MinWidth" Value="0" />
+          <Setter Property="MinHeight" Value="0" />
+        </Style>
+      </ListView.ItemContainerStyle>
     </ListView>
   </Grid>
 </Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/WrapPanel/WrapPanelPage.xaml.cs

@@ -64,8 +64,8 @@ private void AddButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
             {
                 Category = "Remove",
                 Thumbnail = "ms-appx:///Assets/Photos/BigFourSummerHeat.jpg",
-                Width = Rand.Next(120, 180),
-                Height = Rand.Next(80, 130)
+                Width = Rand.Next(60, 180),
+                Height = Rand.Next(40, 140)
             });
         }
 

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

@@ -2,6 +2,9 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 // See the LICENSE file in the project root for more information.
 
+using System;
+using System.Collections.Generic;
+using Windows.Foundation;
 using Windows.UI.Xaml.Controls;
 
 namespace Microsoft.Toolkit.Uwp.UI.Controls
@@ -14,12 +17,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)
@@ -33,6 +41,55 @@ public UvMeasure(Orientation orientation, double width, double height)
                     V = width;
                 }
             }
+
+            public UvMeasure Add(double u, double v)
+                => new UvMeasure { U = U + u, V = V + v };
+        }
+
+        private struct UvRect
+        {
+            public UvMeasure Position { get; set; }
+
+            public UvMeasure Size { get; set; }
+
+            public Rect ToRect(Orientation orientation)
+            {
+                switch (orientation)
+                {
+                    case Orientation.Vertical:
+                        return new Rect(Position.V, Position.U, Size.V, Size.U);
+                    case Orientation.Horizontal:
+                        return new Rect(Position.U, Position.V, Size.U, Size.V);
+                    default:
+                        throw new NotSupportedException();
+                }
+            }
+        }
+
+        private class Row
+        {
+            private readonly List<UvRect> _childrenRects;
+            private UvMeasure _rowSize;
+
+            public Row()
+            {
+                _childrenRects = new List<UvRect>();
+                _rowSize = UvMeasure.Zero;
+            }
+
+            public IReadOnlyList<UvRect> ChildrenRects => _childrenRects;
+
+            /// <summary>
+            /// Gets the size of the row.
+            /// </summary>
+            public UvMeasure Size => _rowSize;
+
+            public void Add(UvMeasure position, UvMeasure size)
+            {
+                _childrenRects.Add(new UvRect { Position = position, Size = size });
+                _rowSize.U = Math.Max(_rowSize.U, position.U + size.U);
+                _rowSize.V = Math.Max(_rowSize.V, size.V);
+            }
         }
     }
 }

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

@@ -3,6 +3,7 @@
 // See the LICENSE file in the project root for more information.
 
 using System;
+using System.Collections.Generic;
 using Windows.Foundation;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
@@ -141,7 +142,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
@@ -199,6 +200,7 @@ protected override Size MeasureOverride(Size availableSize)
         /// <inheritdoc />
         protected override Size ArrangeOverride(Size finalSize)
         {
+            var rows = new List<Row>();
             if (Children.Count > 0)
             {
                 var parentMeasure = new UvMeasure(Orientation, finalSize.Width, finalSize.Height);
@@ -207,10 +209,10 @@ 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;
+                var currentRow = new Row();
                 void Arrange(UIElement child, bool isLast = false)
                 {
-                    var desiredMeasure = new UvMeasure(Orientation, child.DesiredSize.Width, child.DesiredSize.Height);
+                    var desiredMeasure = new UvMeasure(Orientation, child.DesiredSize);
                     if (desiredMeasure.U == 0)
                     {
                         return; // if an item is collapsed, avoid adding the spacing
@@ -220,8 +222,10 @@ void Arrange(UIElement child, bool isLast = false)
                     {
                         // next row!
                         position.U = paddingStart.U;
-                        position.V += currentV + spacingMeasure.V;
-                        currentV = 0;
+                        position.V += currentRow.Size.V + spacingMeasure.V;
+
+                        rows.Add(currentRow);
+                        currentRow = new Row();
                     }
 
                     // Stretch the last item to fill the available space
@@ -230,19 +234,10 @@ 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));
-                    }
+                    currentRow.Add(position, desiredMeasure);
 
                     // adjust the location for the next items
                     position.U += desiredMeasure.U + spacingMeasure.U;
-                    currentV = Math.Max(desiredMeasure.V, currentV);
                 }
 
                 var lastIndex = Children.Count - 1;
@@ -252,6 +247,31 @@ void Arrange(UIElement child, bool isLast = false)
                 }
 
                 Arrange(Children[lastIndex], StretchChild == StretchChild.Last);
+                if (currentRow.ChildrenRects.Count > 0)
+                {
+                    rows.Add(currentRow);
+                }
+            }
+
+            if (rows.Count > 0)
+            {
+                // Now that we have all the data, we do the actual arrange pass
+                var childIndex = 0;
+                foreach (var row in rows)
+                {
+                    foreach (var rect in row.ChildrenRects)
+                    {
+                        var child = Children[childIndex++];
+                        var arrangeRect = new UvRect
+                        {
+                            Position = rect.Position,
+                            Size = new UvMeasure { U = rect.Size.U, V = row.Size.V },
+                        };
+
+                        var finalRect = arrangeRect.ToRect(Orientation);
+                        child.Arrange(finalRect);
+                    }
+                }
             }
 
             return finalSize;