CODEWITHSUNDEEP
c#wpf
Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

how Animate change ColumnDefinition width in wpf?

I need to change the width of a column by click on a button, and this change should be slow and animated.

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

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

Upvotes: 3

Views: 2682

Answers (1)

tabby
tabby

Reputation: 1918

Try this:

Xaml:

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

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

Code Behind:

  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();
  }

Upvotes: 5

Related Questions