2013-07-27 71 views
2

這有點難以形容,但我會盡我所能。
我有一個控件,它有一個圖像和一個標籤,它需要有2個狀態(「大」和「小」)。受面板限制的動畫

在「大」狀態下,圖像應該位於控件的頂部,而標籤應該位於中心下方(就像停靠在圖片和停靠在頂部的標籤一樣)。

在「小」狀態下,圖像應該更小,並且位於控件的左上角,並且標籤應該緊挨着它。

的大國應該像這樣:

Big State

和小狀態:

Small State

而棘手的問題:當我在它們之間切換,我需要它來製作動畫超過0.3秒。
我沒有發現適合這個的面板。

DockPanel對於這兩種狀態都是一個很好的解決方案,但它不能對它進行動畫處理。
畫布可以爲其設置動畫,但沒有合適的佈局(不能將它們居中)。

什麼是最好的方法來做到這一點?

回答

0

在WPF中沒有動畫對齊,唯一可以出現的 - it ThicknessAnimation。但是您可以使用DiscreteObjectKeyFrame來設置對齊方式。下面是一個簡單的演示,在其中LabelBottom設置VerticalAlignment

<Grid> 
    <Grid.Triggers> 
     <EventTrigger SourceName="Small" RoutedEvent="Button.Click"> 
      <BeginStoryboard> 
       <Storyboard>       
        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Test" Storyboard.TargetProperty="VerticalAlignment"> 
         <DiscreteObjectKeyFrame KeyTime="0:0:0"> 
          <DiscreteObjectKeyFrame.Value> 
           <VerticalAlignment>Bottom</VerticalAlignment> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger> 
    </Grid.Triggers> 

    <Label x:Name="Test" Content="Test" Width="300" Height="300" Background="Aqua" VerticalAlignment="Top" HorizontalAlignment="Center" /> 

    <Button Name="Small" Content="Small" Width="100" Height="30" HorizontalAlignment="Right" VerticalAlignment="Top" /> 
</Grid> 

與標準相結合的動畫使用它,如DoubleAnimation,我想你就可以實現這一目標。