将Storyboard绑定到ActualHeight不起作用 | 将Storyboard绑定到ActualHeight不起作用

本文介绍了将Storyboard绑定到ActualHeight不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

 
< DoubleAnimationUsingKeyFrames EnableDependentAnimation =" True" Storyboard.TargetProperty = QUOT;（FrameworkElement.MaxHeight）" Storyboard.TargetName = QUOT; 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（）; //显示实际高度312 
 
 var sbExpand =（故事板）资源[" stbExpandAbout"]; //获取故事板
 sbExpand.Begin（）; //播放故事板
 
 dia = new MessageDialog（stpAbout.ActualHeight.ToString（））; 
 await dia.ShowAsync（）; //显示实际高度为312

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

在动画之前

示例

页面：

 
< Page 
x：类= QUOT; 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 = QUOT;（FrameworkElement.MaxHeight）" Storyboard.TargetName = QUOT; 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 = QUOT; 96"> 
< Grid Height =" 48"背景= QUOT;红色" /> 
< Grid Height =" 48"背景= QUOT;绿色" /> 
< Grid Height =" 48"背景= QUOT;蓝色" /> 
< Grid Height =" 48"背景= QUOT;黄色" /> 
< / StackPanel> 
< Button Click =" Button_Click">展开< / Button> 
< / StackPanel> 
< / Grid>

代码：

 
 private async void Button_Click（object sender，RoutedEventArgs e）
 {
 var dia = new MessageDialog（stpToExpand .ActualHeight.ToString（））; 
 await dia.ShowAsync（）; 
 
 var sbExpand =（故事板）资源[" stbExpand"]; //获取故事板
 sbExpand.Begin（）; //播放展开故事板
 
 sbExpand.Completed + = async（se，ev）=> 
 {
 dia = new MessageDialog（stpToExpand.ActualHeight.ToString（））; 
 await dia.ShowAsync（）; 
}; 
}

解决方案

I want to expand a stack panel from a fixed height to the actual height:


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

The stack panel:


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

The code to run the storyboard:


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

But the stack panel doesn't expand. It collapses and has now no height at all.

before the animation

after the animation

Sample

Page:


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

Code:


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绑定到ActualHeight不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！