WPF: ¿se está promoviendo un cambio en la orientación de un panel de distribución?

Question

Estoy tratando de crear una animación donde un icono (un gráfico vectorial xaml en un lienzo envuelto en Viewbox) pasa de tener su texto (TextBlock) a su lado por debajo.

Actualmente tengo Viewbox y TextBlock en un StackPanel horizontalmente orientado. Puedo cambiar la orientación a vertical, pero esto es un cambio instantáneo (no animado suavemente). También puedo simplemente establecer la posición del TextBlock con una TranslateTransform (que puede ser animada), pero esto es difícil de hacer de forma reutilizable (es decir, sin valores de codificación rígida).

¿Alguien puede decirme si hay alguna forma centrada en WPF para animar la transición de orientación horizontal a vertical en un panel de pila? ¿O de otra manera que no haya pensado para lograr el efecto deseado?

¡Gracias a todos!

Answer 1

Hay una función en Blend llamada FluidLayout que puede hacer esto.

En Blend

• Crear un grupo nuevo estado, establecer una duración de transición y permitir el diseño fluido.
• Crea dos estados uno para horizontal, uno para vertical.
• Puede usar un comportamiento para alternar entre ellos.

Si usted no tiene Blend puede descargar el SDK que deben tener los archivos Microsoft.Expression.Interactions y System.Windows.Interactivity requeridos. Agregue referencias a estos y pruebe la muestra a continuación.

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

puede utilizar un método similar para manejar la transición elemento utilizando estados para mover los elementos o cambiando Grid.Row, RowSpan, Col. Es posible que necesite un código para unir todo. Estoy buscando una muestra más elaborada que publicaré si resuelvo los problemas.