将 Storyboard 绑定到 ActualHeight 不起作用答案

【问题标题】：Binding Storyboard to ActualHeight doesn't work将 Storyboard 绑定到 ActualHeight 不起作用
【发布时间】：2017-01-14 12:49:37
【问题描述】：

我想将堆栈面板从固定高度扩展到实际高度：

<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.MaxHeight)" Storyboard.TargetName="stpAbout">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="{Binding ActualHeight, ElementName=stpAbout, Mode=OneWay}">
    <EasingDoubleKeyFrame.EasingFunction>
        <CubicEase EasingMode="EaseOut" />
    </EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>

堆栈面板：

<StackPanel x:Name="stpAbout" MaxHeight="200">

运行故事板的代码：

var dia = new MessageDialog(stpAbout.ActualHeight.ToString());
await dia.ShowAsync(); // Shows an actual height of 312

var sbExpand = (Storyboard)Resources["stbExpandAbout"]; // Get the storyboard
sbExpand.Begin(); // Play the storyboard

dia = new MessageDialog(stpAbout.ActualHeight.ToString());
await dia.ShowAsync(); // Shows still an actual heigh of 312

但堆栈面板没有展开。它倒塌了，现在根本没有高度。

动画之前

动画之后

示例

页面：

<Page
x:Class="Juqe.Client.UWP.Pages.BlankPage1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Juqe.Client.UWP.Pages"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
    <Storyboard x:Name="stbExpand">
        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.MaxHeight)" Storyboard.TargetName="stpToExpand">
            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="{Binding ActualHeight, ElementName=stpToExpand, Mode=OneWay}">
                <EasingDoubleKeyFrame.EasingFunction>
                    <CubicEase EasingMode="EaseOut" />
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel>
        <StackPanel x:Name="stpToExpand" MaxHeight="96">
            <Grid Height="48" Background="Red" />
            <Grid Height="48" Background="Green" />
            <Grid Height="48" Background="Blue" />
            <Grid Height="48" Background="Yellow" />
        </StackPanel>
        <Button Click="Button_Click">Expand</Button>
    </StackPanel>
</Grid>

代码：

private async void Button_Click(object sender, RoutedEventArgs e)
{
    var dia = new MessageDialog(stpToExpand.ActualHeight.ToString());
    await dia.ShowAsync();

    var sbExpand = (Storyboard)Resources["stbExpand"]; // Get the storyboard
    sbExpand.Begin(); // Play the expand storyboard

    sbExpand.Completed += async (se, ev) =>
    {
        dia = new MessageDialog(stpToExpand.ActualHeight.ToString());
        await dia.ShowAsync();
    };
}

“解决方案”

得到故事板后，我在代码中对其进行了操作：

((storyboard.Children[0] as DoubleAnimationUsingKeyFrames).KeyFrames[0] as EasingDoubleKeyFrame).Value = stpAbout.ActualHeight; // Correct the storyboard

【问题讨论】：

如果首先将 MaxHeight 设置为 200，ActualHeight 怎么可能是 312...？
我认为 MaxHeight 不会影响 ActualHeight。我不确定，因此我显示了两个对话框，两次都显示 312。
请在提问时提供可重现的问题样本。您应该阅读以下内容：stackoverflow.com/help/mcve
您是否尝试过在代码执行的不同点设置断点并检查stpAbout 对象的各种元素/属性？它可能会让您更好地了解正在使用哪些属性。也许您访问的不是您想要的。
是的，但我找不到它不应该工作的任何原因

标签： c# .net xaml uwp

【解决方案1】：

绑定在此处无法像 MSDN says 一样工作：

注意虽然它有一个 ActualHeightProperty 支持字段，但 ActualHeight 不会引发属性更改通知，它应该被视为常规 CLR 属性而不是依赖项属性。

【讨论】：