🚧 SizerBase class for GridSplitter + new ContentSizer and PropertySizer components

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

@@ -282,6 +282,8 @@
     <Content Include="SamplePages\Primitives\ConstrainedBox.png" />
     <Content Include="SamplePages\Primitives\SwitchPresenter.png" />
     <Content Include="SamplePages\RichSuggestBox\RichSuggestBox.png" />
+    <Content Include="SamplePages\Sizers\ContentSizer.png" />
+    <Content Include="SamplePages\Sizers\GridSplitter.png" />
     <Content Include="SamplePages\TabbedCommandBar\TabbedCommandBar.png" />
     <Content Include="SamplePages\Animations\Effects\FadeBehavior.png" />
     <Content Include="SamplePages\ColorPicker\ColorPicker.png" />
@@ -329,7 +331,6 @@
     <Content Include="SamplePages\Shadows\Unicorn.png" />
     <Content Include="SamplePages\GazeInteraction\GazeInteraction.png" />
     <Content Include="SamplePages\GazeTracing\GazeTracing.png" />
-    <Content Include="SamplePages\GridSplitter\GridSplitter.png" />
     <Content Include="SamplePages\AlignmentGrid\AlignmentGrid.png" />
     <Content Include="SamplePages\HeaderedContentControl\HeaderedContentControl.png" />
     <Content Include="SamplePages\HeaderedItemsControl\HeaderedItemsControl.png" />
@@ -399,7 +400,6 @@
     <Content Include="SamplePages\Expander\ExpanderXaml.bind" />
     <Content Include="SamplePages\BladeView\BladeCode.bind" />
     <Content Include="SamplePages\ScrollHeader\ScrollHeaderCode.bind" />
-    <Content Include="SamplePages\GridSplitter\GridSplitter.bind" />
     <Content Include="SamplePages\FadeHeader\FadeHeaderBehaviorCode.bind" />
     <Content Include="SamplePages\FadeHeader\FadeHeaderBehaviorXaml.bind" />
     <Content Include="SamplePages\ImageCache\ImageCacheXaml.bind" />
@@ -647,6 +647,9 @@
     <Content Include="SamplePages\Animations\Shadows\AnimatedCardShadowXaml.bind" />
     <Content Include="SamplePages\KeyDownTriggerBehavior\KeyDownTriggerBehaviorXaml.bind" />
     <Content Include="SamplePages\RichSuggestBox\RichSuggestBoxCode.bind" />
+    <Content Include="SamplePages\Sizers\ContentSizer.bind" />
+    <Content Include="SamplePages\Sizers\GridSplitter.bind" />
+    <Content Include="SamplePages\Sizers\PropertySizer.bind" />
   </ItemGroup>
   <ItemGroup>
     <Compile Include="App.xaml.cs">
@@ -862,9 +865,6 @@
     <Compile Include="SamplePages\ScrollHeader\ScrollHeaderPage.xaml.cs">
       <DependentUpon>ScrollHeaderPage.xaml</DependentUpon>
     </Compile>
-    <Compile Include="SamplePages\GridSplitter\GridSplitterPage.xaml.cs">
-      <DependentUpon>GridSplitterPage.xaml</DependentUpon>
-    </Compile>
     <Compile Include="SamplePages\FadeHeader\FadeHeaderBehaviorPage.xaml.cs">
       <DependentUpon>FadeHeaderBehaviorPage.xaml</DependentUpon>
     </Compile>
@@ -1301,10 +1301,6 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
-    <Page Include="SamplePages\GridSplitter\GridSplitterPage.xaml">
-      <SubType>Designer</SubType>
-      <Generator>MSBuild:Compile</Generator>
-    </Page>
     <Page Include="SamplePages\FadeHeader\FadeHeaderBehaviorPage.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>

Microsoft.Toolkit.Uwp.SampleApp/Pages/SampleController.xaml

@@ -220,8 +220,8 @@
                                        Width="11"
                                        Background="Transparent"
                                        HorizontalAlignment="Left"
