Add FrameworkElement.VerticalAlignment and FrameworkElement.HorizontalAlignment support to WrapPanel (#3471)

## Fixes #3466
This PR adds the support of the `FrameworkElement.VerticalAlignment` and `FrameworkElement.HorizontalAlignment` to `WrapPanel`.

## PR Type
What kind of change does this PR introduce?
 - Bugfix

## What is the current behavior?
The wrap panel is always top/left aligning its children.

## What is the new behavior?
The controls will now use the children alignment to properly align them inside their row/column.
The `Arrange` code has been updated and is now a two steps process. The position and size of all the controls are stored in a new `UvRect` structure. Those `UvRect` are grouped by `Row`. This allows us to get the final height of the row before drawing the children so we can adjust their position.

**VerticalAlignment.Top**
![image](https://user-images.githubusercontent.com/20152272/92946831-74f88e80-f457-11ea-9467-1e3124ef837a.png)

**VerticalAlignment.Center**
![image](https://user-images.githubusercontent.com/20152272/92946849-7c1f9c80-f457-11ea-8a1c-868438d9da90.png)
![image](https://user-images.githubusercontent.com/20152272/92946920-978aa780-f457-11ea-9928-1346b5cf3a8e.png)

**VerticalAlignment.Bottom**
![image](https://user-images.githubusercontent.com/20152272/92946873-8772c800-f457-11ea-86ae-049fbe1676ab.png)

**VerticalAlignment.Stretch**
![image](https://user-images.githubusercontent.com/20152272/92946900-90fc3000-f457-11ea-8f70-fe01db58930a.png)


## PR Checklist

Please check if your PR fulfills the following requirements:

- [x] Tested code with current [supported SDKs](../readme.md#supported)
- [ ] Pull Request has been submitted to the documentation repository [instructions](..\contributing.md#docs). Link: <!-- docs PR link -->
- [x] Sample in sample app has been added / updated (for bug fixes / features)
    - [ ] Icon has been created (if new sample) following the [Thumbnail Style Guide and templates](https://github.com/windows-toolkit/WindowsCommunityToolkit-design-assets)
- [ ] Tests for the changes have been added (for bug fixes / features) (if applicable)
- [ ] Header has been added to all new source files (run *build/UpdateHeaders.bat*)
- [x] Contains **NO** breaking changes

Author: msftbot[bot]

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,10 @@
 // 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 Microsoft.Toolkit.Diagnostics;
+using Windows.Foundation;
 using Windows.UI.Xaml.Controls;
 
 namespace Microsoft.Toolkit.Uwp.UI.Controls
@@ -14,12 +18,17 @@ public partial class WrapPanel
         [System.Diagnostics.DebuggerDisplay("U = {U} V = {V}")]
         private struct UvMeasure
         {
-            internal static readonly UvMeasure Zero = default(UvMeasure);
+            internal static 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 +42,56 @@ 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 };
+
+            public UvMeasure Add(UvMeasure measure)
+                => Add(measure.U, measure.V);
+
+            public Size ToSize(Orientation orientation)
+                => orientation == Orientation.Horizontal ? new Size(U, V) : new Size(V, U);
+        }
+
+        private struct UvRect
+        {
+            public UvMeasure Position { get; set; }
+
+            public UvMeasure Size { get; set; }
+
+            public Rect ToRect(Orientation orientation) => orientation switch
+            {
+                Orientation.Vertical => new Rect(Position.V, Position.U, Size.V, Size.U),
+                Orientation.Horizontal => new Rect(Position.U, Position.V, Size.U, Size.V),
+                _ => ThrowHelper.ThrowNotSupportedException<Rect>("unsupported orientation"),
+            };
+        }
+
+        private struct Row
+        {
+            public Row(List<UvRect> childrenRects, UvMeasure size)
+            {
+                ChildrenRects = childrenRects;
+                Size = size;
+            }
+
+            public List<UvRect> ChildrenRects { get; }
+
+            public UvMeasure Size { get; set; }
+
+            public UvRect Rect => ChildrenRects.Count > 0 ?
+                new UvRect { Position = ChildrenRects[0].Position, Size = Size } :
+                new UvRect { Position = UvMeasure.Zero, Size = Size };
+
+            public void Add(UvMeasure position, UvMeasure size)
+            {
+                ChildrenRects.Add(new UvRect { Position = position, Size = size });
+                Size = new UvMeasure
+                {
+                    U = position.U + size.U,
+                    V = Math.Max(Size.V, size.V),
+                };
+            }
         }
     }
 }

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;
@@ -128,133 +130,130 @@ private static void LayoutPropertyChanged(DependencyObject d, DependencyProperty
             }
         }
 
+        private readonly List<Row> _rows = new List<Row>();
+
         /// <inheritdoc />
         protected override Size MeasureOverride(Size availableSize)
         {
-            availableSize.Width = availableSize.Width - Padding.Left - Padding.Right;
-            availableSize.Height = availableSize.Height - Padding.Top - Padding.Bottom;
-            var totalMeasure = UvMeasure.Zero;
-            var parentMeasure = new UvMeasure(Orientation, availableSize.Width, availableSize.Height);
-            var spacingMeasure = new UvMeasure(Orientation, HorizontalSpacing, VerticalSpacing);
-            var lineMeasure = UvMeasure.Zero;
-
+            var childAvailableSize = new Size(
+                availableSize.Width - Padding.Left - Padding.Right,
+                availableSize.Height - Padding.Top - Padding.Bottom);
             foreach (var child in Children)
             {
-                child.Measure(availableSize);
-                var currentMeasure = new UvMeasure(Orientation, child.DesiredSize.Width, child.DesiredSize.Height);
-                if (currentMeasure.U == 0)
-                {
-                    continue; // ignore collapsed items
-                }
+                child.Measure(childAvailableSize);
+            }
 
-                // if this is the first item, do not add spacing. Spacing is added to the "left"
-                double uChange = lineMeasure.U == 0
-                    ? currentMeasure.U
-                    : currentMeasure.U + spacingMeasure.U;
-                if (parentMeasure.U >= uChange + lineMeasure.U)
-                {
-                    lineMeasure.U += uChange;
-                    lineMeasure.V = Math.Max(lineMeasure.V, currentMeasure.V);
-                }
-                else
-                {
-                    // new line should be added
-                    // to get the max U to provide it correctly to ui width ex: ---| or -----|
-                    totalMeasure.U = Math.Max(lineMeasure.U, totalMeasure.U);
-                    totalMeasure.V += lineMeasure.V + spacingMeasure.V;
+            var requiredSize = UpdateRows(availableSize);
+            return requiredSize;
+        }
 
-                    // if the next new row still can handle more controls
-                    if (parentMeasure.U > currentMeasure.U)
-                    {
-                        // set lineMeasure initial values to the currentMeasure to be calculated later on the new loop
-                        lineMeasure = currentMeasure;
-                    }
+        /// <inheritdoc />
+        protected override Size ArrangeOverride(Size finalSize)
+        {
+            if ((Orientation == Orientation.Horizontal && finalSize.Width < DesiredSize.Width) ||
+                (Orientation == Orientation.Vertical && finalSize.Height < DesiredSize.Height))
+            {
+                // We haven't received our desired size. We need to refresh the rows.
+                UpdateRows(finalSize);
+            }
 
-                    // the control will take one row alone
-                    else
+            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)
                     {
-                        // validate the new control measures
-                        totalMeasure.U = Math.Max(currentMeasure.U, totalMeasure.U);
-                        totalMeasure.V += currentMeasure.V;
+                        var child = Children[childIndex++];
+                        var arrangeRect = new UvRect
+                        {
+                            Position = rect.Position,
+                            Size = new UvMeasure { U = rect.Size.U, V = row.Size.V },
+                        };
 
-                        // add new empty line
-                        lineMeasure = UvMeasure.Zero;
+                        var finalRect = arrangeRect.ToRect(Orientation);
+                        child.Arrange(finalRect);
                     }
                 }
             }
 
-            // update value with the last line
-            // if the last loop is (parentMeasure.U > currentMeasure.U + lineMeasure.U) the total isn't calculated then calculate it
-            // if the last loop is (parentMeasure.U > currentMeasure.U) the currentMeasure isn't added to the total so add it here
-            // for the last condition it is zeros so adding it will make no difference
-            // this way is faster than an if condition in every loop for checking the last item
-            totalMeasure.U = Math.Max(lineMeasure.U, totalMeasure.U);
-            totalMeasure.V += lineMeasure.V;
-
-            totalMeasure.U = Math.Ceiling(totalMeasure.U);
-
-            return Orientation == Orientation.Horizontal ? new Size(totalMeasure.U, totalMeasure.V) : new Size(totalMeasure.V, totalMeasure.U);
+            return finalSize;
         }
 
-        /// <inheritdoc />
-        protected override Size ArrangeOverride(Size finalSize)
+        private Size UpdateRows(Size availableSize)
         {
-            if (Children.Count > 0)
+            _rows.Clear();
+
+            var paddingStart = new UvMeasure(Orientation, Padding.Left, Padding.Top);
+            var paddingEnd = new UvMeasure(Orientation, Padding.Right, Padding.Bottom);
+
+            if (Children.Count == 0)
             {
-                var parentMeasure = new UvMeasure(Orientation, finalSize.Width, finalSize.Height);
-                var spacingMeasure = new UvMeasure(Orientation, HorizontalSpacing, VerticalSpacing);
-                var paddingStart = new UvMeasure(Orientation, Padding.Left, Padding.Top);
-                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 desiredMeasure = new UvMeasure(Orientation, child.DesiredSize.Width, child.DesiredSize.Height);
-                    if (desiredMeasure.U == 0)
-                    {
-                        return; // if an item is collapsed, avoid adding the spacing
-                    }
+                var emptySize = paddingStart.Add(paddingEnd).ToSize(Orientation);
+                return emptySize;
+            }
 
-                    if ((desiredMeasure.U + position.U + paddingEnd.U) > parentMeasure.U)
-                    {
-                        // next row!
-                        position.U = paddingStart.U;
-                        position.V += currentV + spacingMeasure.V;
-                        currentV = 0;
-                    }
+            var parentMeasure = new UvMeasure(Orientation, availableSize.Width, availableSize.Height);
+            var spacingMeasure = new UvMeasure(Orientation, HorizontalSpacing, VerticalSpacing);
+            var position = new UvMeasure(Orientation, Padding.Left, Padding.Top);
 
-                    // Stretch the last item to fill the available space
-                    if (isLast)
-                    {
-                        desiredMeasure.U = parentMeasure.U - position.U;
-                    }
+            var currentRow = new Row(new List<UvRect>(), default);
+            var finalMeasure = new UvMeasure(Orientation, width: 0.0, height: 0.0);
+            void Arrange(UIElement child, bool isLast = false)
+            {
+                var desiredMeasure = new UvMeasure(Orientation, child.DesiredSize);
+                if (desiredMeasure.U == 0)
+                {
+                    return; // if an item is collapsed, avoid adding the spacing
+                }
 
-                    // 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));
-                    }
+                if ((desiredMeasure.U + position.U + paddingEnd.U) > parentMeasure.U)
+                {
+                    // next row!
+                    position.U = paddingStart.U;
+                    position.V += currentRow.Size.V + spacingMeasure.V;
 
-                    // adjust the location for the next items
-                    position.U += desiredMeasure.U + spacingMeasure.U;
-                    currentV = Math.Max(desiredMeasure.V, currentV);
+                    _rows.Add(currentRow);
+                    currentRow = new Row(new List<UvRect>(), default);
                 }
 
-                var lastIndex = Children.Count - 1;
-                for (var i = 0; i < lastIndex; i++)
+                // Stretch the last item to fill the available space
+                if (isLast)
                 {
-                    Arrange(Children[i]);
+                    desiredMeasure.U = parentMeasure.U - position.U;
                 }
 
-                Arrange(Children[lastIndex], StretchChild == StretchChild.Last);
+                currentRow.Add(position, desiredMeasure);
+
+                // adjust the location for the next items
+                position.U += desiredMeasure.U + spacingMeasure.U;
+                finalMeasure.U = Math.Max(finalMeasure.U, position.U);
             }
 
-            return finalSize;
+            var lastIndex = Children.Count - 1;
+            for (var i = 0; i < lastIndex; i++)
+            {
+                Arrange(Children[i]);
+            }
+
+            Arrange(Children[lastIndex], StretchChild == StretchChild.Last);
+            if (currentRow.ChildrenRects.Count > 0)
+            {
+                _rows.Add(currentRow);
+            }
+
+            if (_rows.Count == 0)
+            {
+                var emptySize = paddingStart.Add(paddingEnd).ToSize(Orientation);
+                return emptySize;
+            }
+
+            // Get max V here before computing final rect
+            var lastRowRect = _rows.Last().Rect;
+            finalMeasure.V = lastRowRect.Position.V + lastRowRect.Size.V;
+            var finalRect = finalMeasure.Add(paddingEnd).ToSize(Orientation);
+            return finalRect;
         }
     }
 }