WPF動畫StackPanel的寬度從0到Auto？

我想動畫一個StackPanel時，其知名度改爲從0的寬度增長到它的自動寬度，這裏是我的時刻：WPF動畫StackPanel的寬度從0到Auto？

<Trigger Property="Visibility" Value="Visible"> 
    <Setter Property="Width" Value="0"></Setter> 
    <Trigger.EnterActions> 
     <BeginStoryboard> 
      <Storyboard> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Duration="0:0:1"> 
        <DiscreteObjectKeyFrame KeyTime="0"> 
         <DiscreteObjectKeyFrame.Value> 
          <System:Double>NaN</System:Double> 
         </DiscreteObjectKeyFrame.Value> 
        </DiscreteObjectKeyFrame> 
       </ObjectAnimationUsingKeyFrames> 
      </Storyboard> 
     </BeginStoryboard> 
    </Trigger.EnterActions> 
</Trigger>

有人能解釋我如何能做到這一點的動畫？這可能不可能以我嘗試去做的方式嗎？

謝謝， alex。

來源

2014-12-04 Alex Hope O' Connor

我已經產生由動畫從0到ScaleTransform 1爲雙動畫一些示例代碼，但是我似乎不具有控制哪個方向動畫從。你想讓我發佈樣本代碼作爲答案嗎？ – learningcs 2014-12-04 23:10:02

@rshepp如果你遇到了這些麻煩，即使是半工半工，你也可以發帖。 – McGarnagle 2014-12-04 23:28:56

是的，發佈它，我發現接近工作的唯一的其他東西是使用LayoutTransform，但我不太瞭解它足以滿足我的需求。 – 2014-12-04 23:49:10

這是一個快速模型項目，我扔在一起。

在Window's Loaded事件中，我只需將Stackpanel的可見性設置爲Visible，並將其展開爲從左到右適合其容器寬度......希望這符合您的需求。

需要注意以下幾點：

您必須預定義的尺度變換，否則動畫將不會播放。
如果您在動畫中省略了To，它將動畫回到默認值。

這裏是代碼：

<Window x:Class="WpfApplication1.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="350" Width="600" Loaded="Window_Loaded"> 
    <Border HorizontalAlignment="Center" Width="300" Background="Gainsboro"> 
     <Border.Resources> 
      <Style TargetType="StackPanel" x:Key="expand"> 
       <Setter Property="RenderTransform"> 
        <Setter.Value> 
         <ScaleTransform ScaleX="1"/> 
        </Setter.Value> 
       </Setter> 
       <Style.Triggers> 
        <Trigger Property="Visibility" Value="Visible"> 
         <Trigger.EnterActions> 
          <BeginStoryboard> 
           <Storyboard> 
            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" 
                From="0" 
                Duration="0:00:01"/> 
           </Storyboard> 
          </BeginStoryboard> 
         </Trigger.EnterActions> 
        </Trigger> 
       </Style.Triggers> 
      </Style> 
     </Border.Resources> 

     <StackPanel x:Name="stackpanel" Background="Gray" Visibility="Collapsed" Style="{StaticResource expand}"/> 

    </Border> 
</Window>

來源

2014-12-04 23:51:14 learningcs

工作得很好！寧願直接動畫寬度，但縮放動畫也不看起來破舊。謝謝！ – 2014-12-05 00:00:02

當'Visibility'改變爲「Visible」時，這對於動畫效果非常好 - 當'Visibility'被「摺疊」時，我將如何添加「反向」動畫？ – 2015-06-10 21:18:23

我在上面的評論中看到你無法控制動畫的方向;你所要做的就是將'RenderTransformOrigin'設置爲'1,0'以從另一側進行動畫處理，或者將0.5,0'設置爲從中心進行動畫處理。 – 2015-06-10 21:20:53

WPF動畫StackPanel的寬度從0到Auto？

回答

相關問題