WPF - Hoạt hình thay đổi hướng của chồng xếp chồng?

Question

Tôi đang cố tạo một hoạt ảnh có biểu tượng (một đồ họa véc tơ xaml trên Canvas bọc khung nhìn) đi từ việc có văn bản (TextBlock) bên cạnh nó ở bên dưới nó.

Tôi hiện đang có Viewbox và TextBlock trong StackPanel theo chiều ngang. Tôi có thể thay đổi hướng theo chiều dọc, nhưng đây là một thay đổi tức thì (không hoạt động trơn tru). Tôi cũng có thể chỉ đặt vị trí của TextBlock với một TranslateTransform (có thể được làm động), nhưng điều này rất khó thực hiện theo cách tái sử dụng (tức là không có các giá trị mã hóa cứng).

Bất cứ ai có thể cho tôi biết nếu có bất kỳ cách WPF nào trung tâm để tạo hiệu ứng chuyển tiếp từ hướng ngang sang dọc trong ngăn xếp ngăn xếp? Hoặc một cách khác tôi đã không nghĩ đến để đạt được hiệu quả mong muốn?

Cảm ơn tất cả!

Answer 1

Có một tính năng trong Blend được gọi là FluidLayout có thể thực hiện việc này.

Trong Blend

• Tạo một nhóm trạng thái mới, thiết lập một khoảng thời gian chuyển tiếp và cho phép bố trí chất lỏng.
• Tạo hai trạng thái một cho ngang, một cho theo chiều dọc.
• Sau đó, bạn có thể sử dụng hành vi để chuyển đổi giữa chúng.

Nếu bạn không có Blend, bạn có thể tải xuống SDK cần có các tệp bắt buộc Microsoft.Expression.Interactions và System.Windows.Interactivity. Thêm tài liệu tham khảo vào các mẫu này và thử mẫu bên dưới.

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:il="clr-namespace:Microsoft.Expression.Interactivity.Layout;assembly=Microsoft.Expression.Interactions" 
    xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions" 
    x:Class="WpfApplication4.MainWindow" 
    x:Name="Window" 
    Title="MainWindow" 
    Width="640" Height="480"> 

    <Grid x:Name="LayoutRoot"> 
     <VisualStateManager.CustomVisualStateManager> 
      <ic:ExtendedVisualStateManager/> 
     </VisualStateManager.CustomVisualStateManager> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="Orientation" ic:ExtendedVisualStateManager.UseFluidLayout="True"> 
       <VisualStateGroup.Transitions> 
        <VisualTransition GeneratedDuration="00:00:00.3000000"/> 
       </VisualStateGroup.Transitions> 
       <VisualState x:Name="Vertical"/> 
       <VisualState x:Name="Horizontal"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="stack" Storyboard.TargetProperty="(StackPanel.Orientation)"> 
          <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Orientation.Horizontal}"/> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 
     <StackPanel x:Name="stack" Margin="8,49,8,8"> 
      <Button Content="Button"/> 
      <Button Content="Button"/> 
      <Button Content="Button"/> 
      <Button Content="Button"/> 
      <Button Content="Button"/> 
     </StackPanel> 
     <Button HorizontalAlignment="Left" Margin="8,8,0,0" VerticalAlignment="Top" Width="97" Height="25" Content="H"> 
      <i:Interaction.Triggers> 
       <i:EventTrigger EventName="Click"> 
        <ic:GoToStateAction StateName="Horizontal"/> 
       </i:EventTrigger> 
      </i:Interaction.Triggers> 
     </Button> 
     <Button HorizontalAlignment="Left" Margin="109,8,0,0" VerticalAlignment="Top" Width="97" Height="25" Content="V"> 
      <i:Interaction.Triggers> 
       <i:EventTrigger EventName="Click"> 
        <ic:GoToStateAction StateName="Vertical"/> 
       </i:EventTrigger> 
      </i:Interaction.Triggers> 
     </Button> 
    </Grid> 
</Window> 

Bạn có thể sử dụng phương pháp tương tự để xử lý chuyển tiếp mục bằng cách sử dụng trạng thái để di chuyển các phần tử hoặc bằng cách thay đổi Grid.Row, RowSpan, Col. Bạn có thể cần một số mã để buộc tất cả mọi thứ lại với nhau. Tôi đang xem xét một mẫu phức tạp hơn tôi sẽ đăng nếu tôi phân loại các vấn đề.