C# UWP XAML Animazioni

Question

Ho una pagina con una griglia contenente due colonne, la prima contiene un pulsante che attiva la visibilità della seconda (tramite associazione ViewModel). Come posso aggiungere un'animazione per mostrare/nascondere la seconda colonna (con Pivot come contenuto) in questo scenario?

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*"/> 
     <ColumnDefinition Width="Auto"/> 
    </Grid.ColumnDefinitions> 

    <Grid Grid.Column="0"> 
     <Button Command="{Binding TogglePivot}"/> 
    </Grid> 

    <Pivot x:Name="Content_Pivot" Grid.Column="1"> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup> 
       <!-- Hidden state --> 
       <VisualState x:Name="Hidden"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content_Pivot" Storyboard.TargetProperty="Width"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="0"/> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 

       <!-- Visible state --> 
       <VisualState x:Name="Visible"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content_Pivot" Storyboard.TargetProperty="Width"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="600"/> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 

     <interactivity:Interaction.Behaviors> 
      <!-- Show --> 
      <core:DataTriggerBehavior Binding="{Binding IsVisible}" ComparisonCondition="Equal" Value="True"> 
       <core:GoToStateAction StateName="Visible"/> 
      </core:DataTriggerBehavior> 

      <!-- Hide --> 
      <core:DataTriggerBehavior Binding="{Binding IsVisible}" ComparisonCondition="Equal" Value="False"> 
       <core:GoToStateAction StateName="Hidden" /> 
      </core:DataTriggerBehavior> 
     </interactivity:Interaction.Behaviors> 

     <!-- Content.. --> 
    </Pivot> 
</Grid> 

Quanto sopra funziona bene, ma solo sulla prima levetta della visibilità del perno. I commutatori successivi non mostrano l'animazione ..

Qualsiasi modo semplice per ottenere ciò senza richiamare manualmente gli storyboard?

Grazie.

== == EDIT

ho fatto alcune modifiche al codice di cui sopra (cioè, aggiunto VisualStates e DataTriggerBehaviour).

Ancora non riesco a farlo funzionare ... Qualche idea?

Answer 1

In uno scenario simile, quello che ho fatto non è stato alternare la visibilità del pivot ma piuttosto la larghezza della colonna della griglia (o del pivot). Dopotutto un pivot con larghezza zero è invisibile. Inoltre, da quello che posso vedere nel codice, la dimensione della seconda colonna è impostata su 300, quindi la larghezza di destinazione dell'animazione non sarà un problema.

Il mio suggerimento è quello di creare due storyboard in xaml che mirino alla larghezza del pivot. Il primo lo espanderebbe e il secondo lo collasserebbe. Quindi utilizzare DataTriggerBehavior associato a TogglePivot per attivare gli storyboard. In questo modo lo xaml è ancora pulito e non è richiesto alcun codice.

Se lo provi e non riesco a farlo bene, posso fornire un codice di esempio.

Modifica: l'idea è leggermente sbagliata. Questo è ciò che ha funzionato per me.

xmlns:media="using:Microsoft.Xaml.Interactions.Media" 
<Page.Resources> 

    <Storyboard x:Name="PaneStoryboard"> 
     <DoubleAnimation Duration="0:0:1" To="300" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="Content_Pivot" EnableDependentAnimation="True"/> 
    </Storyboard> 

    <Storyboard x:Name="CloseStoryboard"> 
     <DoubleAnimation Duration="0:0:1" To="0" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="Content_Pivot" EnableDependentAnimation="True"/> 
    </Storyboard> 

</Page.Resources> 

<Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto"/> 
      <ColumnDefinition Width="Auto"/> 
     </Grid.ColumnDefinitions> 

     <Grid Grid.Column="0">     
      <Button Content="Opend and Close" Command="{Binding TogglePivot}" /> 
     </Grid> 

     <Pivot x:Name="Content_Pivot" Grid.Column="1" Width="300" Background="Blue"> 

      <interactivity:Interaction.Behaviors> 

      <!--Show--> 

       <core:DataTriggerBehavior Binding="{Binding IsVisible}" ComparisonCondition="Equal" Value="True"> 
        <media:ControlStoryboardAction Storyboard="{StaticResource PaneStoryboard}"/> 
       </core:DataTriggerBehavior> 


      <!--Hide--> 

       <core:DataTriggerBehavior Binding="{Binding IsVisible}" ComparisonCondition="Equal" Value="False"> 
        <media:ControlStoryboardAction Storyboard="{StaticResource CloseStoryboard}"/> 
       </core:DataTriggerBehavior> 
      </interactivity:Interaction.Behaviors> 

      <!-- Content.. --> 
     </Pivot> 
    </Grid>