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

<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 Width="200"
                              MinWidth="100" />
            <ColumnDefinition Width="200"
                              MinWidth="100" />
        </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 is a Column with a Min 100 / Max 300 width - 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="0"
                Grid.Column="3">
            <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 is a fixed width column - 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="3">
            <TextBlock Text="This is a fixed width column - 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="4"
                               Height="16"
                               VerticalAlignment="Top">
            <controls:GridSplitter.RenderTransform>
                <TranslateTransform Y="-7" />
            </controls:GridSplitter.RenderTransform>
        </controls:GridSplitter>

        <!--  Last 2 columns splitter  -->
        <controls:GridSplitter Grid.Row="0"
                               Grid.RowSpan="2"
                               Grid.Column="3"
                               Width="16"
                               HorizontalAlignment="Left"
                               ResizeBehavior="BasedOnAlignment"
                               ResizeDirection="Auto">
            <controls:GridSplitter.RenderTransform>
                <TranslateTransform X="-7" />
            </controls:GridSplitter.RenderTransform>
        </controls:GridSplitter>
    </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;

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