為什么 WPF 網格寬度在 for 循環期間不會改變

Question

當我點擊它時，我試圖讓一個按鈕滑動。 為此，我制作了一個網格來更改它的列寬，因此按鈕似乎可以四處移動：

在此處輸入圖像描述 在此處輸入圖像描述

當我單擊網格時，會檢查第一列的寬度。 如果為 0，則更改為網格的寬度。 另一邊也一樣。

我想在 animation 中實現這一點，所以寬度會隨着時間的推移而改變，所以我做了一個 for 循環來修改列的寬度，所以當我點擊它時 slider 會移動。

我的代碼如下：

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)