☠️ GridSplitter refactor w/ new base class

Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj

@@ -273,6 +273,7 @@
     <Content Include="Icons\More.png" />
     <Content Include="Icons\Notifications.png" />
     <Content Include="Icons\Services.png" />
+    <Content Include="SamplePages\ContentSizer\ContentSizer.png" />
     <Content Include="SamplePages\Animations\Effects\EffectAnimations.png">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
@@ -607,6 +608,7 @@
     <Content Include="SamplePages\StaggeredLayout\StaggeredLayout.bind" />
     <Content Include="SamplePages\EnumValuesExtension\EnumValuesExtensionXaml.bind" />
     <Content Include="SamplePages\EnumValuesExtension\EnumValuesExtensionCode.bind" />
+    <Content Include="SamplePages\ContentSizer\ContentSizer.bind" />
     <Content Include="SamplePages\FocusBehavior\FocusBehaviorXaml.bind" />
     <Content Include="SamplePages\AutoFocusBehavior\AutoFocusBehaviorXaml.bind" />
     <Content Include="SamplePages\ColorPicker\ColorPickerXaml.bind" />

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

@@ -0,0 +1,48 @@
+<Page
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
+    mc:Ignorable="d">
+
+  <Grid x:Name="RootGrid">
+    <!-- Just to separate our two examples -->
+    <Grid.ColumnDefinitions>
+      <ColumnDefinition Width="Auto"/>
+      <ColumnDefinition/>
+    </Grid.ColumnDefinitions>
+
+    <!-- Left-side 'Shelf' -->
+    <StackPanel Orientation="Horizontal">
+      <Border x:Name="SideContent"
+              Background="DarkGreen"
+              MinWidth="200"
+              MaxWidth="600">
+        <TextBlock HorizontalAlignment="Center"
+                   VerticalAlignment="Center">
+          Side Content
+        </TextBlock>
+      </Border>
+      <controls:ContentSizer TargetControl="{Binding ElementName=SideContent}"/>
+    </StackPanel>
+
+    <!-- Bottom 'Shelf' -->
+    <controls:Expander x:Name="TopExpander"
+                       VerticalAlignment="Top"
+                       ExpandDirection="Up"
+                       Header="This is some Shelf"
+                       HorizontalContentAlignment="Stretch"
+                       IsExpanded="True"
+                       Grid.Column="1">
+      <Grid Height="256">
+        <TextBlock HorizontalAlignment="Center"
+                   TextWrapping="Wrap"
+                   Text="This is the expanded content"
+                   VerticalAlignment="Center"/>
+        <controls:ContentSizer ResizeDirection="Horizontal" Height="16"
+                               VerticalAlignment="Bottom"/>
+      </Grid>
+    </controls:Expander>
+  </Grid>
+</Page>

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

@@ -63,7 +63,6 @@
 
     <!--Column Grid Splitter-->
     <controls:GridSplitter
-            GripperCursor="@[GripperCursor:Enum:GripperCursorType.Default]"
             HorizontalAlignment="Left"
             Grid.Column="@[Column:Slider:1:0-2]"
             ResizeDirection="@[ResizeDirection:Enum:GridResizeDirection.Auto]"
@@ -85,14 +84,6 @@
       <controls:GridSplitter.RenderTransform>
         <TranslateTransform Y="-8" />
       </controls:GridSplitter.RenderTransform>
-      <controls:GridSplitter.Element>
-          <TextBlock HorizontalAlignment="Center"
-                         IsHitTestVisible="False"
-                         VerticalAlignment="Center"
-                         Text="&#xE76F;"
-                         Foreground="White"
-                         FontFamily="Segoe MDL2 Assets"/>
-      </controls:GridSplitter.Element>
     </controls:GridSplitter>
 
     <VisualStateManager.VisualStateGroups>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/XamlOnlyPage.xaml

@@ -50,6 +50,7 @@
                 <controls:Case IsDefault="True" />
             </controls:CaseCollection>
         </controls:SwitchPresenter>
+        <controls:ContentSizer x:Key="ContentSizerControl" />
         <controls:ConstrainedBox x:Key="ConstrainedBoxControl" />
         <media:AttachedCardShadow x:Key="AttachedShadow" />
         <ui:AttachedDropShadow x:Key="AttachedDropShadow" />

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json

@@ -175,6 +175,15 @@
         "Icon": "/SamplePages/ScrollHeader/ScrollHeader.png",
         "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/behaviors/HeaderBehaviors.md"
       },
