Tengo 2 columnas en una Cuadrícula. Cuando hago clic en un botón, quiero que la primera columna para animar a la izquierda desde su posición actual a 0. Así, en efecto, se derrumba y yo me quedo solo con ver una sola columna.

InformationsquelleAutor ScottG | 2008-10-13

7 Comentarios

  1. 4

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

    • Buen video, gracias 🙂
    • El enlace parece estar muerto.
    • Microsoft decidió rediseñar muchos sitios así que un montón de enlaces que apuntan a recursos valiosos, se rompen. Título Original del artículo era «Construir una Costumbre GridLength Animación – Cliente de Windows Videos» pero por el momento no puedo encontrar en cualquier lugar.
    • web.archive.org/web/20120918224252/http://windowsclient.net/… en este archivo encontrarás el vídeo
  2. 16

    No debería ser demasiado difícil. Sería necesario crear un EventTrigger que tiene un BeginStoryboard que los objetivos de la red y utiliza un DoubleAnimation para reducir el ancho de la columna. El ejemplo aquí tiene una configuración similar. La EventTrigger iría en el botón y la DoubleAnimation del StoryBoard.Objetivo los ColumnDefinition desea reducir.

    Bueno, por lo que no funciona tan bien. No se puede reducir la columna directamente, pero se PUEDE establecer la contracción de la columna de relleno (width=»*»), establecer el ancho de la Rejilla y de la no-reducción de columna y, a continuación, reducir la cuadrícula completa. Esto hace el trabajo. 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>
  3. 6

    Usted necesita para Crear un GridLengthAnimation clase (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 para la 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>
  4. 1

    Otra cosa que puedes hacer es animar el contenido y establecer la Cuadrícula de tamaño automático de contenido que se va a hacer sin problemas como el contenido de los cambios de tamaño.

  5. 0

    Usted también puede lograr esto con GridLength de animación , ver un ejemplo aquí http://marlongrech.wordpress.com/2007/08/20/gridlength-animation/ con este enfoque se puede manipular cualquier Red.La columna o de la Cuadrícula.Tamaño de la fila.

    Para su necesidad especial acaba de poner la primera columna con Width=»Auto» y la segunda con *, animar con el contenido dentro de la primera columna que va a hacer el truco.

  6. 0

    He tomado Todd Miranda del código fuente de C# y lo ha modificado, para demostrar cómo animar DataGrid los anchos de Columna de reducción & expansión.

    Aquí está el código fuente…

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

    Básicamente, usted hace clic en una Casilla de verificación, y sea cual sea el DataGrid columnas tienen su «MinWidth» valor se establece en 0 será reducido a cero de ancho. Haga clic en la Casilla de verificación de nuevo, las columnas se anime de nuevo a sus anchuras originales.

    Este WPF de código se muestra cómo crear animaciones /storyboards en el código detrás.

Dejar respuesta

Please enter your comment!
Please enter your name here