Animate如何在wpf中更改ColumnDefinition的宽度?

时间:2017-08-09 09:11:29

标签: c# wpf

我需要通过点击一个按钮来更改列的宽度,这个更改应该很慢并且是动画的。

  <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" x:Name="Col1"/>
            <ColumnDefinition Width="2*" />
        </Grid.ColumnDefinitions>

        <Button >change Width Col1</Button>
  </Grid>

1 个答案:

答案 0 :(得分:2)

试试这个:

<强>的Xaml:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" x:Name="Col1"/>
        <ColumnDefinition Width="2*" />
    </Grid.ColumnDefinitions>

    <Button Click="Button_Click">change Width Col1</Button>
</Grid>

代码背后:

  private void Button_Click(object sender, RoutedEventArgs e)
  {
        Storyboard storyboard = new Storyboard();

        Duration duration = new Duration(TimeSpan.FromMilliseconds(2000));
        CubicEase ease = new CubicEase { EasingMode = EasingMode.EaseOut };

        DoubleAnimation animation = new DoubleAnimation();
        animation.EasingFunction = ease;
        animation.Duration = duration;
        storyboard.Children.Add(animation);
        animation.From = 1000;
        animation.To = 0;            
        Storyboard.SetTarget(animation, Col1);
        Storyboard.SetTargetProperty(animation, new PropertyPath("(ColumnDefinition.MaxWidth)"));

        storyboard.Begin();
  }