Por que el ancho de la cuadrícula de WPF no cambia durante el bucle for

Estoy tratando de hacer que un botón se deslice cuando hago clic en él. Para hacer esto, hice una cuadrícula para cambiar el ancho de la columna de modo que el botón parezca moverse:

ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí

Cuando hago clic en la cuadrícula, se comprueba el ancho de la primera columna. Si es 0, se cambia al ancho de la cuadrícula. Lo mismo para el otro lado.

Quiero que esto suceda en una animación, por lo que el ancho cambió con el tiempo, así que hice un bucle for para modificar el ancho de las columnas para que el control deslizante se mueva cuando hago clic en él.

Mi código a continuación:

private void MouseLeftDown_TwoSideButton(object sender, MouseButtonEventArgs e)
{
    double width = TwoSideButton.ActualWidth;
    double desiredColumnWidth = width - (TwoSideButton_Mid1Column.ActualWidth + TwoSideButton_Mid2Column.ActualWidth);

    int steps = 5;
    double stepSize = desiredColumnWidth / steps;

    bool leftSelected = true ? TwoSideButton_LeftSideColumn.ActualWidth == 0 : false;

    // Here I want to see the changes during for loop, not at the end of the loop.
    for (int i = 1; i <= steps; i++)
    {
        if (leftSelected)
        {
            TwoSideButton_LeftSideColumn.Width = new GridLength(i * stepSize);
            TwoSideButton_RightSideColumn.Width = new GridLength(desiredColumnWidth - i * stepSize);
        }
        else if (!leftSelected)
        {
            TwoSideButton_LeftSideColumn.Width = new GridLength(desiredColumnWidth - i * stepSize);
            TwoSideButton_RightSideColumn.Width = new GridLength(i * stepSize);
        }
    }
}

Y código XAML:

<Grid x:Name="TwoSideButton" Width="200" Height="25" Grid.Column="1" Grid.Row="6" MouseLeftButtonDown="MouseLeftDown_TwoSideButton">
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="TwoSideButton_LeftSideColumn" Width="0"/>
        <ColumnDefinition x:Name="TwoSideButton_Mid1Column" Width="20"/>
        <ColumnDefinition x:Name="TwoSideButton_Mid2Column" Width="20"/>
        <ColumnDefinition x:Name="TwoSideButton_RightSideColumn" Width="*"/>
    </Grid.ColumnDefinitions>

    <Border Grid.Column="0" CornerRadius="5" BorderThickness="1" BorderBrush="Black" Background="DarkOrange"  Grid.ColumnSpan="2"/>
    <Border Grid.Column="2" CornerRadius="5" BorderThickness="1" BorderBrush="Black" Background="RoyalBlue"  Grid.ColumnSpan="2"/>
    <Border Grid.Column="1" CornerRadius="5" Grid.ColumnSpan="2" BorderBrush="Black" BorderThickness="1">
        <Border.Background>
            <LinearGradientBrush EndPoint="1,0" StartPoint="1,1">
                <GradientStop Color="LightGray" Offset="0.9"/>
                <GradientStop Color="Gray"/>
            </LinearGradientBrush>
        </Border.Background>
    </Border>
    <TextBlock x:Name="TwoSideButton_LeftText" Text="Trabajando" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    <TextBlock x:Name="TwoSideButton_RightText" Text="Terminado" Grid.Column="3" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

¡Gracias!