在WPF中，有没有人动画Grid？

Question

我在网格中有2列。当我点击一个按钮时，我希望第一列从当前位置左侧动画到0。因此，实际上，它会崩溃，而我只剩下查看单个列。

Answer 1

退房this视频培训环节，从托德米兰达将告诉您如何动画网格控件的高度。 我认为你可以轻松地让它适用于你的情况。

Answer 2

不应该太难。您需要创建一个EventTrigger，该EventTrigger具有一个以网格为目标的BeginStoryboard并使用DoubleAnimation缩小列宽。 The example here has a similar setup. EventTrigger将继续按钮，DoubleAnimation的StoryBoard.Target将指向您希望缩小的ColumnDefinition。

好吧，这样做效果不好。您不能直接缩小列，但可以将缩小列设置为填充（width =“*”），设置网格和非缩小列的宽度，然后缩小整个网格。这确实有用。下面的示例工作：

<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

你可以做的另一件事是动画内容，并设置网格，以自动调整到内容，它会顺利执行的内容改变大小。

Answer 4

您也可以使用GridLength动画实现此功能，请参阅此处的示例http://marlongrech.wordpress.com/2007/08/20/gridlength-animation/使用此方法可以操纵任何给定的Grid.Column或Grid.Row大小。

为了您的特殊需要，只需在Width =“Auto”中放置第一列，然后在第二列中添加*，为第一列中的内容设置动画效果。

Answer 5

您还可以使用从凯文的袋邻花样显示控制，http://j832.com/bagotricks/

Answer 6

我已经采取了托德米兰达的C＃源代码并对其进行了修改，以演示如何动画化DataGrid列宽度的缩小&的扩展。

这里的源代码

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

基本上，你点击一个复选框，并取其DataGrid中列有他们的“MinWidth”值设置为0将被缩小到零宽度。再次单击复选框，这些列将回到原始宽度。

此WPF代码还演示了如何在代码后面创建动画/故事板。

Answer 7

你需要创建一个GridLengthAnimation类（从代码中：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); 
     } 
    } 
} 

而对于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>