为什么 WPF 网格宽度在 for 循环期间不会改变

Question

我正在尝试制作一个按钮，当我点击它时它会滑动。为此，我制作了一个网格来更改其列宽，因此按钮似乎会四处移动：

enter image description here enter image description here

当我单击网格时，会检查第一列的宽度。如果为 0，则更改为网格的宽度。另一边也一样。

我想让它在动画中发生，所以宽度随时间变化，所以我做了一个 for 循环来修改列的宽度，所以当我点击它时滑块会移动。

我的代码如下：

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

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

谢谢！

Answer 1

当您的循环仍在进行时，网格无法自动刷新自身运行

一种可能的解决方法是通过在循环中添加等待延迟来使整个事件处理程序异步：

await Task.Delay(100);

您需要将事件处理程序标记为异步才能编译：

private async void MouseLeftDown_TwoSideButton(object sender, MouseButtonEventArgs e)

为什么 WPF 网格宽度在 for 循环期间不会改变

Why WPF grid width doesn't change during for loop

c#

wpf

grid

animation

xaml