21

我在网格中有 2 列。当我单击一个按钮时，我希望第一列从它的当前位置向左移动到 0。因此，实际上，它折叠了，我只剩下查看一个列。

4

6 回答 6

16

应该不会太难。您需要创建一个 EventTrigger，它有一个 BeginStoryboard 以网格为目标，并使用 DoubleAnimation 来缩小列宽。 此处的示例具有类似的设置。 EventTrigger 将在按钮上运行，而 DoubleAnimation 的StoryBoard.Target将指向您希望缩小的 ColumnDefinition。

好的，所以效果不太好。不能直接收缩列，但是可以设置收缩列填充(width="*")，设置Grid和非收缩列的宽度，然后收缩整个网格。这确实有效。以下示例有效：

<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>
于 2008-10-13T15:13:27.857 回答
9

您需要创建一个 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>
于 2012-09-27T20:36:12.710 回答
2

查看来自 Todd Miranda 的此视频培训链接，该链接向您展示如何为网格控件的高度设置动画。我认为您可以轻松地使其适用于您的情况。

于 2008-10-16T13:56:25.327 回答
1

您可以做的另一件事是为内容设置动画并将 Grid 设置为自动调整内容，当内容更改大小时它会顺利完成。

于 2008-10-13T17:00:50.247 回答
0

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

对于您的特殊需要，只需将第一列与 Width="Auto" 放在一起，将第二列与 * 放在一起，为第一列内的内容设置动画 - 这样就可以了。

于 2008-10-13T18:27:39.090 回答
0

我采用了 Todd Miranda 的 C# 源代码并对其进行了修改，以演示如何动画 DataGrid 列宽收缩和扩展。

这是源代码...

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

基本上，您单击 CheckBox，并且将“MinWidth”值设置为 0 的 DataGrid 列将缩小到零宽度。再次单击 CheckBox，列将动画回其原始宽度。

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

于 2010-07-09T11:16:58.953 回答