动画后WPF元素高度绑定丢失答案

【问题标题】：WPF element height binding lost after animation动画后WPF元素高度绑定丢失
【发布时间】：2020-02-06 16:02:40
【问题描述】：

在我的示例应用程序中，我将内部网格的高度绑定到主网格的高度。当我最大化和最小化窗口时，它们的高度是相同的。在我执行将内部网格的高度从 100 更改为再次绑定主网格的高度的动画后，绑定丢失了。这很明显，因为当我最大化窗口时，内部网格高度保持不变，而主网格的高度会发生变化以适应窗口的填充高度

为什么会这样，我该如何修复它，以便在动画后将内部网格设置回主网格的高度后保持主网格的高度。

示例应用：

<Window.Resources>
    <Storyboard x:Key="ShrinkSlider" x:Name="ShrinkSlider"
                Completed="ShrinkSlider_Completed">
        <DoubleAnimation
            Storyboard.TargetProperty="Height"
            Storyboard.TargetName="gridSlider"
            DecelerationRatio="0.9"
            From="100"
            To="{Binding ActualHeight, ElementName=gridMain}"
            Duration="00:00:00.5" />
    </Storyboard>

    <Storyboard x:Key="ExpandSlider" x:Name="ExpandSlider"
                Completed="ExpandSlider_Completed">
        <DoubleAnimation
            Storyboard.TargetProperty="Height"
            Storyboard.TargetName="gridSlider"
            DecelerationRatio="0.9"
            From="{Binding ActualHeight, ElementName=gridMain}"
            To="100"
            Duration="00:00:00.5" />
    </Storyboard>
</Window.Resources>

<Window.Triggers>
    <EventTrigger RoutedEvent="ButtonBase.Click"
                  SourceName="btnShrink">
        <BeginStoryboard x:Name="bsbShrinkSlider"
                         Storyboard="{StaticResource ShrinkSlider}" />
    </EventTrigger>

    <EventTrigger RoutedEvent="ButtonBase.Click"
                  SourceName="btnExpand">
        <BeginStoryboard x:Name="bsbExpandSlider"
                         Storyboard="{StaticResource ExpandSlider}" />
    </EventTrigger>
</Window.Triggers>

<Grid x:Name="gridMain">
    <Grid x:Name="gridSlider"
          Background="#1f1f1f"
          VerticalAlignment="Top"
          Height="{Binding ActualHeight, ElementName=gridMain}">
    </Grid>

    <StackPanel VerticalAlignment="Bottom">
        <Button Content="Shrink"
                x:Name="btnShrink"
            Height="20"
                Click="BtnShrink_Click" />
        <Button Content="Expand"
                x:Name="btnExpand"
            Height="20"
                Click="BtnExpand_Click" />
    </StackPanel>
</Grid>

【问题讨论】：

据我所知，这就是您的代码将执行的操作。当窗口打开时，内部网格 (gridSlider) 将与外部网格 (gridMain) 具有相同的高度。假设你打开并最大化窗口，一旦你点击 Expand 动画会将 gridSlider 的高度降低到 100px。在这种情况下，gridSlider 将距顶部 100 像素（因为您已设置 VerticalAlignment）。单击 Shrink，它会将 gridSlider 从 100 像素返回到 gridMain 的全长。而且我认为这正是您编写的代码，这不是您所期望的行为吗？
执行展开动画后，如果我最大化窗口，内部网格的高度不会更新到主网格的高度。绑定似乎已经破坏了@ArifEqbal
这正是你要求它做的事情......打破绑定......查看扩展动画的代码，你要求 gridSlider 将其高度从绑定更改为固定 100px 高度。
@ArifEqbal 我在那里以错误的方式缩小和扩展情节提要。 Expand 应该将高度从 100 更改为“{Binding ActualHeight, ElementName=gridMain}”。但这并没有重置绑定。我想出了一个解决方案，但是如果你看到我的答案。如果您知道更优雅的方式，请告诉我:)

标签： c# wpf animation grid

【解决方案1】：

好的，我想通了。我需要设置 Storyboard FillBehaviour = "Stop"

然后我需要重新创建 Storyboard Completed 事件的绑定：

        Binding binding = new Binding();
        binding.Source = gridMain;
        binding.Path = new PropertyPath(Grid.ActualHeightProperty);
        gridSlider.SetBinding(Grid.HeightProperty, binding);

以下是修改后的完整代码：

xaml:

<Window.Resources>
    <Storyboard x:Key="ShrinkSlider" x:Name="ShrinkSlider"
                Completed="ShrinkSlider_Completed"
                FillBehavior="Stop">
        <DoubleAnimation
            Storyboard.TargetProperty="Height"
            Storyboard.TargetName="gridSlider"
            DecelerationRatio="0.9"
            From="{Binding ActualHeight, ElementName=gridMain}"
            To="100"
            Duration="00:00:00.5" />
    </Storyboard>

    <Storyboard x:Key="ExpandSlider" x:Name="ExpandSlider"
                Completed="ExpandSlider_Completed"
                FillBehavior="Stop">
        <DoubleAnimation
            Storyboard.TargetProperty="Height"
            Storyboard.TargetName="gridSlider"
            DecelerationRatio="0.9"
            From="100"
            To="{Binding ActualHeight, ElementName=gridMain}"
            Duration="00:00:00.5" />
    </Storyboard>
</Window.Resources>

<Window.Triggers>
    <EventTrigger RoutedEvent="ButtonBase.Click"
                  SourceName="btnShrink">
        <BeginStoryboard x:Name="bsbShrinkSlider"
                         Storyboard="{StaticResource ShrinkSlider}" />
    </EventTrigger>

    <EventTrigger RoutedEvent="ButtonBase.Click"
                  SourceName="btnExpand">
        <BeginStoryboard x:Name="bsbExpandSlider"
                         Storyboard="{StaticResource ExpandSlider}" />
    </EventTrigger>
</Window.Triggers>

<Grid x:Name="gridMain">
    <Grid x:Name="gridSlider"
          Background="#1f1f1f"
          VerticalAlignment="Top"
          Height="{Binding ActualHeight, ElementName=gridMain}">
    </Grid>

    <StackPanel VerticalAlignment="Bottom">
        <Button Content="Shrink"
                x:Name="btnShrink"
            Height="20" />
        <Button Content="Expand"
                x:Name="btnExpand"
            Height="20" />
    </StackPanel>
</Grid>

cs:

private void ShrinkSlider_Completed(object sender, EventArgs e)
    {
        gridSlider.Height = 100;
    }

    private void ExpandSlider_Completed(object sender, EventArgs e)
    {
        Binding binding = new Binding();
        binding.Source = gridMain;
        binding.Path = new PropertyPath(Grid.ActualHeightProperty);
        gridSlider.SetBinding(Grid.HeightProperty, binding);
    }

【讨论】：