Windows 8 Animation en Xaml et C# pour déplacer un objet d'une colonne à l'autre?

Question

J'ai fait un contrôle d'utilisateur pour développer sur le clic et il y a 7 d'entre eux dans une grille avec des colonnes. Quand je clique sur le dernier, il sort de l'écran. Je veux animer le fait que s'il se développe, il devrait passer à grid.column 1 et quand il s'effondre, il retourne à sa propre grille.

code:

<Grid x:Name="GrdVwSearchResults" Grid.Row="2" Margin="120,70,0,0" > 
     <Grid.Resources> 
      <Storyboard x:Name="moveBackAnimation" > 
       <DoubleAnimation x:Name="moveBackDoubleAnimation" EnableDependentAnimation="True" Storyboard.TargetName="usrFlight5" Storyboard.TargetProperty="Col" From="4" To="1" Duration="0:0:0.5"/> 
      </Storyboard> 
     </Grid.Resources> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto" /> 
      <ColumnDefinition Width="Auto" /> 
      <ColumnDefinition Width="Auto" /> 
      <ColumnDefinition Width="Auto" /> 
      <ColumnDefinition Width="Auto" /> 
      <ColumnDefinition Width="Auto" /> 
      <ColumnDefinition Width="Auto" /> 
     </Grid.ColumnDefinitions> 
     <usercontrol:Top3SearchResultDisplay x:Name="usrFlight1" Height="440" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
     <usercontrol:Top3SearchResultDisplay x:Name="usrFlight2" Grid.Column="1" Height="440" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0"/> 
     <usercontrol:Top3SearchResultDisplay x:Name="usrFlight3" Grid.Column="2" Height="440" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0"/> 
     <usercontrol:Top3SearchResultDisplay x:Name="usrFlight4" Grid.Column="3" Height="440" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0"/> 
     <usercontrol:Top3SearchResultDisplay x:Name="usrFlight5" Grid.Column="4" Height="440" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0"/> 
     <usercontrol:Top3SearchResultDisplay x:Name="usrFlight6" Grid.Column="5" Height="440" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0"/> 
     <usercontrol:Top3SearchResultDisplay x:Name="usrFlight7" Grid.Column="6" Height="440" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0"/> 
    </Grid> 

Answer 1

Je ne sais pas comment vous utilisez, mais voici une animation qui fournirait un aspect "contextuel" à l'objet.

<Storyboard x:Name="PopupFlight"> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="usrFlight7"> 
      <DiscreteObjectKeyFrame KeyTime="0"> 
       <DiscreteObjectKeyFrame.Value> 
        <x:Int32>7</x:Int32> 
       </DiscreteObjectKeyFrame.Value> 
      </DiscreteObjectKeyFrame> 
     </ObjectAnimationUsingKeyFrames> 
     <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="usrFlight7"> 
      <EasingDoubleKeyFrame KeyTime="0" Value="200"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:2" Value="500"/> 
     </DoubleAnimationUsingKeyFrames> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.ZIndex)" Storyboard.TargetName="usrFlight7"> 
      <DiscreteObjectKeyFrame KeyTime="0"> 
       <DiscreteObjectKeyFrame.Value> 
        <x:Int32>10</x:Int32> 
       </DiscreteObjectKeyFrame.Value> 
      </DiscreteObjectKeyFrame> 
     </ObjectAnimationUsingKeyFrames> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="usrFlight7"> 
      <DiscreteObjectKeyFrame KeyTime="0"> 
       <DiscreteObjectKeyFrame.Value> 
        <x:Int32>3</x:Int32> 
       </DiscreteObjectKeyFrame.Value> 
      </DiscreteObjectKeyFrame> 
     </ObjectAnimationUsingKeyFrames> 
    </Storyboard> 

Answer 2

Si vous souhaitez animer les changements de dans une grille, la meilleure façon de ligne ou une colonne d'un élément est d'utiliser la VisualStateManager. Vous pouvez activer FluidLayout pour animer les modifications de mise en page telles que la ligne, la grille, etc. Cela peut se faire très facilement dans Expression Blend.

Voici un bref exemple du code XAML d'une grille avec 6 colonnes avec un bouton dans la dernière colonne, qui va animer la première colonne lorsque vous cliquez dessus. Pour les changements d'état plus avancés que vous voulez probablement changer l'état dans le code, mais utilise un comportement pour changer l'état en XAML:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" 
     xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
     x:Class="TestingWPF.MainWindow" 
     Title="MainWindow" 
     Height="350" 
     Width="525"> 
    <Grid x:Name="LayoutRoot"> 
     <VisualStateManager.CustomVisualStateManager> 
      <ei:ExtendedVisualStateManager/> 
     </VisualStateManager.CustomVisualStateManager> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="VisualStateGroup" ei:ExtendedVisualStateManager.UseFluidLayout="True"> 
       <VisualStateGroup.Transitions> 
        <VisualTransition GeneratedDuration="0:0:0.5"/> 
       </VisualStateGroup.Transitions> 
       <VisualState x:Name="Default"/> 
       <VisualState x:Name="Expanded"> 
        <Storyboard> 
         <Int32AnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="button"> 
          <EasingInt32KeyFrame KeyTime="0" Value="0"/> 
         </Int32AnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*"/> 
      <ColumnDefinition Width="*"/> 
      <ColumnDefinition Width="*"/> 
      <ColumnDefinition Width="*"/> 
      <ColumnDefinition Width="*"/> 
      <ColumnDefinition Width="*"/> 
     </Grid.ColumnDefinitions> 
     <Button x:Name="button" Content="Button" Grid.Column="5"> 
      <i:Interaction.Triggers> 
       <i:EventTrigger EventName="Click"> 
        <ei:GoToStateAction StateName="Expanded"/> 
       </i:EventTrigger> 
      </i:Interaction.Triggers> 
     </Button> 
    </Grid> 
</Window>