WIndows電話中的動畫高度

Question

我有一個網格包含兩個元素，一個搜索表單和一個自定義UC來顯示項目。當我的頁面加載時，查看器控件被隱藏。我在單擊搜索表單上的按鈕時用動畫板動畫。我卡在動畫的To=...部分。我想將它設置爲父容器的高度，並從底部向上滑動。這可能嗎？

供參考，這是我的樹結構：

頁面資源：

<Storyboard x:Name="animateViewSlide" Storyboard.TargetName="SearchForm" > 
     <DoubleAnimation Storyboard.TargetProperty="Height" To="???" Duration="100"/> 
</Storyboard> 

控制體：

<Grid x:Name="LayoutRoot"> 
    <Grid x:Name="SearchForm" Margin="6,6,6,70"> 
    <uc:AwesomeViewer x:Name="awesomeView" Awesomeness="{Binding SelectedAwesomeThing}" Visibility="Collapsed"/> 
</Grid> 

Answer 1

UPDATE

我確實找出了一個更好的方法來做這件事，而不是使用Margin來逐步完成動畫，只需要用一個TranslateTransform來動畫Y軸;

<Grid x:Name="ItemToMove" 
      Visibility="{Binding Condition, Converter={StaticResource boolVisConv}}" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="30,0,0,-32" Opacity="0"> 
       <Grid.RenderTransform> 
        <TranslateTransform x:Name="notified" Y="40" /> 
       </Grid.RenderTransform> 
        <Grid.Triggers> 
        <EventTrigger RoutedEvent="Grid.Loaded"> 
         <BeginStoryboard> 
           <Storyboard> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="notified" Storyboard.TargetProperty="Y"> 
             <SplineDoubleKeyFrame KeyTime="0:0:1.25" Value="0" /> 
            </DoubleAnimationUsingKeyFrames> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ItemToMove" Storyboard.TargetProperty="Opacity"> 
             <SplineDoubleKeyFrame KeyTime="0:0:1.55" Value="1" /> 
            </DoubleAnimationUsingKeyFrames> 
           </Storyboard> 
         </BeginStoryboard> 
        </EventTrigger> 
       </Grid.Triggers> 

結束時更新

你的麻煩會從試圖動畫自動計算出的值（Height）幹所以，除非你想你的父母使用硬編碼的大小值我會放棄這個想法/兒童或只是假設，如果應用程序僅限於肖像模式....那麼你的「收件人」值是800px，除了我想象那不是你要找的。

現在，你通常希望你可以將渲染後的大小提供給你的「To」值，比如可能通過To="{Binding ActualHeight, ElementName=LayoutRootOROTHERParentContainer}"對吧？然而，這也行不通...

所以，雖然別人可能有一個更好的方法，我發現的唯一方法是讓自動計算的大小獨自做他們的事情，而不是動畫對象Margin的步進通過ObjectAnimationUsingKeyFrames，當與通過DoubleAnimationUsingKeyFrames轉換配對時，實際上看起來相當不錯，除了它會爲該過程添加一堆額外的XAML。所以作爲一個概念，你可能會嘗試更類似的東西（但是如果你遇到了更好的解決方案，我一定也想知道它。）作爲一個生活設計師，我經常遇到這種情況。）

概念例子;

（該故事板）

<Storyboard x:Name="Kaboom"> 
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="border"> 
     <DiscreteObjectKeyFrame KeyTime="0:0:0.1"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0,750,0,0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
     <DiscreteObjectKeyFrame KeyTime="0:0:0.2"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0,600,0,0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
     <DiscreteObjectKeyFrame KeyTime="0:0:0.3"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0,550,0,0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
     <DiscreteObjectKeyFrame KeyTime="0:0:0.4"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0,500,0,0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
     <DiscreteObjectKeyFrame KeyTime="0:0:0.5"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0,450,0,0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
     <DiscreteObjectKeyFrame KeyTime="0:0:0.6"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0,400,0,0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
     <DiscreteObjectKeyFrame KeyTime="0:0:0.7"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0,350,0,0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
     <DiscreteObjectKeyFrame KeyTime="0:0:0.8"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0,300,0,0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
     <DiscreteObjectKeyFrame KeyTime="0:0:0.9"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0,250,0,0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
     <DiscreteObjectKeyFrame KeyTime="0:0:1"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0,200,0,0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
     <DiscreteObjectKeyFrame KeyTime="0:0:1.1"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0,150,0,0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
     <DiscreteObjectKeyFrame KeyTime="0:0:1.2"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0,100,0,0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
     <DiscreteObjectKeyFrame KeyTime="0:0:1.3"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0,50,0,0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
     <DiscreteObjectKeyFrame KeyTime="0:0:1.4"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
    </ObjectAnimationUsingKeyFrames> 
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border"> 
     <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.01"/> 
     <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="1"/> 
    </DoubleAnimationUsingKeyFrames> 
</Storyboard> 

在動作的概念的快速自組織例子;

<Grid Height="800" Width="480" x:Name="ParentContainer"> 
      <!-- Your SearchForm thingy with its funky margins already set like your example --> 
      <Rectangle Margin="6,6,6,70" Fill="Green" /> 
      <Button Height="100" Width="100" Content="Click Me!" HorizontalAlignment="Left" VerticalAlignment="Top"> 
       <!-- Quick button to show it in action --> 
        <i:Interaction.Triggers> 
         <i:EventTrigger EventName="Click"> 
          <ei:ControlStoryboardAction Storyboard="{StaticResource Kaboom}"/> 
         </i:EventTrigger> 
        </i:Interaction.Triggers> 
      </Button> 
      <!-- Your Awesomeness --> 
      <Border x:Name="border" Width="300" Background="Blue" HorizontalAlignment="Right" Margin="0,800,0,0" Opacity="0"> 
       <TextBlock x:Name="textBlock" Text="OH&#10;&#10;SNAP!!!&#10;&#10;Say&#10;&#10;WHAAA??" 
          TextAlignment="Center" VerticalAlignment="Center" 
          FontSize="40" FontWeight="Bold" Foreground="White"/> 
      </Border> 
     </Grid> 

反正，可能不是正是你希望的是什麼，但是是一種有效的替代尤其是，除非像我說，你要硬編碼的對象大小，所以你有什麼可行的設置一些調整你的「要「值... ...在限制爲標準800x480肖像模式的手機的情況下，只有您可能非常想要。但是，如果你沒有這個選項，我用這種方法取消了一些非常漂亮的設計。

希望這會有所幫助，祝你好運！