Em WPF, ninguém tem animado um Grid?
Pergunta
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.
Solução
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.
Outras dicas
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>
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>
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.
Você também pode usar o controle de saco-o-truques de Kevin Revelar, http://j832.com/bagotricks /
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.
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.