Em WPF, ninguém tem animado um Grid?

Question

Eu tenho 2 colunas em uma Grid. Quando eu clicar em um botão, eu quero que a primeira coluna para animar para a esquerda de sua posição atual para 0. Então, na verdade, ele entra em colapso e eu estou à esquerda com apenas a visualização de uma única coluna.

Answer 1

Confira este link formação de vídeo , de Todd Miranda que lhe mostra como animar a altura de um controle de grade. Eu acho que você poderia facilmente fazê-lo funcionar para o seu caso.

Answer 2

não deve ser muito difícil. Você precisaria criar um EventTrigger que tem um BeginStoryboard que as metas da rede e utiliza um DoubleAnimation a diminuir a largura da coluna. O exemplo aqui tem uma configuração similar. o EventTrigger iria sobre o botão e StoryBoard.Target apontaria para o ColumnDefinition você deseja encolher.

A aprovação, assim que não funciona tão bem. Você não pode encolher a coluna diretamente, mas você pode definir a coluna encolhendo para preenchimento (width = "*"), definir a largura da grade e coluna não-encolhendo, e então encolher toda a grade. Isso não funciona. A seguir exemplo 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

Você precisa criar uma classe GridLengthAnimation (código: 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 um Storyboard para o 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

Outra coisa que você pode fazer é animar o conteúdo e definir o Grid para dimensionamento automático para o conteúdo que ele vai fazer bem quanto o conteúdo muda de tamanho.

Answer 5

Você também pode usar o controle de saco-o-truques de Kevin Revelar, http://j832.com/bagotricks /

Answer 6

Você também pode conseguir isso com animação GridLength, veja um exemplo aqui http : //marlongrech.wordpress.com/2007/08/20/gridlength-animation/ Usando essa abordagem, você pode manipular qualquer Grid.Column ou Grid.Row tamanho.

Para a sua necessidade especial só colocar primeira coluna com width = "Auto" eo segundo com *, animar o com o conteúdo dentro da primeira Coluna que irá fazer o truque.

Answer 7

Tomei código C # fonte de Todd Miranda e modificado, para demonstrar como animar larguras da coluna DataGrid encolhendo e se expandindo.

Aqui está o código fonte ...

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

Basicamente, você clica em um CheckBox, e qualquer colunas DataGrid têm o seu valor definido "MinWidth" para 0 vai ser reduzido a zero de largura. Clique na caixa novamente, as colunas vão animar volta para suas larguras originais.

Este código WPF também demonstra como criar animações / storyboards em por trás do código.