Bring over Sizer controls to main repo

components/Sizers/OpenSolution.bat

@@ -0,0 +1,3 @@
+@ECHO OFF
+
+powershell ..\..\tooling\ProjectHeads\GenerateSingleSampleHeads.ps1 -componentPath %CD% %*

components/Sizers/samples/ContentSizer.md

@@ -0,0 +1,26 @@
+---
+title: ContentSizer
+author: mhawker
+description: The ContentSizer is a control which can be used to resize any element, usually its parent.
+keywords: ContentSizer, SizerBase, Control, Layout, Expander, Splitter
+dev_langs:
+  - csharp
+category: Controls
+subcategory: Layout
+discussion-id: 96
+issue-id: 101
+---
+
+# ContentSizer
+
+The ContentSizer is a control which can be used to resize any element, usually its parent. If you are using a `Grid`, use [GridSplitter](GridSplitter.md) instead.
+
+The main use-case for a ContentSizer is to create an expandable shelf for your application. This allows the `Expander` itself to remember its opening/closing sizes.
+
+A GridSplitter would be insufficient as it would force the grid to remember the row size and maintain its position when the `Expander` collapses.
+
+> [!SAMPLE ContentSizerTopShelfPage]
+
+The following example shows how to use the ContentSizer to create a left-side shelf; however, this scenario can also be accomplished with a `GridSplitter`.
+
+> [!SAMPLE ContentSizerLeftShelfPage]

components/Sizers/samples/ContentSizerLeftShelfPage.xaml

@@ -0,0 +1,32 @@
+<!--  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.  -->
+<Page x:Class="SizersExperiment.Samples.ContentSizerLeftShelfPage"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+
+    <Grid MinWidth="400"
+          MinHeight="300">
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="Auto" />
+            <ColumnDefinition Width="Auto" />
+            <ColumnDefinition />
+        </Grid.ColumnDefinitions>
+
+        <!--  Left-side 'Shelf', In this case you could also use a GridSplitter  -->
+        <Border x:Name="SideContent"
+                MinWidth="200"
+                MaxWidth="600"
+                Background="{ThemeResource AccentFillColorDefaultBrush}">
+            <TextBlock HorizontalAlignment="Center"
+                       VerticalAlignment="Center"
+                       Foreground="{ThemeResource TextOnAccentFillColorPrimaryBrush}"
+                       Style="{ThemeResource BodyStrongTextBlockStyle}"
+                       Text="Side Content" />
+        </Border>
+        <controls:ContentSizer Grid.Column="1"
+                               TargetControl="{x:Bind SideContent}" />
+    </Grid>
+</Page>

components/Sizers/samples/ContentSizerLeftShelfPage.xaml.cs

@@ -0,0 +1,14 @@
+// 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 SizersExperiment.Samples;
+
+[ToolkitSample(id: nameof(ContentSizerLeftShelfPage), "Left-side Shelf", description: "Shows how to create an expandable shelf on the left-side of your app.")]
+public sealed partial class ContentSizerLeftShelfPage : Page
+{
+    public ContentSizerLeftShelfPage()
+    {
+        this.InitializeComponent();
+    }
+}

components/Sizers/samples/ContentSizerTopShelfPage.xaml

@@ -0,0 +1,43 @@
+<!--  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.  -->
+<Page x:Class="SizersExperiment.Samples.ContentSizerTopShelfPage"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+      mc:Ignorable="d">
+
+    <Grid MinHeight="300">
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <!--  Bottom 'Shelf', In this case you cannot use GridSplitter as row would maintain its size when Expander gets collapsed  -->
+        <muxc:Expander x:Name="TopExpander"
+                       VerticalAlignment="Top"
+                       HorizontalContentAlignment="Stretch"
+                       ExpandDirection="Up"
+                       Header="This is some Shelf"
+                       IsExpanded="True">
+            <Grid x:Name="ExpandContent"
+                  Height="128"
+                  MinHeight="32"
+                  MaxHeight="256">
+                <TextBlock HorizontalAlignment="Center"
+                           VerticalAlignment="Center"
+                           Text="This is the expanded content"
+                           TextWrapping="Wrap" />
+            </Grid>
+        </muxc:Expander>
+        <!--  We expand the inner content size here so that Expander maintains it's size properly.  -->
+        <controls:ContentSizer Grid.Row="1"
+                               Height="16"
+                               VerticalAlignment="Top"
+                               Orientation="Horizontal"
+                               TargetControl="{x:Bind ExpandContent}"
+                               Visibility="{x:Bind TopExpander.IsExpanded, Mode=OneWay}" />
+    </Grid>
+</Page>

