C# UWP XAML Ảnh động

Question

Tôi có một Trang có Lưới chứa hai cột, nút đầu tiên chứa một nút chuyển đổi chế độ hiển thị của cột thứ hai (thông qua liên kết ViewModel). Làm cách nào để thêm hoạt ảnh để hiển thị/ẩn cột thứ hai (với Pivot dưới dạng nội dung) cho trường hợp này?

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

Trên đây hoạt động tốt, nhưng chỉ vào chuyển trạng thái đầu tiên của khả năng hiển thị của Pivot. Các chuyển đổi tiếp theo không hiển thị hình động ..

Bất kỳ cách dễ dàng nào để đạt được điều này mà không cần gọi Bảng phân cảnh theo cách thủ công?

Cảm ơn.

== EDIT ==

tôi đã thực hiện một số thay đổi mã trên (cụ thể là, thêm VisualStates và DataTriggerBehaviour).

Vẫn không thể làm cho nó hoạt động ... Bất kỳ ý tưởng nào?

Answer 1

Trong trường hợp tương tự, những gì tôi đã làm không chuyển đổi chế độ hiển thị của trục mà đúng hơn là chiều rộng của cột lưới (hoặc trục xoay). Sau khi tất cả trục xoay có chiều rộng bằng 0 là vô hình. Cộng với những gì tôi thấy trong mã của bạn, kích thước của cột thứ hai được đặt thành 300 để chiều rộng mục tiêu cho hoạt ảnh sẽ không thành vấn đề.

Đề xuất của tôi là tạo hai bảng phân cảnh trong xaml nhắm mục tiêu chiều rộng của trục. Việc đầu tiên sẽ mở rộng nó và thứ hai sẽ sụp đổ nó. Sau đó sử dụng DataTriggerBehavior ràng buộc với TogglePivot để kích hoạt bảng phân cảnh. Bằng cách này, xaml vẫn sạch và không cần mã.

Nếu bạn thử và không thể làm đúng, tôi có thể cung cấp một số mã mẫu.

Chỉnh sửa: Bạn có ý tưởng hơi sai một chút. Đây là những gì làm việc cho tôi.

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>