ContentSizer

If you are using a Grid, use GridSplitter 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.

<!--  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>

// 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();
    }
}

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.

<!--  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>

// 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();
    }
}