d'animation WPF Menu

Question

Si j'ai quelque chose comme:

<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> 

Pourriez-vous s'il vous plaît me montrer comment puis-je créer une animation où TextBlock s rouleront à partir du côté droit de l'écran, chacun après l'autre?

Pourriez-vous me montrer un exemple similaire?

Je sais que je dois probablement vais d'utiliser Canvas au lieu de StackPanel, mais la façon de les organiser correctement alors je ne sais pas ...

Answer 1

Voici une réponse à deux par exemple. Si vous voulez vraiment utiliser TextBlocks dans un StackPanel, je l'ai montré. Cependant, si vous cherchez un menu, j'ai également inclus cet exemple. Les deux exemples sont vraiment les mêmes - juste l'objet qui obtient des changements animés.

<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>