+      {
+        "Name": "ContentSizer",
+        "Subcategory": "Layout",
+        "About": "ContentSizer is a general sizing control which can manipulate the size of its parent or other elements. Used as a building block for more complex UI systems.",
+        "CodeUrl": "https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/main/Microsoft.Toolkit.Uwp.UI.Controls.Layout/ContentSizer",
+        "XamlCodeFile": "/SamplePages/ContentSizer/ContentSizer.bind",
+        "Icon": "/SamplePages/ContentSizer/ContentSizer.png",
+        "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/ContentSizer.md"
+      },
       {
         "Name": "GridSplitter",
         "Type": "GridSplitterPage",

Microsoft.Toolkit.Uwp.UI.Controls.Layout/ContentSizer/ContentResizeDirection.cs

@@ -0,0 +1,28 @@
+// 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.
+
+namespace Microsoft.Toolkit.Uwp.UI.Controls
+{
+    /// <summary>
+    /// Enum to indicate whether <see cref="ContentSizer"/> resizes Vertically or Horizontally.
+    /// </summary>
+    public enum ContentResizeDirection
+    {
+        /// <summary>
+        /// Determines whether to resize rows or columns based on its Alignment and
+        /// width compared to height
+        /// </summary>
+        Auto, // TODO: Detect?
+
+        /// <summary>
+        /// Resize columns when dragging Splitter.
+        /// </summary>
+        Vertical,
+
+        /// <summary>
+        /// Resize rows when dragging Splitter.
+        /// </summary>
+        Horizontal
+    }
+}

Microsoft.Toolkit.Uwp.UI.Controls.Layout/ContentSizer/ContentSizer.Events.cs

@@ -0,0 +1,127 @@
+// 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 Microsoft.Toolkit.Uwp.UI;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Input;
+
+namespace Microsoft.Toolkit.Uwp.UI.Controls
+{
+    /// <summary>
+    /// Events for <see cref="ContentSizer"/>.
+    /// </summary>
+    public partial class ContentSizer
+    {
+        // If no values specified, setup our default behaviors.
+        private void ContentSizer_Loaded(object sender, RoutedEventArgs e)
+        {
+            // Adding Grip to Grid Splitter
+            if (Content == null)
+            {
+                // TODO: Make Converter to put in XAML?
+                Content =
+                    ResizeDirection == ContentResizeDirection.Vertical ? GripperBarVertical : GripperBarHorizontal;
+            }
+
+            if (TargetControl == null)
+            {
+                TargetControl = this.FindAscendant<FrameworkElement>();
+            }
+        }
+
+        private void ContentSizer_KeyUp(object sender, KeyRoutedEventArgs e)
+        {
+            if (ResizeDirection == ContentResizeDirection.Vertical)
+            {
+                if (e.Key == Windows.System.VirtualKey.Left)
+                {
+                    HorizontalMove(-GripperKeyboardChange);
+                }
+                else if (e.Key == Windows.System.VirtualKey.Right)
+                {
+                    HorizontalMove(GripperKeyboardChange);
+                }
+            }
+            else
+            {
+                if (e.Key == Windows.System.VirtualKey.Up)
+                {
+                    VerticalMove(-GripperKeyboardChange);
+                }
+                else if (e.Key == Windows.System.VirtualKey.Down)
+                {
+                    VerticalMove(GripperKeyboardChange);
+                }
+            }
+        }
+
+        /// <inheritdoc />
+        protected override void OnManipulationDelta(ManipulationDeltaRoutedEventArgs e)
+        {
+            var horizontalChange = e.Delta.Translation.X;
+            var verticalChange = e.Delta.Translation.Y;
+
+            if (ResizeDirection == ContentResizeDirection.Vertical)
+            {
+                if (HorizontalMove(horizontalChange))
+                {
+                    return;
+                }
+            }
+            else if (ResizeDirection == ContentResizeDirection.Horizontal)
+            {
+                if (VerticalMove(verticalChange))
+                {
+                    return;
+                }
+            }
+
+            base.OnManipulationDelta(e);
+        }
+
+        private bool VerticalMove(double verticalChange)
+        {
+            if (TargetControl == null)
+            {
+                return true;
+            }
+
+            verticalChange = InvertDragDirection ? -verticalChange : verticalChange;
+
+            if (!IsValidHeight(TargetControl, verticalChange))
+            {
+                return true;
+            }
+
+            // Do we need our ContentResizeDirection to be 4 way? Maybe 'Auto' would check the horizontal/vertical alignment of the target???
+            TargetControl.Height += verticalChange;
+
+            GripperCursor = Windows.UI.Core.CoreCursorType.SizeNorthSouth;
+
+            return false;
+        }
+
+        private bool HorizontalMove(double horizontalChange)
+        {
+            if (TargetControl == null)
+            {
+                return true;
+            }
+
+            horizontalChange = InvertDragDirection ? -horizontalChange : horizontalChange;
+
+            if (!IsValidWidth(TargetControl, horizontalChange))
+            {
+                return true;
+            }
+
+            TargetControl.Width += horizontalChange;
+
+            GripperCursor = Windows.UI.Core.CoreCursorType.SizeWestEast;
+
+            return false;
+        }
+    }
+}

Microsoft.Toolkit.Uwp.UI.Controls.Layout/ContentSizer/ContentSizer.cs

@@ -0,0 +1,56 @@
+// 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 Microsoft.Toolkit.Uwp.UI.Automation.Peers;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Automation.Peers;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Markup;
+
+namespace Microsoft.Toolkit.Uwp.UI.Controls
+{
+    /// <summary>
+    /// The <see cref="ContentSizer"/> is a control which can be used to resize any element, usually its parent. If you are using a <see cref="Grid"/>, use <see cref="GridSplitter"/> instead.
+    /// </summary>
+    [ContentProperty(Name = nameof(Content))]
+    public partial class ContentSizer : SplitBase
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="ContentSizer"/> class.
+        /// </summary>
+        public ContentSizer()
+        {
+            this.DefaultStyleKey = typeof(ContentSizer);
+
+            // TODO: Can this be set in XAML, do we open a WinUI issue to track?
+            ManipulationMode = ManipulationModes.TranslateX | ManipulationModes.TranslateY;
+
+            KeyUp += ContentSizer_KeyUp;
+        }
+
+        /// <inheritdoc/>
+        protected override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+
+            // Note, we re-register for the proper timing to check for default property values. If we just set Loaded once in our constructor this doesn't work... Not sure why... 🤷‍
+
+            // Unhook registered events
+            Loaded -= ContentSizer_Loaded;
+
+            // Register Events
+            Loaded += ContentSizer_Loaded;
+        }
+
+        /// <summary>
+        /// Creates AutomationPeer (<see cref="UIElement.OnCreateAutomationPeer"/>)
+        /// </summary>
+        /// <returns>An automation peer for this <see cref="ContentSizer"/>.</returns>
+        protected override AutomationPeer OnCreateAutomationPeer()
+        {
+            return new ContentSizerAutomationPeer(this);
+        }
+    }
+}

