Add initial ConstrainedBox control for AspectRatio and Scaling

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.cs → UnitTests/UnitTests.UWP/UI/Controls/Test_ConstrainedBox.Scale.cs

@@ -16,29 +16,33 @@
 
 namespace UnitTests.UWP.UI.Controls
 {
-    [TestClass]
-    public class Test_ConstrainedBox : VisualUITestBase
+    public partial class Test_ConstrainedBox : VisualUITestBase
     {
         [TestCategory("ConstrainedBox")]
         [TestMethod]
-        public async Task Test_ConstrainedBox_Normal_Horizontal()
+        public async Task Test_ConstrainedBox_Normal_ScaleX()
         {
             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"">
+    <Grid x:Name=""ParentGrid"" Width=""200"" Height=""200"">
+      <controls:ConstrainedBox x:Name=""ConstrainedBox"" ScaleX=""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.");
@@ -51,14 +55,21 @@ await App.DispatcherQueue.EnqueueAsync(async () =>
                 Assert.IsNotNull(child, "Could not find inner Border");
 
                 // Check Size
-                Assert.AreEqual(child.ActualWidth, 200, "Width unexpected");
-                Assert.AreEqual(child.ActualHeight, 100, "Height unexpected");
+                Assert.AreEqual(child.ActualWidth, 100);
+                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, 50);
+                Assert.AreEqual(position.Y, 0);
             });
         }
 
         [TestCategory("ConstrainedBox")]
         [TestMethod]
-        public async Task Test_ConstrainedBox_Normal_ScaleX()
+        public async Task Test_ConstrainedBox_Normal_ScaleY()
         {
             await App.DispatcherQueue.EnqueueAsync(async () =>
             {
@@ -67,7 +78,7 @@ await App.DispatcherQueue.EnqueueAsync(async () =>
     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"" ScaleX=""0.5""
+      <controls:ConstrainedBox x:Name=""ConstrainedBox"" ScaleY=""0.5""
                                HorizontalAlignment=""Stretch"" VerticalAlignment=""Stretch"">
         <Border HorizontalAlignment=""Stretch"" VerticalAlignment=""Stretch"" Background=""Red""/>
       </controls:ConstrainedBox>
@@ -93,15 +104,15 @@ await App.DispatcherQueue.EnqueueAsync(async () =>
                 Assert.IsNotNull(child, "Could not find inner Border");
 
                 // Check Size
-                Assert.AreEqual(child.ActualWidth, 100);
-                Assert.AreEqual(child.ActualHeight, 200);
+                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, 50);
-                Assert.AreEqual(position.Y, 0);
+                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" />