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 anime a la izquierda desde su posición actual a 0. Entonces, en efecto, se colapsa y solo me queda ver una sola columna.

Answer 1

Consulte este enlace de capacitación en video, de Todd Miranda que le muestra cómo animar la altura de un control de cuadrícula. Creo que fácilmente podría hacer que funcione para su caso.

Answer 2

No debería ser demasiado difícil. Debería crear un EventTrigger que tenga un BeginStoryboard que apunte a la cuadrícula y use una doble animación para reducir el ancho de la columna. El ejemplo aquí tiene una configuración similar. EventTrigger iría al botón y DoubleAnimation's StoryBoard.Target apuntaría a la ColumnDefinition que desea reducir.

Bien, eso no funciona tan bien. No puede reducir la columna directamente, pero PUEDE configurar la columna de contracción para que se llene (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

Necesita 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 Storyboard para 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>

Answer 4

Otra cosa que puede hacer es animar el contenido y configurar la cuadrícula para que se ajuste automáticamente al contenido, lo que hará sin problemas a medida que el contenido cambie de tamaño.

Answer 5

También puede usar el control Reveal de los trucos de bolsa de Kevin, http://j832.com/bagotricks /

Answer 6

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

Para su necesidad especial, simplemente coloque la primera columna con Width = " Auto " y segundo con *, animar con el contenido dentro de la primera columna, eso hará el truco.

Answer 7

Tomé el código fuente C # de Todd Miranda y lo modifiqué, para demostrar cómo animar los anchos de columna de DataGrid encogiéndose & amp; expandiéndose.

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

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

Básicamente, hace clic en un CheckBox y las columnas de DataGrid tienen su "MinWidth" el valor establecido en 0 se reducirá a ancho cero. Haga clic en CheckBox nuevamente, las columnas se animarán a sus anchos originales.

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