Microsoft.Toolkit.Uwp.UI.Controls.Layout/ContentSizer/ContentSizer.xaml

@@ -0,0 +1,40 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:local="using:Microsoft.Toolkit.Uwp.UI.Controls"
+                    xmlns:ui="using:Microsoft.Toolkit.Uwp.UI">
+    <Style TargetType="local:ContentSizer">
+        <Setter Property="IsTabStop" Value="True" />
+        <Setter Property="UseSystemFocusVisuals" Value="True" />
+        <Setter Property="IsFocusEngagementEnabled" Value="True" />
+        <Setter Property="MinWidth" Value="16" />
+        <Setter Property="MinHeight" Value="16" />
+        <Setter Property="Background" Value="{ThemeResource SystemControlHighlightChromeHighBrush}" />
+        <Setter Property="GripperForeground" Value="{ThemeResource SystemControlForegroundAltHighBrush}" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="AutomationProperties.Name" Value="ms-resource://Microsoft.Toolkit.Uwp.UI.Controls.Layout/Microsoft.Toolkit.Uwp.UI.Controls.Layout/Resources/WCT_ContentSizer_AutomationName" />
+        <Setter Property="ContentTemplate">
+            <Setter.Value>
+                <DataTemplate>
+                    <TextBlock AutomationProperties.AccessibilityView="Raw"
+                               FontFamily="Segoe MDL2 Assets"
+                               Foreground="{TemplateBinding GripperForeground}"
+                               Text="{Binding}" />
+                </DataTemplate>
+            </Setter.Value>
+        </Setter>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="local:ContentSizer">
+                    <Grid ui:FrameworkElementExtensions.Cursor="{TemplateBinding GripperCursor}"
+                          Background="{TemplateBinding Background}">
+                        <ContentPresenter HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                          Content="{TemplateBinding Content}"
+                                          ContentTemplate="{TemplateBinding ContentTemplate}" />
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>