Animacje C# UWP XAML

Question

Mam stronę z siatką zawierającą dwie kolumny, pierwsza zawiera przycisk, który przełącza widoczność drugiego (poprzez powiązanie ViewModel). Jak mogę dodać animację do pokazywania/ukrywania drugiej kolumny (z Pivot jako treścią) do tego scenariusza?

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

Powyższy działa dobrze, ale tylko na pierwszy przełącznik z widoczności obrotu. Kolejne przełączenia nie wyświetlają animacji ..

Dowolny łatwy sposób na osiągnięcie tego bez ręcznego wywoływania Storyboard?

Dzięki.

EDIT == ==

że pewne zmiany w powyżej kodu (tj dodano VisualStates i DataTriggerBehaviour).

Nadal nie można go uruchomić ... Jakieś pomysły?

Answer 1

W podobnym scenariuszu nie zmieniłem widoczności osi przestawnej, lecz szerokości kolumny siatki (lub osi obrotu). Przecież przestaw o zerowej szerokości jest niewidoczny. Dodatkowo z tego, co widzę w twoim kodzie, rozmiar drugiej kolumny jest ustawiony na 300, więc docelowa szerokość animacji nie będzie problemem.

Moja sugestia to utworzenie dwóch scenorysów w języku xaml kierujących na szerokość osi obrotu. Pierwszy rozszerzyłby go, a drugi go zwinął. Następnie użyj DataTriggerBehavior związanego z TogglePivot, aby uruchomić storyboardy. W ten sposób xaml jest nadal czysty i nie wymaga kodu.

Jeśli spróbujesz i nie da się tego naprawić, mogę podać przykładowy kod.

Edycja: Pomyliłeś pomysł. To właśnie dla mnie zadziałało.

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>