WPF DataGrid resizing column causes extreme scrolling

Question

I have found a behavior with the stock WPF DataGrid that I can't explain or prevent, but it feels like a bug. I am curious if anyone has run into this and what the fix or workaround is.

Steps to Reproduce:

1. When using a DataGrid with several columns (4 in my test app), resize headers so that the horizontal scrollbar is displayed.
2. Scroll all the way to the right.
3. Start resizing any column that isn't the first or last column.
4. Resize the column towards the left to its minimum.
5. Then drag it to the right and you'll see the column is resized to an extreme width.

It is somewhat hard to get the column back to an appropriate size. I have created the simple WPF application below to demonstrate the problem.

MainWindow.xaml

<Window x:Class="TestGridColumnSpacing.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TestGridColumnSpacing"
        mc:Ignorable="d"
        Title="MainWindow"
        Height="450"
        Width="750">

    <Grid>
        <DataGrid x:Name="TheDataGrid" AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Field 1" Binding="{Binding Field_1}" />
                <DataGridTextColumn Header="Field 2" Binding="{Binding Field_2}" />
                <DataGridTextColumn Header="Field 3" Binding="{Binding Field_3}" />
                <DataGridTextColumn Header="Field 4" Binding="{Binding Field_4}" />
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

MainWindow.xaml.cs

namespace TestGridColumnSpacing
{
    using System.Windows;

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            this.Loaded += MainWindowLoaded;
        }

        private void MainWindowLoaded(object sender, RoutedEventArgs e)
        {
            this.TheDataGrid.Items.Add(new { Field_1 = "", Field_2 = "", Field_3 = "", Field_4 = "Step 1: Using right thumb on Field 4 header, resize enough to make horizontal scrollbar visible if not visible already." });
            this.TheDataGrid.Items.Add(new { Field_1 = "", Field_2 = "", Field_3 = "", Field_4 = "Step 2: Scroll horizontal scrollbar entirely to the right." });
            this.TheDataGrid.Items.Add(new { Field_1 = "", Field_2 = "", Field_3 = "", Field_4 = "Step 3: Using right thumb of Field 3, resize to the right.\nThis will increase the width of Field 3. Notice normal manner of the scrollbar's size changing." });
            this.TheDataGrid.Items.Add(new { Field_1 = "", Field_2 = "", Field_3 = "", Field_4 = "Step 4: Using right thumb of Field 3, resize the column leftward until Field 3 approaches its minimum width.\nYou'll notice when all of Field 4 is in view, Field 3 will continue to collapse and appear to shrink towards Field 4." });
            this.TheDataGrid.Items.Add(new { Field_1 = "", Field_2 = "", Field_3 = "", Field_4 = "Step 5: At this point, continue using the right thumb of Field 3 to resize the column.\nNotice exaggerated resizing of the scrollbar."});
        }
    }
}

I have looked for a solution or other developers talking about it, but I can't find any mention, which is surprising due to how easy it is to reproduce. Please share any information you have for the solution.

Answer 1

I put an answer code for this question to gist ,because posting it will be an error in the QnA system.

Answer 2

Yes! This is workaround is what I needed. I am not sure why the native control behaves like it does when scrolled to the right, but your code does it own calculation of the size of the mouse drag and changes the column's width. Excellent! Thank you @gekka !