C# UWP XAML Animationen

Question

Ich habe eine Seite mit einem Raster mit zwei Spalten, die erste enthält eine Schaltfläche, die die Sichtbarkeit der zweiten (über eine ViewModel-Bindung) schaltet. Wie kann ich eine Animation zum Anzeigen/Verbergen der zweiten Spalte (mit Pivot als Inhalt) zu diesem Szenario hinzufügen?

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

Die oben funktioniert gut, aber nur auf dem ersten Knie der Sichtbarkeit des Pivot. Nachfolgende Umschalttasten zeigen die Animation nicht an.

Eine einfache Möglichkeit, dies zu erreichen, ohne Storyboards manuell aufzurufen?

Danke.

== == EDIT

ich einige Änderungen an obigen Code aus (nämlich hinzugefügt VisualStates und DataTriggerBehaviour).

Noch kann es nicht zur Arbeit ... Irgendwelche Ideen?

Answer 1

In einem ähnlichen Szenario, was ich tat, war nicht die Sichtbarkeit des Pivot, sondern die Breite der Rasterspalte (oder der Pivot). Schließlich ist ein Pivot mit der Breite Null unsichtbar. Plus von dem, was ich in Ihrem Code sehen kann, ist die Größe der zweiten Spalte auf 300 gesetzt, so dass die Zielbreite für die Animation kein Problem sein wird.

Mein Vorschlag ist, zwei Storyboards in XAML zu erstellen, die auf die Breite des Pivots ausgerichtet sind. Der erste würde ihn erweitern und der zweite würde ihn zusammenbrechen lassen. Verwenden Sie anschließend DataTriggerBehavior, das an das TogglePivot gebunden ist, um die Storyboards auszulösen. Auf diese Weise ist die XAML immer noch sauber und es ist kein Code erforderlich.

Wenn Sie es versuchen und es nicht richtig bekommen kann ich einige Beispielcode bereitstellen.

Edit: Sie haben die Idee ein bisschen falsch. Das hat bei mir funktioniert.

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>