In WPF, qualcuno ha animato una griglia?

Question

Ho 2 colonne in una griglia. Quando faccio clic su un pulsante, voglio che la prima colonna si animi a sinistra dalla posizione corrente a 0. Quindi, in effetti, collassa e mi rimane solo la visualizzazione di una singola colonna.

Answer 1

Dai un'occhiata a questo link di formazione video, da Todd Miranda che ti mostra come animare l'altezza di un controllo griglia. Penso che potresti facilmente farlo funzionare per il tuo caso.

Answer 2

Non dovrebbe essere troppo difficile. Dovresti creare un EventTrigger con BeginStoryboard destinato alla griglia e utilizzare DoubleAnimation per ridurre la larghezza della colonna. L'esempio qui ha una configurazione simile. EventTrigger andrebbe sul pulsante e il StoryBoard.Target indica la definizione di colonna che desideri ridurre.

Va ??bene, quindi non funziona così bene. Non puoi ridurre direttamente la colonna, ma PUOI impostare la colonna di riduzione su riempimento (larghezza = " * "), impostare la larghezza della griglia e la colonna non restringente, quindi ridurre la griglia intera. Questo funziona. L'esempio seguente funziona:

<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

Devi creare una classe GridLengthAnimation (codice da: 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);
        }
    }
}

E uno storyboard per 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

Un'altra cosa che puoi fare è animare i contenuti e impostare la Griglia in modo che si ridimensioni automaticamente sul contenuto, cosa che farà senza intoppi man mano che il contenuto cambia dimensione.

Answer 5

Puoi anche usare il controllo Reveal dai bag-o-tricks di Kevin, http://j832.com/bagotricks /

Answer 6

Puoi farlo anche con l'animazione GridLength, vedi un esempio qui http : //marlongrech.wordpress.com/2007/08/20/gridlength-animation/ Usando questo approccio puoi manipolare qualsiasi dimensione Grid.Column o Grid.Row.

Per le tue esigenze speciali, inserisci la prima colonna con Larghezza = " Auto " e secondo con *, animare il con del contenuto all'interno della prima colonna, che farà il trucco.

Answer 7

Ho preso il codice sorgente C # di Todd Miranda e l'ho modificato, per dimostrare come animare la larghezza della colonna DataGrid che si restringe & amp; espansione.

Ecco il codice sorgente ...

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

Fondamentalmente, fai clic su un CheckBox e qualsiasi colonna DataGrid ha la sua " MinWidth " il valore impostato su 0 verrà ridotto a larghezza zero. Fai di nuovo clic su CheckBox, le colonne torneranno alle loro larghezze originali.

Questo codice WPF dimostra anche come creare animazioni / storyboard nel codice sottostante.