ToggleSwitch Visual Update

[karkarl]

Description

ToggleSwitch visual updates + animation

How Has This Been Tested?

Visual Verification

[karkarl]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[mdtauk]

Are you particularly keen on using the stretched Oval shape for Pressed states?

The curves being stretched create a visual mis-match with the outer containing shapes, which could be alleviated by using a rounded rectangle in a pill shape to match the outer shape.

[karkarl]

Are you particularly keen on using the stretched Oval shape for Pressed states?

The curves being stretched create a visual mis-match with the outer containing shapes, which could be alleviated by using a rounded rectangle in a pill shape to match the outer shape.

I updated the xaml to use <Rectangle> with RadiusX and RadiusY much like the outer pill, and this was the closest I got to the pill shape. Would you happen to know how to better tweak this?

[marcelwgn]

I updated the xaml to use with RadiusX and RadiusY much like the outer pill, and this was the closest I got to the pill shape. Would you happen to know how to better tweak this?

Maybe using an SVG for this would be better? SVG was also the way how I was able to get the inset corner radii for TabView.

[mdtauk]

I updated the xaml to use with RadiusX and RadiusY much like the outer pill, and this was the closest I got to the pill shape. Would you happen to know how to better tweak this?

Maybe using an SVG for this would be better? SVG was also the way how I was able to get the inset corner radii for TabView.

An SVG would not work, as what you need is to be able to increase the width of the shape, without changing the rounded corners.

In my example I have the rounded rectangle at 14px height, with 7px corner radius - and I increased the width to 19px with the same 7px corners.

The Rectangle should give you the right shape, but I am wondering it the keyframe animation is distorting the shape as the width changes.

Looking at the Xaml, the fact you are scaling is probably it, rather than animating the width value.

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)">
    <!-- 1.42 is relative scale from 12px to 17px -->
    <SplineDoubleKeyFrame KeyTime="0:0:0.25" KeySpline="0.0,0.0 0.0,1.0" Value="1.42" />
</DoubleAnimationUsingKeyFrames>

You can do the same shape with a Border control, with Background and CornerRadius values. That may animate differently.

Rectangle in Green - Border in Blue

Also, the Pressed animation should probably anchor to the left or right, depending on whether the control is ON or OFF. So it expands from the edge, rather than scaling from the middle of the Thumb. That works fine when used in the PointerOver state, and works well as it is a Circle at that point.

[mdtauk]

A motion mockup

ToggleSwitch.Motion.mp4

[karkarl]

Looking at the Xaml, the fact you are scaling is probably it, rather than animating the width value.

@mdtauk I opted to use ScaleX and Y transformations to not make it an independent animation out of concerns for performance. But you're right, it looks WAY better, so may be a worthwhile compromise.

[karkarl]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[ranjeshj]

@karenbtlai can you merge with latest? That should fix the build failure.

[karkarl]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[karkarl]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[ranjeshj]

Please move this into master branch.

[teaP]

Wondering if this number can be defined an x:double somewhere else? (Same with 14 and 17 below.) -- in case it's related to other sizes.

[mdtauk]

Wondering if this number can be defined an x:double somewhere else? (Same with 14 and 17 below.) -- in case it's related to other sizes.

You could, but the ToggleSwitch is a pretty unique control design, and it does not support resizing like other controls, so it would not be changed commonly. So making them generalised resources, would not be super helpful.

Having said that, if the Thumb's size at rest is changeable with lightweight styling, the PointerOver, Pressed, and Disabled sizes could be added. But they would still be something like:
ToggleSwitchKnobDefaultSize
ToggleSwitchKnobPointerOverSize
ToggleSwitchKnobPressedSize
ToggleSwitchKnobDisabledSize

You would want to do the same with the SliderThumbSizes, and the RadioButtonCheckMarkSize etc

[karkarl]

The 12px and 14px sizes are the same as RadioButtons and SliderThumbs. That also poses the question whether that should those be a shared resource?

[mdtauk]

The 12px and 14px sizes are the same as RadioButtons and SliderThumbs. That also poses the question whether that should those be a shared resource?

In that case, you could have a generalised value with the pixel sizes - but then use Lightweight styles for the controls, which reference those generalised values.

This would allow developers an easy way to modify the controls, if say they wanted to have the Slider Thumb parts be larger.

It is a little more complicated with some animations as you are putting in scale factors, rather than discreet values.

[karkarl]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).