-                                       GripperForeground="{ThemeResource Brush-Alt}"
-                                       ParentLevel="1" />
+                                       ParentLevel="1">
+                </controls:GridSplitter>
             </Grid>
 
             <Border HorizontalAlignment="Stretch"

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/FrameworkElementExtensions/FrameworkElementExtensionsCode.bind

@@ -31,30 +31,25 @@
       <controls:GridSplitter
         Width="11"
         Background="{ThemeResource Brush-Grey-04}"
-        GripperCursor="Default"
+        GripperCursor="Arrow"
         HorizontalAlignment="Left"
         Grid.Column="1"
         ResizeDirection="Auto"
         ResizeBehavior="BasedOnAlignment"
-        CursorBehavior="ChangeOnGripperHover"
-        GripperForeground="{ThemeResource Brush-Alt}">
+        Foreground="{ThemeResource Brush-Alt}">
       </controls:GridSplitter>
 
       <!--Row Grid Splitter-->
       <controls:GridSplitter
         Grid.Row="1"
         Background="{ThemeResource Brush-Grey-04}" Height="11"
         HorizontalAlignment="Stretch">
-        <controls:GridSplitter.Element>
           <Grid>
             <TextBlock HorizontalAlignment="Center"
                        IsHitTestVisible="False"
                        VerticalAlignment="Center"
-                       Text="&#xE76F;"
-                       Foreground="{ThemeResource Brush-Alt}"
-                       FontFamily="Segoe MDL2 Assets"/>
+                       Foreground="{ThemeResource Brush-Alt}" />
           </Grid>
-        </controls:GridSplitter.Element>
       </controls:GridSplitter>
     </Grid>
 

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

@@ -0,0 +1,57 @@
+<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">
+    <Grid.ColumnDefinitions>
+      <ColumnDefinition Width="Auto"/>
+      <ColumnDefinition Width="Auto"/>
+      <ColumnDefinition/>
+    </Grid.ColumnDefinitions>
+    <Grid.RowDefinitions>
+      <RowDefinition Height="Auto"/>
+      <RowDefinition Height="Auto"/>
+      <RowDefinition Height="*"/>
+    </Grid.RowDefinitions>
+
+    <!-- Left-side 'Shelf', In this case you could also use a GridSplitter -->
+    <Border x:Name="SideContent"
+            Background="DarkGreen"
+            MinWidth="200"
+            MaxWidth="600"
+            Grid.RowSpan="3">
+      <TextBlock HorizontalAlignment="Center"
+                  VerticalAlignment="Center">
+        Side Content
+      </TextBlock>
+    </Border>
+    <controls:ContentSizer TargetControl="{Binding ElementName=SideContent}"
+                           Grid.Column="1" Grid.RowSpan="3"/>
+
+    <!-- Bottom 'Shelf', In this case you cannot use GridSplitter as row would maintain its size when Expander gets collapsed -->
+    <controls:Expander x:Name="TopExpander"
+                       VerticalAlignment="Top"
+                       ExpandDirection="Up"
+                       Header="This is some Shelf"
+                       HorizontalContentAlignment="Stretch"
+                       IsExpanded="True"
+                       Grid.Column="2">
+      <Grid Height="128" x:Name="ExpandContent"
+            MinHeight="32" MaxHeight="256">
+        <TextBlock HorizontalAlignment="Center"
+                   TextWrapping="Wrap"
+                   Text="This is the expanded content"
+                   VerticalAlignment="Center"/>
+      </Grid>
+    </controls:Expander>
+    <controls:ContentSizer Orientation="Horizontal" Height="16"
+                           TargetControl="{Binding ElementName=ExpandContent}"
+                           VerticalAlignment="Top"
+                           Visibility="{Binding IsExpanded, ElementName=TopExpander}"
+                           Grid.Column="2" Grid.Row="1"/>
+  </Grid>
+</Page>

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

@@ -63,12 +63,11 @@
 
     <!--Column Grid Splitter-->
     <controls:GridSplitter
