En WPF, ¿alguien ha animado una cuadrícula?

Question

Tengo 2 columnas en una cuadrícula. Cuando hago clic en un botón, quiero que la primera columna se mueva a la izquierda desde su posición actual a 0. Entonces, en efecto, colapsa y me queda solo viendo una sola columna.

Answer 1

Salida relación formación this de vídeo, de Todd Miranda que le muestra cómo animar a la altura de un control de la red. Creo que podría hacerlo funcionar fácilmente para su caso.

Answer 2

No debería ser demasiado difícil. Tendrá que crear un EventTrigger que tenga un BeginStoryboard que se dirija a la grilla y use una doble animación para reducir el ancho de la columna. The example here has a similar setup. EventTrigger irá al botón y DoubleAnimation StoryBoard.Target apuntará a ColumnDefinition que desea reducir.

Bien, entonces eso no funciona tan bien. No puede reducir la columna directamente, pero PUEDE configurar la columna de contracción para rellenar (ancho = "*"), establecer el ancho de la cuadrícula y la columna sin contracción, y luego reducir toda la cuadrícula. Esto funciona El siguiente ejemplo funciona:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     WindowTitle="Opacity Animation Example" 
     Background="White"> 
    <StackPanel Margin="20"> 
     <Grid Name="MyGrid" Width="200" HorizontalAlignment="Left"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="100"/> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*"/> 
      <ColumnDefinition Width="100"/> 
     </Grid.ColumnDefinitions> 
     <Rectangle HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch" 
        Grid.Column="0" Fill="Red"/> 
     <Rectangle HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch" 
        Grid.Column="1" Fill="Blue"/> 
     </Grid> 

     <Button Name="hideButton"> 
     <Button.Triggers> 
      <EventTrigger RoutedEvent="Button.Click"> 
       <BeginStoryboard> 
        <Storyboard> 
        <DoubleAnimation 
         Storyboard.TargetName="MyGrid" 
         Storyboard.TargetProperty="(Grid.Width)" 
         From="200" To="100" 
         Duration="0:0:2" 
         AutoReverse="True" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 
     </Button.Triggers> 
     </Button> 
    </StackPanel> 
</Page> 

Answer 3

Otra cosa que puede hacer es animar a los contenidos y establecer la cuadrícula con autoSize al contenido que se va a hacer de la mejor manera el tamaño de contenido cambios.

Answer 4

También puede lograr esto con la animación GridLength, consulte un ejemplo aquí http://marlongrech.wordpress.com/2007/08/20/gridlength-animation/ Al usar este enfoque, puede manipular cualquier Grid.Column o tamaño de Grilla.Row dados.

Para su necesidad especial simplemente coloque la primera columna con Ancho = "Automático" y la segunda con *, anime el contenido dentro de la primera columna, eso hará el truco.

Answer 5

También puede utilizar el mando a Revelar de la bolsa-o-trucos de Kevin, http://j832.com/bagotricks/

Answer 6

He tomado el código fuente de C# de Todd Miranda y lo he modificado, para demostrar cómo animar anchos de columna de DataGrid que se acortan & expandiéndose.

Aquí está el código fuente ...

http://www.pocketpctoolkit.com/WPF/DataGridColumnWidthAnimation.zip

Básicamente, usted Elige una opcion, y cualquiera que sea columnas de DataGrid tiene su valor "MinWidth" pone a 0 será reducido a cero de ancho. Haga clic en la casilla de verificación nuevamente, las columnas se animarán nuevamente a sus anchos originales.

Este código WPF también muestra cómo crear animaciones/guiones gráficos en el código subyacente.

Answer 7

Es necesario crear una clase GridLengthAnimation (código de: http://windowsclient.net/learn/video.aspx?v=70654)

public class GridLengthAnimation : AnimationTimeline 
{ 
    public GridLengthAnimation() 
    { 
     // no-op 
    } 

    public GridLength From 
    { 
     get { return (GridLength)GetValue(FromProperty); } 
     set { SetValue(FromProperty, value); } 
    } 

    public static readonly DependencyProperty FromProperty = 
     DependencyProperty.Register("From", typeof(GridLength), typeof(GridLengthAnimation)); 

    public GridLength To 
    { 
     get { return (GridLength)GetValue(ToProperty); } 
     set { SetValue(ToProperty, value); } 
    } 

    public static readonly DependencyProperty ToProperty = 
     DependencyProperty.Register("To", typeof(GridLength), typeof(GridLengthAnimation)); 

    public override Type TargetPropertyType 
    { 
     get { return typeof(GridLength); } 
    } 

    protected override Freezable CreateInstanceCore() 
    { 
     return new GridLengthAnimation(); 
    } 

    public override object GetCurrentValue(object defaultOriginValue, object defaultDestinationValue, AnimationClock animationClock) 
    { 
     double fromValue = this.From.Value; 
     double toValue = this.To.Value; 

     if (fromValue > toValue) 
     { 
      return new GridLength((1 - animationClock.CurrentProgress.Value) * (fromValue - toValue) + toValue, this.To.IsStar ? GridUnitType.Star : GridUnitType.Pixel); 
     } 
     else 
     { 
      return new GridLength((animationClock.CurrentProgress.Value) * (toValue - fromValue) + fromValue, this.To.IsStar ? GridUnitType.Star : GridUnitType.Pixel); 
     } 
    } 
} 

Y un guión gráfico para el RowDefinition/ColumnDefinition.

<Window.Resources> 
    <Storyboard x:Key="ColumnAnimation"> 
     <Animations:GridLengthAnimation 
      BeginTime="0:0:0" 
      Duration="0:0:0.1" 
      From="0*" 
      Storyboard.TargetName="ColumnToAnimate" 
      Storyboard.TargetProperty="Width" 
      To="10*" /> 
    </Storyboard> 

</Window.Resources> 

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="10*" /> 
     <ColumnDefinition Width="Auto" /> 
     <ColumnDefinition x:Name="ColumnToAnimate" Width="0*" /> 
    </Grid.ColumnDefinitions> 
</Grid>