Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Add ScaleX and ScaleY properties

JensDemeyJensDemey USMember ✭✭
edited December 2016 in Xamarin.Forms

Summary

Currently developers are able to adjust the Scale of a VisualElement. However there is no way to set the X and Y scale individually.

API Changes

In addition to the Scale property on the VisualElement class there would be a ScaleX and ScaleY property.

var image = new Image();
image.ScaleX= 0.4;
image.ScaleY= 0.6;

The Scale currently seems to be set in the VisualElementTracker class (where it sets the ScaleX and ScaleY equal to the global Scale).

Additionally these properties can also be animated the same way that the current Scale property can be animated via RelScaleTo and ScaleTo.
await image.RelScaleXTo(0.4);

I suppose that it would make the most sense if setting the Scale would also update the ScaleX and ScaleY properties. However, setting the ScaleX or Y properties should not influence the Scale property.

Intended Use Case

It's already possible play around with the rotation and global scale, but I would like to use these additional properties to spice up the animations for my images.

Tagged:

In Progress · Last Updated

Assigned to Xamarin.Forms team to implement. https://github.com/xamarin/Xamarin.Forms/pull/746

Posts

  • StephaneDelcroixStephaneDelcroix USInsider, Beta ✭✭✭✭

    if this is supported on all platforms (please check), I don't see any reason not to do this one

  • JensDemeyJensDemey USMember ✭✭
    edited December 2016

    Looking at the platform specific code it seems like they are all supported.

    iOS currently uses:

    • transform.scale(scale);

    This one has an overload to set x, y (and z);

    Android uses:

    • aview.ScaleX = (float)view.Scale;
    • aview.ScaleY = (float)view.Scale;

    Windows

    • frameworkElement.RenderTransform = new ScaleTransform { ScaleX = scale, ScaleY = scale };
  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    This should be done by having final ScaleX and ScaleY be computed as

    finalScaleX = view.Scale * view.ScaleX;
    finalScaleY = view.Scale * view.ScaleY;

    This way the Scale property remains relevant and correct. Other than that, I really like this proposal.

  • MichaelRumplerMichaelRumpler ATMember ✭✭✭✭✭

    If you scale and rotate (and translate) an Element, in which order do they work?

    E.g. if you set ScaleX to 0.2, ScaleY to 1.5 and Rotation to 45°, does it first scale and then rotate or vice versa? The result is very different.

    These are all bindable properties, so the order of changing them should not matter. But does the user have the option to first rotate and then scale x/y? How?

  • JensDemeyJensDemey USMember ✭✭
    edited January 2017

    @MichaelRumpler
    They should all work independently and have no effect on eachother. Otherwise you would get some weird results.

    Simply imagine a square that has been scaled into a rectangle.
    Applying an animation to rotate it 360° over 1 second should not be altering it's shape whatsoever. I think it would be really unexpected if it did.

  • JeffLewisJeffLewis USMember ✭✭

    Why is this not done by attaching a Transform object to the image? That's the standard way to do this throughout WPF...

    image.RenderTransform = new ScaleTransform(.5, .5);

    And yes, I know Forms isn't WPF.. but unless the explicit goal is to avoid doing anything the same way WPF does it (which it a bit late anyway given what's in Forms now), then why not stick to existing standards?

  • JeffLewisJeffLewis USMember ✭✭

    @MichaelRumpler said:
    If you scale and rotate (and translate) an Element, in which order do they work?

    E.g. if you set ScaleX to 0.2, ScaleY to 1.5 and Rotation to 45°, does it first scale and then rotate or vice versa? The result is very different.

    These are all bindable properties, so the order of changing them should not matter. But does the user have the option to first rotate and then scale x/y? How?

    This isn't a programming issue - it's a math issue. Transforms are essentially matrices and matrix math isn't always commutable - ie A X B doesn't usually give the same result as B X A. So the order you do the transforms IS important and can't be arbitrarily rearranged.

    So (switching to WPF for a second)

    var tgrp = new TransformGroup();
    tgrp.Add(new ScaleTransform(.25, .75));
    tgrp.Add(new RotateTransform(37));

    image.RenderTransform = tgrp; // a rectangle rotated 37 degrees

    and

    var tgrp = new TransformGroup();
    tgrp.Add(new RotateTransform(37));
    tgrp.Add(new ScaleTransform(.25, .75));

    image.RenderTransform = tgrp; // a rotated. squashed parallelogram (like an old school eraser)

    Will give very different outputs.

  • JensDemeyJensDemey USMember ✭✭

    @StephaneDelcroix
    I've noticed that you have been working on this. However the changes have been reverted earlier this month.
    Did you run into any unforeseen problems?

  • StephaneDelcroixStephaneDelcroix USInsider, Beta ✭✭✭✭

    @JensDemey: I accidentally pushed to master, that's why I had to revert. there's PR for this ready, only missing rebuilding the AndroidNative project

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Any movement on this? Months ago @StephaneDelcroix said it was ready to go. I'd love to be able to set ScaleX and ScaleY in my XAML.

  • StephaneDelcroixStephaneDelcroix USInsider, Beta ✭✭✭✭
  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭
    edited November 2017

    @StephaneDelcroix
    Okay... Any idea when, if ever, it might go into a stable release? Something this handy and 'every day need' sitting for 9 months is a real shame.

  • SteveShaw.5557SteveShaw.5557 USMember ✭✭✭
    edited June 2018

    @StephaneDelcroix - almost a year since you merged that, and I see that a month ago you deleted BranchXY. Does this mean it is in a pre-release branch? (I checked latest stable. 3.0.0.561731, no ScaleX or ScaleY.)

    I'm specifically hoping I can use a scale (X or Y) of "-1" to flip (horizontal or vertical).

  • JFMGJFMG DEMember ✭✭

    This is how I scale the width property of an element (TimeBar is a simple BoxView in my code behind):

    TimeBar.Animate("TimeBarAnimation", new Animation(scaleXTo => TimeBar.WidthRequest = scaleXTo, TimeBar.Width, 0), 16, 1000);
    
Sign In or Register to comment.