components/Sizers/samples/ContentSizerTopShelfPage.xaml.cs

@@ -0,0 +1,14 @@
+// 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 SizersExperiment.Samples;
+
+[ToolkitSample(id: nameof(ContentSizerTopShelfPage), "Top Shelf", description: "Shows how to create an expandable shelf on the top of your app.")]
+public sealed partial class ContentSizerTopShelfPage : Page
+{
+    public ContentSizerTopShelfPage()
+    {
+        this.InitializeComponent();
+    }
+}

components/Sizers/samples/Dependencies.props

@@ -0,0 +1,31 @@
+<!--
+    WinUI 2 under UWP uses TargetFramework uap10.0.*
+    WinUI 3 under WinAppSdk uses TargetFramework net6.0-windows10.*
+    However, under Uno-powered platforms, both WinUI 2 and 3 can share the same TargetFramework.
+
+    MSBuild doesn't play nicely with this out of the box, so we've made it easy for you.
+
+    For .NET Standard packages, you can use the Nuget Package Manager in Visual Studio.
+    For UWP / WinAppSDK / Uno packages, place the package references here.
+-->
+<Project>
+    <!-- WinUI 2 / UWP -->
+    <ItemGroup Condition="'$(IsUwp)' == 'true'">
+        <!-- <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.2"/> -->
+    </ItemGroup>
+
+    <!-- WinUI 2 / Uno -->
+    <ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '2'">
+        <!-- <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.11"/> -->
+    </ItemGroup>
+
+    <!-- WinUI 3 / WinAppSdk -->
+    <ItemGroup Condition="'$(IsWinAppSdk)' == 'true'">
+        <!-- <PackageReference Include="CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.2"/> -->
+    </ItemGroup>
+
+    <!-- WinUI 3 / Uno -->
+    <ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '3'">
+        <!-- <PackageReference Include="Uno.CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.100-dev.15.g12261e2626"/> -->
+    </ItemGroup>
+</Project>

components/Sizers/samples/GridSplitter.md

@@ -0,0 +1,21 @@
+---
+title: GridSplitter
+author: mhawker
+description:The GridSplitter control provides an easy-to-use Splitter that redistributes space between columns or rows of a Grid Control.
+keywords: ContentSizer, SizerBase, Control, Layout, Expander
+dev_langs:
+  - csharp
+category: Controls
+subcategory: Layout
+discussion-id: 96
+issue-id: 101
+---
+
+# GridSplitter
+
+The control automatically detects the targeted columns/rows to resize, while dragging the control it starts to resize the columns/rows and redistributes space between columns/rows,
+you can manually specify the `ResizeDirection` (`Auto` / `Column` / `Row`) and the `ResizeBehavior` to select which columns/rows to resize.
+
+`GridSplitter` control will resize the targeted rows or columns
+
+> [!SAMPLE GridSplitterPage]

components/Sizers/samples/GridSplitterPage.xaml

