Which control can I stretch?

Question

Given is a grid with two columns. How can I give the user the ability to change the width of each column? He should be able to maximize the width of one column on a smaler display.

<!-- area a and b -->
        <Grid Background="White" HorizontalAlignment="Left" CornerRadius="12" Margin="8">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="500"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <!-- area a -->
            <StackPanel Grid.Row="0" Grid.Column="0" Margin="10">
                <StackPanel Orientation="Horizontal" Background="LightGoldenrodYellow">
                    ...
                </StackPanel>
                <StackPanel Orientation="Horizontal" Background="AntiqueWhite">
                    ...
                </StackPanel>
                <dxg:GridControl ItemsSource="{x:Bind ViewModel.a, Mode=TwoWay}" SelectedItems="{x:Bind ViewModel.b, Mode=TwoWay}" AutoGenerateColumns="False" IsFilterEnabled="False" ShowAutoFilterRow="False" SelectionMode="Row" SelectionChanged="grid_SelectionChanged">
                    <dxg:GridControl.Columns>
                        ...
                    </dxg:GridControl.Columns>
                </dxg:GridControl>
            </StackPanel>
            <!-- area b -->
            <StackPanel Grid.Row="0" Grid.Column="1" Margin="10">
                <StackPanel Background="LightGoldenrodYellow">
                    ..
                </StackPanel>
                <StackPanel  Orientation="Horizontal" Background="AntiqueWhite">
                      ..      
                </StackPanel>
                <dxg:GridControl ItemsSource="{x:Bind ViewModel.Tasks, Mode=TwoWay}" AutoGenerateColumns="False" IsFilterEnabled="False" SelectionMode="Row">
                    <dxg:GridControl.Columns>
                        ..
                    </dxg:GridControl.Columns>
                </dxg:GridControl>
            </StackPanel>
        </Grid>

Answer 1

You can use the GridSplitter from the CommunitToolkit.WinUI.UI.Controls.Layout NuGet package.

<Window
    x:Class="GridSplitterExample.MainWindow"
    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:local="using:GridSplitterExample"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:toolkit="using:CommunityToolkit.WinUI.UI.Controls"
    mc:Ignorable="d">
    <Grid ColumnDefinitions="*,Auto,*">
        <Grid Grid.Column="0">
            <TextBlock Text="Left Column" />
        </Grid>
        <toolkit:GridSplitter Grid.Column="1" />
        <Grid Grid.Column="2">
            <TextBlock Text="Right Column" />
        </Grid>
    </Grid>
</Window>