-            GripperCursor="@[GripperCursor:Enum:GripperCursorType.Default]"
             HorizontalAlignment="Left"
             Grid.Column="@[Column:Slider:1:0-2]"
             ResizeDirection="@[ResizeDirection:Enum:GridResizeDirection.Auto]"
             ResizeBehavior="@[ResizeBehavior:Enum:GridResizeBehavior.BasedOnAlignment]"
-            CursorBehavior="@[CursorBehavior:Enum:SplitterCursorBehavior.ChangeOnSplitterHover]"
+            DragIncrement="@[DragIncrement:Slider:1:1-24]"
             Width="16">
       <controls:GridSplitter.RenderTransform>
         <TranslateTransform X="-8" />
@@ -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/Sizers/PropertySizer.bind

@@ -0,0 +1,66 @@
+<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"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+    mc:Ignorable="d">
+
+    <muxc:NavigationView
+              x:Name="ViewPanel"
+              PaneDisplayMode="Left"
+              IsPaneOpen="True"
+              OpenPaneLength="300">
+        <muxc:NavigationView.AutoSuggestBox>
+            <AutoSuggestBox AutomationProperties.Name="Search" QueryIcon="Find" />
+        </muxc:NavigationView.AutoSuggestBox>
+        <muxc:NavigationView.MenuItems>
+            <muxc:NavigationViewItem Content="Menu Item1" Tag="SamplePage1">
+                <muxc:NavigationViewItem.Icon>
+                    <SymbolIcon Symbol="Play" />
+                </muxc:NavigationViewItem.Icon>
+            </muxc:NavigationViewItem>
+            <muxc:NavigationViewItem Content="Menu Item2" Tag="SamplePage2">
+                <muxc:NavigationViewItem.Icon>
+                    <SymbolIcon Symbol="Save" />
+                </muxc:NavigationViewItem.Icon>
+            </muxc:NavigationViewItem>
+            <muxc:NavigationViewItem Content="Menu Item3 with Really Long Name and Such..." Tag="SamplePage3">
+                <muxc:NavigationViewItem.Icon>
+                    <SymbolIcon Symbol="Refresh" />
+                </muxc:NavigationViewItem.Icon>
+            </muxc:NavigationViewItem>
+            <muxc:NavigationViewItem Content="Menu Item4" Tag="SamplePage4">
+                <muxc:NavigationViewItem.Icon>
+                    <SymbolIcon Symbol="Download" />
+                </muxc:NavigationViewItem.Icon>
+            </muxc:NavigationViewItem>
+        </muxc:NavigationView.MenuItems>
+        <Grid>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="Auto"/>
+                <ColumnDefinition Width="*"/>
+            </Grid.ColumnDefinitions>
+            <!-- Note the use of a TwoWay binding here, this is required for this control to work. -->
+            <controls:PropertySizer Binding="{Binding OpenPaneLength, ElementName=ViewPanel, Mode=TwoWay}"
+                                    HorizontalAlignment="Left"
+                                    Minimum="52"
+                                    Maximum="440"
+                                    Visibility="{Binding IsPaneOpen, ElementName=ViewPanel}"/>
+            <!--In An Application, put your host frame here: <Frame Grid.Column="1"/>-->
+            <!--Here we show the content as a border for a visual aid -->
+            <Border
+                    BorderBrush="Red"
+                    BorderThickness="4"
+                    HorizontalAlignment="Stretch"
+                    VerticalAlignment="Stretch"
+                    Grid.Column="1">
+                <TextBlock
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        Text="{Binding OpenPaneLength, ElementName=ViewPanel}" />
+            </Border>
+        </Grid>
+    </muxc:NavigationView>
+</Page>

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" />
@@ -63,6 +64,8 @@
                 <controls:DataGridTextColumn />
             </controls:DataGrid.Columns>
         </controls:DataGrid>
+        <controls:GridSplitter x:Key="GridSplitterControl" />
+        <controls:PropertySizer x:Key="PropertySizerControl" />
     </Page.Resources>
 
     <Grid>

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

@@ -175,16 +175,33 @@
         "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/Sizers/ContentSizer",