@@ -0,0 +1,106 @@
+<Page x:Class="SizersExperiment.Samples.GridSplitterPage"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+
+    <Page.Resources>
+        <Style TargetType="Border">
+            <Setter Property="BorderThickness" Value="1,1,0,0" />
+            <Setter Property="Padding" Value="16" />
+            <Setter Property="BorderBrush" Value="{ThemeResource SystemControlHighlightChromeHighBrush}" />
+        </Style>
+
+        <Style TargetType="TextBlock">
+            <Setter Property="TextWrapping" Value="Wrap" />
+        </Style>
+    </Page.Resources>
+
+    <Grid x:Name="RootGrid"
+          Height="300"
+          VerticalAlignment="Top"
+          BorderBrush="{ThemeResource SystemControlHighlightChromeHighBrush}"
+          BorderThickness="0,0,1,1">
+        <Grid.RowDefinitions>
+            <RowDefinition MinHeight="100"
+                           MaxHeight="300" />
+            <RowDefinition Height="200" />
+        </Grid.RowDefinitions>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition MinWidth="100"
+                              MaxWidth="300" />
+            <ColumnDefinition />
+            <ColumnDefinition />
+        </Grid.ColumnDefinitions>
+
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup>
+                <VisualState x:Name="Full">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="600" />
+                    </VisualState.StateTriggers>
+                </VisualState>
+                <VisualState x:Name="Small">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="0" />
+                    </VisualState.StateTriggers>
+
+                    <VisualState.Setters>
+                        <Setter Target="RootGrid.Padding" Value="12" />
+                        <Setter Target="RootGrid.FontSize" Value="12" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+
+        <Border Grid.Row="0"
+                Grid.Column="0">
+            <TextBlock Text="This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect RowDefinition MinHeight='100'" />
+        </Border>
+        <Border Grid.Row="0"
+                Grid.Column="1">
+            <TextBlock Text="This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect" />
+        </Border>
+        <Border Grid.Row="0"
+                Grid.Column="2">
+            <TextBlock Text="This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect" />
+        </Border>
+
+        <Border Grid.Row="1"
+                Grid.Column="0">
+            <TextBlock Text="This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect" />
+        </Border>
+        <Border Grid.Row="1"
+                Grid.Column="1">
+            <TextBlock Text="This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect" />
+        </Border>
+        <Border Grid.Row="1"
+                Grid.Column="2">
+            <TextBlock Text="This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect" />
+        </Border>
+
+        <!--  Column Grid Splitter  -->
+        <controls:GridSplitter Grid.Column="1"
+                               Width="16"
+                               HorizontalAlignment="Left"
+                               ResizeBehavior="BasedOnAlignment"
+                               ResizeDirection="Auto">
+            <controls:GridSplitter.RenderTransform>
+                <TranslateTransform X="-7" />
+            </controls:GridSplitter.RenderTransform>
+        </controls:GridSplitter>
+
+        <!--  Row Grid Splitter  -->
+        <controls:GridSplitter Grid.Row="1"
+                               Grid.ColumnSpan="3"
+                               Height="16"
+                               VerticalAlignment="Top">
+            <controls:GridSplitter.RenderTransform>
+                <TranslateTransform Y="-7" />
+            </controls:GridSplitter.RenderTransform>
+        </controls:GridSplitter>
+    </Grid>
+</Page>
+

components/Sizers/samples/GridSplitterPage.xaml.cs

@@ -0,0 +1,17 @@
+// 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 SizersExperiment.Samples;
+
+/// <summary>
+/// An empty page that can be used on its own or navigated to within a Frame.
+/// </summary>
+[ToolkitSample(id: nameof(GridSplitterPage), "GridSplitter Example", description: "Splitter that redistributes space between columns or rows of a Grid Control")]
+public sealed partial class GridSplitterPage : Page
+{
+    public GridSplitterPage()
+    {
+        this.InitializeComponent();
+    }
+}

components/Sizers/samples/PropertySizer.md

@@ -0,0 +1,24 @@
+---
+title: PropertySizer
+author: mhawker
+description: The PropertySizer is a control which can be used to manipulate the value of another double based property.
+keywords: PropertySizer, SizerBase, Control, Layout, NavigationView, Splitter
+dev_langs:
+  - csharp
+category: Controls
+subcategory: Layout
+discussion-id: 96
+issue-id: 101
+---
+
+# PropertySizer
+
+The PropertySizer is a control which can be used to manipulate the value of another double based property. For instance manipulating the `OpenPaneLength` of a `NavigationView` control. If you are using a `Grid`, use `GridSplitter` instead.
+
+# Examples 
+
+The main use-case is for `PropertySizer` to allow you to manipulate the `OpenPaneLength` property of a `NavigationView` control to create a user customizable size shelf. This is handy when using `NavigationView` with a tree of items that represents some project or folder structure for your application.
+
+Both `GridSplitter` and `ContentSizer` are insufficient as they would force the `NavigationView` to a specific size and not allow it to remember its size when it expands or collapses.
+
+> [!SAMPLE PropertySizerNavigationViewPage]