Dans WPF, quelqu'un a-t-il animé une grille?

Question

J'ai 2 colonnes dans une grille. Lorsque je clique sur un bouton, je souhaite que la première colonne s'anime à 0 à gauche de sa position actuelle. Donc, en fait, elle s'effondre et il ne me reste plus qu'à afficher une seule colonne.

Answer 1

Découvrez le ce lien de formation vidéo de Todd Miranda qui vous montre comment animer la hauteur d'un contrôle de grille. Je pense que vous pourriez facilement le faire fonctionner pour votre cas.

Answer 2

Ne devrait pas être trop difficile. Vous devez créer un EventTrigger comportant un BeginStoryboard qui cible la grille et utilise un DoubleAnimation pour réduire la largeur de la colonne. L'exemple présenté ici est similaire. EventTrigger irait sur le bouton et StoryBoard.Target pointe vers la définition de colonne que vous souhaitez réduire.

D'accord, ça ne marche pas si bien. Vous ne pouvez pas réduire la colonne directement, mais vous POUVEZ définir la colonne de réduction sur remplissage (largeur = "*"), définir la largeur de la grille et de la colonne sans réduction, puis réduire la grille entière. Ça marche. L'exemple ci-dessous fonctionne:

<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

Vous devez créer une classe GridLengthAnimation (code à partir 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);
        }
    }
}

Et un storyboard pour 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

Une autre chose que vous pouvez faire est d’animer le contenu et de définir la grille pour qu’elle se redimensionne automatiquement en fonction du contenu, ce qu’elle fera en douceur si le contenu change de taille.

Answer 5

Vous pouvez également utiliser le contrôle Reveal de bag-o-tricks de Kevin, http://j832.com/bagotricks. /

Answer 6

Vous pouvez également y parvenir avec l'animation GridLength. Voir un exemple ici http : //marlongrech.wordpress.com/2007/08/20/gridlength-animation/ En utilisant cette approche, vous pouvez manipuler n’importe quelle taille Grid.Column ou Grid.Row donnée.

Pour vos besoins particuliers, insérez simplement la première colonne avec Width = " Auto " et ensuite avec *, animez le contenu du contenu de la première colonne, qui fera l'affaire.

Answer 7

J’ai pris le code source C # de Todd Miranda et l’ai modifié pour montrer comment animer les largeurs de colonne DataGrid shrinking & amp; en expansion.

Voici le code source ...

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

En gros, vous cliquez sur une case à cocher et les colonnes de la grille de données qui ont leur " largeur minimum " " la valeur définie sur 0 sera réduite à une largeur nulle. Cliquez à nouveau sur la case à cocher, les colonnes retrouveront leur largeur d'origine.

Ce code WPF montre également comment créer des animations / storyboards dans un code derrière.