将Storyboard绑定到ActualHeight不起作用

时间:2017-01-14 12:49:38

标签: c# .net xaml uwp

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

<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

但堆栈面板不会扩展。它崩溃了,现在根本没有高度。

动画前的

enter image description here

动画后

enter image description here

示例

页:

<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

1 个答案:

答案 0 :(得分:1)

绑定在此处不起作用,如MSDN says

  

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