動畫WPF菜單

Question

如果我有這樣的：

<StackPanel Orientation="Horizontal"> 
    <TextBlock Text="FIRST" Margin="5" VerticalAlignment="Center" /> 
    <TextBlock Text="SECOND" Margin="5" VerticalAlignment="Center" /> 
    <TextBlock Text="THIRD" Margin="5" VerticalAlignment="Center" /> 
    <TextBlock Text="FOURTH" Margin="5" VerticalAlignment="Center" /> 
    <TextBlock Text="FIFTH" Margin="5" VerticalAlignment="Center" /> 
</StackPanel> 

可否請你告訴我我該怎麼製作的動畫中TextBlock旨意從屏幕右側的推出，每個接連？

你能告訴我一個類似的例子嗎？

我知道我可能會需要使用Canvas代替StackPanel，但如何將它們妥善安排，然後我不知道......

Answer 1

下面是一個雙例子回答。如果你真的想在StackPanel中使用TextBlocks，我已經展示過了。但是，如果您實際上正在查找菜單，那麼我也包含了該示例。兩個例子都是一樣的 - 只是獲得動畫變化的對象。

<DockPanel HorizontalAlignment="Stretch" 
      VerticalAlignment="Stretch" 
      ClipToBounds="True"> 
    <StackPanel Orientation="Horizontal" DockPanel.Dock="Top"> 
     <TextBlock Text="FIRST" Margin="5" VerticalAlignment="Center" /> 
     <TextBlock Text="SECOND" Margin="5" VerticalAlignment="Center" /> 
     <TextBlock Text="THIRD" Margin="5" VerticalAlignment="Center" /> 
     <TextBlock Text="FOURTH" Margin="5" VerticalAlignment="Center" /> 
     <TextBlock Text="FIFTH" Margin="5" VerticalAlignment="Center" /> 
     <StackPanel.RenderTransform> 
      <TranslateTransform x:Name="translateTransform" 
           X="{Binding Path=ActualWidth, 
              RelativeSource={RelativeSource FindAncestor, 
                      AncestorType={x:Type DockPanel}}}" /> 
     </StackPanel.RenderTransform> 
     <StackPanel.Triggers> 
      <EventTrigger RoutedEvent="StackPanel.Loaded"> 
       <EventTrigger.Actions> 
        <BeginStoryboard> 
         <Storyboard> 
          <DoubleAnimation Storyboard.TargetName="translateTransform" 
              Storyboard.TargetProperty="(TranslateTransform.X)" 
              To="0" 
              BeginTime="0:0:0.5" 
              AutoReverse="False" 
              Duration="0:0:2.5" /> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger.Actions> 
      </EventTrigger> 
     </StackPanel.Triggers> 
    </StackPanel> 

    <Menu DockPanel.Dock="Top"> 
     <MenuItem Header="First" /> 
     <MenuItem Header="Second" /> 
     <MenuItem Header="Third" /> 
     <MenuItem Header="Fourth" /> 
     <MenuItem Header="Fifth" /> 
     <Menu.RenderTransform> 
      <TranslateTransform x:Name="translateTransform2" 
           X="{Binding Path=ActualWidth, 
              RelativeSource={RelativeSource FindAncestor, 
                      AncestorType={x:Type DockPanel}}}" /> 
     </Menu.RenderTransform> 
     <Menu.Triggers> 
      <EventTrigger RoutedEvent="Menu.Loaded"> 
       <EventTrigger.Actions> 
        <BeginStoryboard> 
         <Storyboard> 
          <DoubleAnimation Storyboard.TargetName="translateTransform2" 
              Storyboard.TargetProperty="(TranslateTransform.X)" 
              To="0" 
              BeginTime="0:0:3.5" 
              AutoReverse="False" 
              Duration="0:0:2.5" /> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger.Actions> 
      </EventTrigger> 
     </Menu.Triggers> 
    </Menu> 

    <Grid> 
     <TextBlock FontSize="25" 
        HorizontalAlignment="Center" 
        VerticalAlignment="Center" 
        Text="Content Goes Here" /> 
    </Grid> 

</DockPanel>