Why WPF grid width doesn't change during for loop

Question

I'm trying to make a button to slide when I click on it. To do this, I made a grid to change it's column width so the button seems to move around:

enter image description here enter image description here

When I click on the grid, the width of the first column is checked. If it's 0, then it's changed to the width of the grid. Same for the other side.

I want to make this to happen in an animation, so the width changed within time, so I did a for loop to modify the width of the columns so the slider move when I click on it.

My code below:

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

And XAML code:

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

Thanks!

Answer 1

The grid cannot refresh itself automatically while your loop is still running

One possible workaround is to make the whole event handler asynchronous by adding an await delay inside your loop:

await Task.Delay(100);

you will need to mark the your event handler as async for that to compile:

private async void MouseLeftDown_TwoSideButton(object sender, MouseButtonEventArgs e)