+        "XamlCodeFile": "/SamplePages/Sizers/ContentSizer.bind",
+        "Icon": "/SamplePages/Sizers/ContentSizer.png",
+        "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/ContentSizer.md"
+      },
       {
         "Name": "GridSplitter",
-        "Type": "GridSplitterPage",
         "Subcategory": "Layout",
         "About": "GridSplitter represents the control that redistributes space between columns or rows of a Grid control.",
-        "CodeUrl": "https://github.com/CommunityToolkit/WindowsCommunityToolkit/tree/main/Microsoft.Toolkit.Uwp.UI.Controls.Layout/GridSplitter",
-        "XamlCodeFile": "GridSplitter.bind",
-        "Icon": "/SamplePages/GridSplitter/GridSplitter.png",
+        "CodeUrl": "https://github.com/CommunityToolkit/WindowsCommunityToolkit/tree/main/Microsoft.Toolkit.Uwp.UI.Controls.Layout/Sizers/GridSplitter",
+        "XamlCodeFile": "/SamplePages/Sizers/GridSplitter.bind",
+        "Icon": "/SamplePages/Sizers/GridSplitter.png",
         "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/GridSplitter.md"
       },
+      {
+        "Name": "PropertySizer",
+        "Subcategory": "Layout",
+        "About": "PropertySizer is a specific sizing control which can manipulate any double value or some other element or property.",
+        "CodeUrl": "https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/main/Microsoft.Toolkit.Uwp.UI.Controls.Layout/Sizers/PropertySizer",
+        "XamlCodeFile": "/SamplePages/Sizers/PropertySizer.bind",
+        "Icon": "/SamplePages/Sizers/ContentSizer.png",
+        "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/ContentSizer.md"
+      },
       {
         "Name": "AttachedDropShadow (Composition)",
         "Type": "AttachedDropShadowPage",

Microsoft.Toolkit.Uwp.UI.Controls.Layout.Design/Controls/GridSplitter.Metadata.cs

@@ -20,14 +20,12 @@ public GridSplitterMetadata()
                     b.AddCustomAttributes(nameof(GridSplitter.Element), new CategoryAttribute(Resources.CategoryCommon));
                     b.AddCustomAttributes(nameof(GridSplitter.ResizeDirection), new CategoryAttribute(Resources.CategoryCommon));
                     b.AddCustomAttributes(nameof(GridSplitter.ResizeBehavior), new CategoryAttribute(Resources.CategoryCommon));
-                    b.AddCustomAttributes(nameof(GridSplitter.GripperForeground), new CategoryAttribute(Resources.CategoryBrush));
                     b.AddCustomAttributes(nameof(GridSplitter.ParentLevel), new CategoryAttribute(Resources.CategoryCommon));
                     b.AddCustomAttributes(nameof(GridSplitter.GripperCursor), new CategoryAttribute(Resources.CategoryAppearance));
                     b.AddCustomAttributes(nameof(GridSplitter.GripperCustomCursorResource),
                         new CategoryAttribute(Resources.CategoryAppearance),
                         new EditorBrowsableAttribute(EditorBrowsableState.Advanced)
                     );
-                    b.AddCustomAttributes(nameof(GridSplitter.CursorBehavior), new CategoryAttribute(Resources.CategoryCommon));
                     b.AddCustomAttributes(new ToolboxCategoryAttribute(ToolboxCategoryPaths.Toolkit, false));
                 }
             );

Microsoft.Toolkit.Uwp.UI.Controls.Layout.Design/Controls/GridSplitter.Typedata.cs

@@ -13,11 +13,9 @@ internal static partial class ControlTypes
 
     internal static class GridSplitter
     {
-        internal const string CursorBehavior = nameof(CursorBehavior);
         internal const string Element = nameof(Element);
         internal const string GripperCursor = nameof(GripperCursor);
         internal const string GripperCustomCursorResource = nameof(GripperCustomCursorResource);
-        internal const string GripperForeground = nameof(GripperForeground);
         internal const string ParentLevel = nameof(ParentLevel);
         internal const string ResizeBehavior = nameof(ResizeBehavior);
         internal const string ResizeDirection = nameof(ResizeDirection);