在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>