CODEWITHSUNDEEP
wpfpropertiestransformtransitionsmoothing
Ivan
Ivan

Reputation: 173

A smooth transition from the old to the new values in WPF

In the window is a rectangle with some size, I need to set a new size for the rectangle gradually changed its old size to the new. Or, for example, have to turn the rectangle that was it smooth. How to do it?

Edit

I guess I'm not well expressed. For example, I have a rectangle with dimensions of 200 by 300. I was trying to it new dimensions: 400 by 200, I wish he did not quickly apply the new and smoothly animated hit target values.

How is this done in WPF, I think maybe?

Upvotes: 0

Views: 835

Answers (2)

Wanderer
Wanderer

Reputation: 329

Old question but I had same question and found solution.

I think it is not possible do it with xaml, only in code.

using System.Windows.Media.Animation; // this is needed for use DoubleAnimation in code

...

private void ResizeRectangle(double width, double height)
{
    // Height
    DoubleAnimation a = new DoubleAnimation();
    a.From = MyRectangle.ActualHeight; // animation start with actual height
    a.To = height; // desired height
    a.Duration = new Duration(TimeSpan.FromSeconds(1)); // duration for From to To (you can use miliseconds), this make smooth transition from the old to the new values
    a.FillBehavior = FillBehavior.Stop; // FillBehavior should be stop, if you want do another size changes
    MyRectangle.BeginAnimation(Rectangle.HeightProperty, a);  // set up animation for MyRectangle

    MyRectangle.Height = height; // don't forget change size for rectangle, because FillBehavior.Stop stop animation and it set back to actual size

    // Width
    DoubleAnimation b = new DoubleAnimation();
    b.From = MyRectangle.ActualWidth;
    b.To = width;
    b.Duration = new Duration(TimeSpan.FromSeconds(1));
    b.FillBehavior = FillBehavior.Stop;
    MyRectangle.BeginAnimation(Rectangle.WidthProperty, b);

    MyRectangle.Width = width;
}

Upvotes: 2

paparazzo
paparazzo

Reputation: 45096

Don't know what you mean by turn the rectangle that was it smooth.

StoryBoard. This sample even shows resizing a rectangle

Storyboards Overview

  <StackPanel Margin="20">
            <Rectangle Name="MyRectangle"
      Width="100"
      Height="100">
                <Rectangle.Fill>
                    <SolidColorBrush x:Name="MySolidColorBrush" Color="Blue" />
                </Rectangle.Fill>
                <Rectangle.Triggers>
                    <EventTrigger RoutedEvent="Rectangle.MouseEnter">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation 
                Storyboard.TargetName="MyRectangle"
                Storyboard.TargetProperty="Width"
                From="100" To="200" Duration="0:0:1" />

                                <ColorAnimation 
                Storyboard.TargetName="MySolidColorBrush"
                Storyboard.TargetProperty="Color"
                From="Blue" To="Red" Duration="0:0:1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Rectangle.Triggers>
            </Rectangle>
        </StackPanel>

Upvotes: 0

Related Questions