Add initial primitive test for each property in isolation

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Primitives/ConstrainedBox.bind

@@ -15,7 +15,10 @@
                              AspectRatio="1:1"
                              MinWidth="64" MaxWidth="512">
         <controls:ConstrainedBox.Background>
-            <!-- TODO: Should I make a DPI aware image? As otherwise scaling doesn't quite work at 150%? -->
+            <!-- TODO: TilesBrush doesn't support Dpi image loading for this scenario
+                 This example is configured for 100% DPI at the moment.
+                 See https://github.com/CommunityToolkit/WindowsCommunityToolkit/issues/4150
+                 -->
             <brushes:TilesBrush TextureUri="ms-appx:///Assets/checker.png"/>
         </controls:ConstrainedBox.Background>
     </controls:ConstrainedBox>

UnitTests/UnitTests.UWP/UI/Controls/Test_ConstrainedBox.AspectRatio.cs

@@ -0,0 +1,96 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// 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.Linq;
+using System.Threading.Tasks;
+using Microsoft.Toolkit.Uwp;
+using Microsoft.Toolkit.Uwp.UI;
+using Microsoft.Toolkit.Uwp.UI.Controls;
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+using Microsoft.VisualStudio.TestTools.UnitTesting.AppContainer;
+using Windows.Foundation;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Markup;
+
+namespace UnitTests.UWP.UI.Controls
+{
+    [TestClass]
+    public partial class Test_ConstrainedBox : VisualUITestBase
+    {
+        [TestCategory("ConstrainedBox")]
+        [TestMethod]
+        public async Task Test_ConstrainedBox_Normal_AspectHorizontal()
+        {
+            await App.DispatcherQueue.EnqueueAsync(async () =>
+            {
+                var treeRoot = XamlReader.Load(@"<Page
+    xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""
+    xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml""
+    xmlns:controls=""using:Microsoft.Toolkit.Uwp.UI.Controls"">
+      <controls:ConstrainedBox x:Name=""ConstrainedBox"" AspectRatio=""2:1"" Width=""200"">
+        <Border HorizontalAlignment=""Stretch"" VerticalAlignment=""Stretch"" Background=""Red""/>
+      </controls:ConstrainedBox>
+</Page>") as FrameworkElement;
+
+                Assert.IsNotNull(treeRoot, "Could not load XAML tree.");
+
+                // Initialize Visual Tree
+                await SetTestContentAsync(treeRoot);
+
+                var panel = treeRoot.FindChild("ConstrainedBox") as ConstrainedBox;
+
+                Assert.IsNotNull(panel, "Could not find ConstrainedBox in tree.");
+
+                // Force Layout calculations
+                panel.UpdateLayout();
+
+                var child = panel.Content as Border;
+
+                Assert.IsNotNull(child, "Could not find inner Border");
+
+                // Check Size
+                Assert.AreEqual(child.ActualWidth, 200, "Width unexpected");
+                Assert.AreEqual(child.ActualHeight, 100, "Height unexpected");
+            });
+        }
+
+        [TestCategory("ConstrainedBox")]
+        [TestMethod]
+        public async Task Test_ConstrainedBox_Normal_AspectVertical()
+        {
+            await App.DispatcherQueue.EnqueueAsync(async () =>
+            {
+                var treeRoot = XamlReader.Load(@"<Page
+    xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""
+    xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml""
+    xmlns:controls=""using:Microsoft.Toolkit.Uwp.UI.Controls"">
+      <controls:ConstrainedBox x:Name=""ConstrainedBox"" AspectRatio=""1:2"" Height=""200"">
+        <Border HorizontalAlignment=""Stretch"" VerticalAlignment=""Stretch"" Background=""Red""/>
+      </controls:ConstrainedBox>
+</Page>") as FrameworkElement;
+
+                Assert.IsNotNull(treeRoot, "Could not load XAML tree.");
+
+                // Initialize Visual Tree
+                await SetTestContentAsync(treeRoot);
+
+                var panel = treeRoot.FindChild("ConstrainedBox") as ConstrainedBox;
+
+                Assert.IsNotNull(panel, "Could not find ConstrainedBox in tree.");
+
+                // Force Layout calculations
+                panel.UpdateLayout();
+
+                var child = panel.Content as Border;
+
+                Assert.IsNotNull(child, "Could not find inner Border");
+
+                // Check Size
+                Assert.AreEqual(child.ActualWidth, 100, "Width unexpected");
+                Assert.AreEqual(child.ActualHeight, 200, "Height unexpected");
+            });
+        }
+    }
+}

UnitTests/UnitTests.UWP/UI/Controls/Test_ConstrainedBox.Multiple.cs

@@ -0,0 +1,119 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// 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.Linq;
+using System.Threading.Tasks;
+using Microsoft.Toolkit.Uwp;
+using Microsoft.Toolkit.Uwp.UI;
+using Microsoft.Toolkit.Uwp.UI.Controls;
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+using Microsoft.VisualStudio.TestTools.UnitTesting.AppContainer;
+using Windows.Foundation;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Markup;
+
+namespace UnitTests.UWP.UI.Controls
+{
+    public partial class Test_ConstrainedBox : VisualUITestBase
+    {
+        [TestCategory("ConstrainedBox")]
+        [TestMethod]
+        public async Task Test_ConstrainedBox_Normal_MultipleX()
+        {
+            await App.DispatcherQueue.EnqueueAsync(async () =>
+            {
+                var treeRoot = XamlReader.Load(@"<Page
+    xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""
+    xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml""
+    xmlns:controls=""using:Microsoft.Toolkit.Uwp.UI.Controls"">
+    <Grid x:Name=""ParentGrid"" Width=""200"" Height=""200"">
+      <controls:ConstrainedBox x:Name=""ConstrainedBox"" MultipleX=""32""
+                               HorizontalAlignment=""Stretch"" VerticalAlignment=""Stretch"">
+        <Border HorizontalAlignment=""Stretch"" VerticalAlignment=""Stretch"" Background=""Red""/>
+      </controls:ConstrainedBox>
+    </Grid>
+</Page>") as FrameworkElement;
+
+                Assert.IsNotNull(treeRoot, "Could not load XAML tree.");
+
+                // Initialize Visual Tree
+                await SetTestContentAsync(treeRoot);
+
+                var grid = treeRoot.FindChild("ParentGrid") as Grid;
+
+                var panel = treeRoot.FindChild("ConstrainedBox") as ConstrainedBox;
+
+                Assert.IsNotNull(panel, "Could not find ConstrainedBox in tree.");
+
+                // Force Layout calculations
+                panel.UpdateLayout();
+
+                var child = panel.Content as Border;
+
+                Assert.IsNotNull(child, "Could not find inner Border");
+
+                // Check Size
+                Assert.AreEqual(child.ActualWidth, 192);
+                Assert.AreEqual(child.ActualHeight, 200);
+
+                // Check inner Positioning, we do this from the Grid as the ConstainedBox also modifies its own size
+                // and is hugging the child.
+                var position = grid.CoordinatesTo(child);
+
+                Assert.AreEqual(position.X, 4);
+                Assert.AreEqual(position.Y, 0);
+            });
+        }
+
+        [TestCategory("ConstrainedBox")]
+        [TestMethod]
+        public async Task Test_ConstrainedBox_Normal_MultipleY()
+        {
+            await App.DispatcherQueue.EnqueueAsync(async () =>
+            {
+                var treeRoot = XamlReader.Load(@"<Page
+    xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""
+    xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml""
+    xmlns:controls=""using:Microsoft.Toolkit.Uwp.UI.Controls"">
+    <Grid x:Name=""ParentGrid"" Width=""200"" Height=""200"">
+      <controls:ConstrainedBox x:Name=""ConstrainedBox"" MultipleY=""32""
+                               HorizontalAlignment=""Stretch"" VerticalAlignment=""Stretch"">
+        <Border HorizontalAlignment=""Stretch"" VerticalAlignment=""Stretch"" Background=""Red""/>
+      </controls:ConstrainedBox>
+    </Grid>
+</Page>") as FrameworkElement;
+
+                Assert.IsNotNull(treeRoot, "Could not load XAML tree.");
+
+                // Initialize Visual Tree
+                await SetTestContentAsync(treeRoot);
+
+                var grid = treeRoot.FindChild("ParentGrid") as Grid;
+
+                var panel = treeRoot.FindChild("ConstrainedBox") as ConstrainedBox;
+
+                Assert.IsNotNull(panel, "Could not find ConstrainedBox in tree.");
+
+                // Force Layout calculations
+                panel.UpdateLayout();
+
+                var child = panel.Content as Border;
+
+                Assert.IsNotNull(child, "Could not find inner Border");
+
+                // Check Size
+                Assert.AreEqual(child.ActualWidth, 200);
+                Assert.AreEqual(child.ActualHeight, 192);
+
+                // Check inner Positioning, we do this from the Grid as the ConstainedBox also modifies its own size
+                // and is hugging the child.
+                var position = grid.CoordinatesTo(child);
+
+                Assert.AreEqual(position.X, 0);
+                Assert.AreEqual(position.Y, 4);
+            });
+        }
+    }
+}

UnitTests/UnitTests.UWP/UI/Controls/Test_ConstrainedBox.Scale.cs

@@ -16,46 +16,8 @@ using Windows.UI.Xaml.Markup;
 
 namespace UnitTests.UWP.UI.Controls
 {
-    [TestClass]
+    public partial class Test_ConstrainedBox : VisualUITestBase
-    public class Test_ConstrainedBox : VisualUITestBase
     {
-        [TestCategory("ConstrainedBox")]
-        [TestMethod]
-        public async Task Test_ConstrainedBox_Normal_Horizontal()
-        {
-            await App.DispatcherQueue.EnqueueAsync(async () =>
-            {
-                var treeRoot = XamlReader.Load(@"<Page
-    xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""
-    xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml""
-    xmlns:controls=""using:Microsoft.Toolkit.Uwp.UI.Controls"">
-      <controls:ConstrainedBox x:Name=""ConstrainedBox"" AspectRatio=""2:1"" Width=""200"">
-        <Border HorizontalAlignment=""Stretch"" VerticalAlignment=""Stretch"" Background=""Red""/>
-      </controls:ConstrainedBox>
-</Page>") as FrameworkElement;
-
-                Assert.IsNotNull(treeRoot, "Could not load XAML tree.");
-
-                // Initialize Visual Tree
-                await SetTestContentAsync(treeRoot);
-
-                var panel = treeRoot.FindChild("ConstrainedBox") as ConstrainedBox;
-
-                Assert.IsNotNull(panel, "Could not find ConstrainedBox in tree.");
-
-                // Force Layout calculations
-                panel.UpdateLayout();
-
-                var child = panel.Content as Border;
-
-                Assert.IsNotNull(child, "Could not find inner Border");
-
-                // Check Size
-                Assert.AreEqual(child.ActualWidth, 200, "Width unexpected");
-                Assert.AreEqual(child.ActualHeight, 100, "Height unexpected");
-            });
-        }
-
         [TestCategory("ConstrainedBox")]
         [TestMethod]
         public async Task Test_ConstrainedBox_Normal_ScaleX()
@@ -104,5 +66,54 @@ namespace UnitTests.UWP.UI.Controls
                 Assert.AreEqual(position.Y, 0);
             });
         }
+
+        [TestCategory("ConstrainedBox")]
+        [TestMethod]
+        public async Task Test_ConstrainedBox_Normal_ScaleY()
+        {
+            await App.DispatcherQueue.EnqueueAsync(async () =>
+            {
+                var treeRoot = XamlReader.Load(@"<Page
+    xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""
+    xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml""
+    xmlns:controls=""using:Microsoft.Toolkit.Uwp.UI.Controls"">
+    <Grid x:Name=""ParentGrid"" Width=""200"" Height=""200"">
+      <controls:ConstrainedBox x:Name=""ConstrainedBox"" ScaleY=""0.5""
+                               HorizontalAlignment=""Stretch"" VerticalAlignment=""Stretch"">
+        <Border HorizontalAlignment=""Stretch"" VerticalAlignment=""Stretch"" Background=""Red""/>
+      </controls:ConstrainedBox>
+    </Grid>
+</Page>") as FrameworkElement;
+
+                Assert.IsNotNull(treeRoot, "Could not load XAML tree.");
+
+                // Initialize Visual Tree
+                await SetTestContentAsync(treeRoot);
+
+                var grid = treeRoot.FindChild("ParentGrid") as Grid;
+
+                var panel = treeRoot.FindChild("ConstrainedBox") as ConstrainedBox;
+
+                Assert.IsNotNull(panel, "Could not find ConstrainedBox in tree.");
+
+                // Force Layout calculations
+                panel.UpdateLayout();
+
+                var child = panel.Content as Border;
+
+                Assert.IsNotNull(child, "Could not find inner Border");
+
+                // Check Size
+                Assert.AreEqual(child.ActualWidth, 200);
+                Assert.AreEqual(child.ActualHeight, 100);
+
+                // Check inner Positioning, we do this from the Grid as the ConstainedBox also modifies its own size
+                // and is hugging the child.
+                var position = grid.CoordinatesTo(child);
+
+                Assert.AreEqual(position.X, 0);
+                Assert.AreEqual(position.Y, 50);
+            });
+        }
     }
 }

UnitTests/UnitTests.UWP/UnitTests.UWP.csproj

@@ -219,6 +219,8 @@
     <Compile Include="UI\Collection\Test_IncrementalLoadingCollection.cs" />
     <Compile Include="UI\Controls\Test_Carousel.cs" />
     <Compile Include="UI\Controls\Test_BladeView.cs" />
+    <Compile Include="UI\Controls\Test_ConstrainedBox.AspectRatio.cs" />
+    <Compile Include="UI\Controls\Test_ConstrainedBox.Multiple.cs" />
     <Compile Include="UI\Controls\Test_ImageEx.cs" />
     <Compile Include="UI\Controls\Test_RadialGauge.cs" />
     <Compile Include="UI\Controls\Test_TextToolbar_Localization.cs" />
@@ -231,7 +233,7 @@
     <Compile Include="UI\Controls\Test_UniformGrid_FreeSpots.cs" />
     <Compile Include="UI\Controls\Test_UniformGrid_Dimensions.cs" />
     <Compile Include="UI\Controls\Test_RangeSelector.cs" />
-    <Compile Include="UI\Controls\Test_ConstrainedBox.cs" />
+    <Compile Include="UI\Controls\Test_ConstrainedBox.Scale.cs" />
     <Compile Include="UI\Controls\Test_WrapPanel_Visibility.cs" />
     <Compile Include="UI\Controls\Test_WrapPanel_BasicLayout.cs" />
     <Compile Include="UI\Extensions\Test_VisualExtensions.cs" />