스토리 보드 DoubleAnimation이 StackPanel 높이 속성과 함께 작동하지 않습니다.

DoubleAnimation을 사용하여 StackPanel의 높이 속성을 변경하려고합니다. 이 코드는 예외를 throw하지 않습니다. 그러나 애니메이션이 작동하지 않습니다.스토리 보드 DoubleAnimation이 StackPanel 높이 속성과 함께 작동하지 않습니다.

  <StackPanel x:Name="FlyoutContent"> 

       <StackPanel.Resources> 
        <Storyboard x:Name="HideStackPanel"> 
         <DoubleAnimation Storyboard.TargetName="ChangePasswordPanel" Storyboard.TargetProperty="Height" From="190" To="0" Duration="0:0:1"> 
          <DoubleAnimation.EasingFunction> 
           <PowerEase EasingMode="EaseIn"></PowerEase> 
          </DoubleAnimation.EasingFunction> 
         </DoubleAnimation> 
        </Storyboard> 
        <Storyboard x:Name="ShowStackPanel"> 
         <DoubleAnimation Storyboard.TargetName="ChangePasswordPanel" Storyboard.TargetProperty="Height" From="0" To="190" Duration="0:0:1"> 
          <DoubleAnimation.EasingFunction> 
           <PowerEase EasingMode="EaseIn"></PowerEase> 
          </DoubleAnimation.EasingFunction> 
         </DoubleAnimation> 
        </Storyboard> 
       </StackPanel.Resources> 

       <TextBlock Margin="0, 20, 0, 0" FontWeight="Bold" Text="Change Current Password" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left" IsTapEnabled="True" Tapped="ChangePasswordHeader_Tapped"/> 
       <StackPanel x:Name="ChangePasswordPanel" Margin="0, 5, 0, 0" Height="0">

C# 이벤트 처리기

private void ChangePasswordHeader_Tapped(object sender, TappedRoutedEventArgs e) 
{ 
    if (ChangePasswordPanel.Height == 0) 
    { 
     ShowStackPanel.Begin(); 
    } 
    else 
    { 
     HideStackPanel.Begin(); 
    } 
}

그것은 ChangePasswordHeader_Tapped 이벤트 핸들러에 충돌 예상대로 ShowStackPanel.Begin 또는 HideStackPanel.Begin 문을 실행할 수 없습니다. 그러나 출력에는 아무런 영향을 미치지 않습니다. StackPanel의 높이는 단지 0에 머물러 있습니다.

무슨 일이 일어나고 있는지 어떤 생각이 있으십니까 ??

출처

2012-11-11 Jagadish G

StackPanel 대신 Grid를 사용할 수 있습니다. – Clemens

Grid를 사용할 때와 같은 결과가 나타납니다. 애니메이션이 작동하지 않습니다. –

Width 속성과 동일한 문제와 동일한 문제가 있습니다. –

나는 그것을 스스로 알아 냈습니다. 이 애니메이션은 레이아웃에 영향을 미치기 때문에 DoubleAnimation에서 종속 애니메이션 사용 (EnableDependentAnimation) 만하면되었습니다. 그리고 완벽하게 작동했습니다.

     <Storyboard x:Name="HideChangePasswordPanel"> 
          <DoubleAnimation EnableDependentAnimation="True" Storyboard.TargetName="ChangePasswordPanel" Storyboard.TargetProperty="Height" From="190" To="0" Duration="0:0:0.2"> 
           <DoubleAnimation.EasingFunction> 
            <PowerEase EasingMode="EaseIn"></PowerEase> 
           </DoubleAnimation.EasingFunction> 
          </DoubleAnimation> 
         </Storyboard> 
         <Storyboard x:Name="ShowChangePasswordPanel"> 
          <DoubleAnimation EnableDependentAnimation="True" Storyboard.TargetName="ChangePasswordPanel" Storyboard.TargetProperty="Height" From="0" To="190" Duration="0:0:0.2"> 
           <DoubleAnimation.EasingFunction> 
            <PowerEase EasingMode="EaseIn"></PowerEase> 
           </DoubleAnimation.EasingFunction> 
          </DoubleAnimation> 
         </Storyboard>

누군가가 시간을 절약 할 수 있기를 바랍니다.

출처

2012-11-12 06:04:02

UI의 높이를 항상 알고 있습니까? 이 기술을 사용하여 "자동"높이로 다시 애니메이션 할 수는 없습니까? – WiredPrairie

해결 방법은 Width 속성에서도 작동하는 것으로 확인되었습니다. –

스택 패널의 내용물을 합친 높이에서 높이를 사용합니다. 명시 적으로 높이를 설정하는 것은 의미가 없습니다.

스택 패널의 내용 높이/가시성을 변경해야합니다.

출처

2012-11-11 19:18:07 ChrisF

일반적으로 XAML (및 Silverlight/WPF)에서 UI 구성 요소의 크기를 애니메이션하는 가장 쉬운 방법은 RenderTransform을 사용하는 것입니다. 레이아웃에 따라 몇 가지 트릭이 필요할 수 있지만 빠른 애니메이션의 경우 일반적으로 멋지게 보입니다.

<Storyboard x:Name="Storyboard1"> 
<DoubleAnimation Duration="0:0:2" 
     To="0" 
     Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" 
     Storyboard.TargetName="StatListView" d:IsOptimized="True"/> 
<DoubleAnimation Duration="0:0:2" 
     To="0" 
     Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" 
     Storyboard.TargetName="StatListView" d:IsOptimized="True"/> 
</Storyboard>

출처

2012-11-11 20:46:35 WiredPrairie

스토리 보드 DoubleAnimation이 StackPanel 높이 속성과 함께 작동하지 않습니다.

답변

관련 문제