En WPF, ¿alguien ha animado una Grilla?

backgroundworker wpf

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

Necesita crear una clase GridLengthAnimation (código de: this )

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 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. El ejemplo aquí tiene una configuración similar. Event Trigger irá al botón y StoryBoard.Target de StoryBoard.Target a ColumnDefinition que desea reducir.

De acuerdo, 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 puedes hacer es animar los contenidos y configurar la Grilla para que se autoejecuten a un contenido que funcionará sin problemas a medida que el contenido cambie de tamaño.

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/ Con este enfoque, puede manipular cualquier Grid.Column o Grid.Row dado.

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

Answer 5

También puede usar el control Reveal de los bag-o-tricks de Kevin, http://j832.com/bagotricks/

Answer 6

Tomé el código fuente de C # de Todd Miranda y lo modifiqué para demostrar cómo se angostan y expanden los anchos de columna DataGrid.

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

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

Básicamente, hace clic en un CheckBox y cualquiera de las columnas de DataGrid cuyo valor de "MinWidth" se establezca en 0 se reducirá a cero. 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 demuestra cómo crear animaciones / guiones gráficos en el código subyacente.

Answer 7

Vea this 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 podrías hacer que funcione para tu caso.