Bug 31562 - Switch vertical alignment is broken on iOS
Summary: Switch vertical alignment is broken on iOS
Alias: None
Product: Forms
Classification: Xamarin
Component: Forms ()
Version: 1.4.3
Hardware: All All
: Normal normal
Target Milestone: ---
Assignee: Bugzilla
Depends on:
Reported: 2015-07-01 22:35 UTC by david
Modified: 2015-07-22 04:37 UTC (History)
5 users (show)

Is this bug a regression?: ---
Last known good build:

Repro project (192.61 KB, application/zip)
2015-07-01 22:35 UTC, david

Notice (2018-05-24): bugzilla.xamarin.com is now in read-only mode.

Please join us on Visual Studio Developer Community and in the Xamarin and Mono organizations on GitHub to continue tracking issues. Bugzilla will remain available for reference in read-only mode. We will continue to work on open Bugzilla bugs, copy them to the new locations as needed for follow-up, and add the new items under Related Links.

Our sincere thanks to everyone who has contributed on this bug tracker over the years. Thanks also for your understanding as we make these adjustments and improvements for the future.

Please create a new report on Developer Community or GitHub with your current version information, steps to reproduce, and relevant error messages or log files if you are hitting an issue that looks similar to this resolved bug and you do not yet see a matching new report.

Related Links:

Description david 2015-07-01 22:35:07 UTC
Created attachment 11814 [details]
Repro project

Please see the enclosed project for details.

There are actually two bugs here.

1. On iOS the VerticalOptions isn't being observed for the Switch control. Page 2 of the repro project demonstrates this.

2. On both iOS and Android, there is supposed to be a red BoxView underneath the Switch, with exactly the same height as the green BoxView above the Switch. I started to try this solution as a poor man's VerticalOptions work-around by plugging a BoxView of the right size at top and bottom of the switch, but the bottom BoxView isn't rendered and so the Switch is aligned below the centre of the containing StackLayout. See Page 1 of the project for the evidence.
Comment 1 Rajneesh Kumar 2015-07-02 06:36:20 UTC
I have checked this issue and able to reproduce the first reported behaviour as mentioned in the bug description, but I am not able to reproduce the second one.

Screencast: http://www.screencast.com/t/yNITZSvWvQs

I observed that On iOS the VerticalOptions isn't being observed for the Switch control, but I am not able see a red BoxView underneath the Switch control. Please let me know that what I am missing to reproduce this issue, that would be very helpful to reproduce this issue at our end.


Ide Logs: https://gist.github.com/Rajneesh360Logica/f05fce98384475197ea9
Application Output: https://gist.github.com/Rajneesh360Logica/6268afe69c4d35f8d637
Build Output: https://gist.github.com/Rajneesh360Logica/c59389e77bef5b1cfe47
Simulator Logs: https://gist.github.com/Rajneesh360Logica/30f0a75a622718925491

=== Xamarin Studio ===

Version 5.9.4 (build 5)
Installation UUID: 011d70a5-dede-428b-ab04-ef451c2e539d
	Mono 4.0.2 ((detached/c99aa0c)
	GTK+ 2.24.23 (Raleigh theme)

	Package version: 400020005

=== Xamarin.Android ===

Version: (Business Edition)
Android SDK: /Users/MM/Desktop/android-sdk-macosx
	Supported Android versions:
		2.3    (API level 10)
		4.0.3  (API level 15)
		4.1    (API level 16)
		4.2    (API level 17)
		4.3    (API level 18)
		4.4    (API level 19)
		4.4.87 (API level 20)
		5.0    (API level 21)
Java SDK: /usr
java version "1.7.0_65"
Java(TM) SE Runtime Environment (build 1.7.0_65-b17)
Java HotSpot(TM) 64-Bit Server VM (build 24.65-b04, mixed mode)

=== Xamarin Android Player ===

Version: Unknown version
Location: /Applications/Xamarin Android Player.app

=== Apple Developer Tools ===

Xcode 6.2 (6776)
Build 6C131e

=== Xamarin.iOS ===

Version: (Business Edition)
Hash: ff5adaa
Branch: master
Build date: 2015-06-30 11:17:03-0400

=== Xamarin.Mac ===

Version: (Business Edition)

=== Build Information ===

Release ID: 509040005
Git revision: 8010a90f6e246b32364e3fb46ef2c9d1be9c9a2b
Build date: 2015-06-08 16:52:06-04
Xamarin addins: 7e93e9c3503f28770f23ce1b7eafd829919f18e8

=== Operating System ===

Mac OS X 10.9.5
Darwin MacMini.local 13.4.0 Darwin Kernel Version 13.4.0
    Sun Aug 17 19:50:11 PDT 2014
    root:xnu-2422.115.4~1/RELEASE_X86_64 x86_64
Comment 2 david 2015-07-02 09:58:50 UTC
The bug is that the red box is supposed to appear, but doesn't. In other words, you seem to have reproduced the second issue as well.
Comment 3 Rajneesh Kumar 2015-07-02 10:54:32 UTC
Oh...!@David it was may silly mis understanding.

I observed that :- 
1. On iOS the VerticalOptions isn't being observed for the Switch control.
2. On iOS and Android both, I am not able see a red BoxView underneath the Switch control.

Hence I am changing its status to CONFIRMED.

Comment 4 Stephane Delcroix 2015-07-22 04:14:43 UTC
Could you please, next time, report a single bug per bugzilla issue ? it makes things very hard to track, and harder to solve. Thanks a lot.

About the second issue (the Red Box):
the parent HeightRequest is 60 (on iOS). Green box is 5, switch is 50, Red box is 5 again. Add the StackLayout spacing to this, and you get 72 (2*5 + 50 + 2*6). That means the Red box is clipped.


Set the StackLayout.Spacing to 0, and you'll see the Red box.
Comment 5 Stephane Delcroix 2015-07-22 04:37:18 UTC
About the fist issue, the alignment is correct.

You're asking a height request of 50 for the switch, and that box of 50px is correctly centered inside the 60px container.
What you're observing is the native iOS control can not take all that space, but only 30-ish pixels, and place itself on the top right. The VerticalOptions is not meant to changed that.
Some controls, like Label, have a XAlign and YAlign to position the label itself inside lf it's bounds; but the Switch doesn't have such option.
The fix for this is trivial: remove the HeightRequest on the switch, and it'll be centered according to your wishes.
If you really want centering AND a HeightRequest for the Switch, wrap the Switch in a ContentView, and set the HeightRequest on the ContentView, and Center the switch inside of the ContentView, but this is not required in your sample.