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

09-02 23:22