P.Roger
P.Roger

Reputation: 79

Button scaled boundries(conditions)

Everyone, I tried to scale button's size, code works fine, if I click only once, but if I click multiple times the button in a row, button can't return its original size. Here is code:

 private void ButtonSearchMedication_OnClick(object sender, RoutedEventArgs e)
    {


            //Assign variation of width in term of begin, end and duration
        DoubleAnimation widthAnimation  =new DoubleAnimation(ButtonSearchMedication.ActualWidth, ButtonSearchMedication.ActualWidth*0.8, new Duration(timeSpan:TimeSpan.FromSeconds(0.2)) );

        //Assign variation of height in term of begin, end and duration
        DoubleAnimation heightAnimation = new DoubleAnimation(ButtonSearchMedication.ActualHeight,ButtonSearchMedication.ActualHeight*0.8, new Duration(timeSpan:TimeSpan.FromSeconds(0.2)));

        //Assign properties to button
        ButtonSearchMedication.BeginAnimation(Button.WidthProperty,widthAnimation);
        ButtonSearchMedication.BeginAnimation(Button.HeightProperty,heightAnimation);
    }

private void ButtonSearchMedication_OnMouseLeave(object sender, MouseEventArgs e) {

            DoubleAnimation widthAnimation = new DoubleAnimation(ButtonSearchMedication.ActualWidth, ButtonSearchMedication.ActualWidth*1.25,new Duration(timeSpan:TimeSpan.FromSeconds(0.2)));
            DoubleAnimation heightAnimation = new DoubleAnimation(ButtonSearchMedication.ActualHeight, ButtonSearchMedication.ActualHeight*1.25,new Duration(timeSpan:TimeSpan.FromSeconds(0.2)));
            ButtonSearchMedication.BeginAnimation(Button.WidthProperty,widthAnimation);
            ButtonSearchMedication.BeginAnimation(Button.HeightProperty,heightAnimation);
        }

Is there anything I can do to make sure the size of button become its original size after every MouseLeave? Thanks

Upvotes: 0

Views: 51

Answers (1)

Sinatr
Sinatr

Reputation: 22008

Mouse click/mouse leave doesn't really match. You may leave without clicking.

Anyhow to give you a start here is fixed code:

const double _width = 200;
const double _height = 100;

void ButtonSearchMedication_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    var widthAnimation = new DoubleAnimation(_width * 0.8, TimeSpan.FromSeconds(0.2));
    var heightAnimation = new DoubleAnimation(_height * 0.8, TimeSpan.FromSeconds(0.2));
    buttonSearchMedication.BeginAnimation(WidthProperty, widthAnimation);
    buttonSearchMedication.BeginAnimation(HeightProperty, heightAnimation);
}

void ButtonSearchMedication_PreviewMouseLeftButtonUp(object sender, MouseEventArgs e)
{
    var widthAnimation = new DoubleAnimation(_width, TimeSpan.FromSeconds(0.2));
    var heightAnimation = new DoubleAnimation(_height, TimeSpan.FromSeconds(0.2));
    buttonSearchMedication.BeginAnimation(WidthProperty, widthAnimation);
    buttonSearchMedication.BeginAnimation(HeightProperty, heightAnimation);
}

I decide to use mouse down/up event, you may change it to enter/leave or whatever.

As you can see the size is constant and animations are only using to parameter (this way multiple actions in case of click event will not stack). If button size is dynamic, then you will have to retrieve and store original size before starting animation, possibly by using another event (e.g. mouse enter).

Upvotes: 1

Related Questions