A switch class is a toggle control allowing the user to select a status of ON or OFF.

It is an alternative to checkbox but is more commonly used in mobile apps.

To use this component, install the Zebble.Switch nuget package. 
It's open source and available on GitHub. Also we welcome any contributions to enhace it.

Basic usage:

<Switch Id="MySwitch" Checked="true"></Switch>new Switch { Id = "MySwitch", Checked = true };

Checked changed:

Like CheckBox, if you want to control what happens when a user toggles a switch you can use CheckedChanged action.

MySwitch.CheckedChanged += CheckChange;

private void CheckChange() {/* Do something here. */}

 

Checked

You can set the value of Switch by changing Checked property. The default value is false.

Enabled & Ignored

Stylesheet has a boolean property named Ignored, which is false by default. When set to true it works the same as "display: none" in HTML. It means that the element will not only be invisible, but also it won't occupy space on the screen.

View has a boolean property named Enabled, which is true by default. When set to false the object will not respond to UI gesture events. But it will remain visible. Also, its PseudoCssState will be set to "disabled" which allows you to specify a visual style for it in CSS.

If you set the Enabled property of Switch to false, the user can not change the value of it.

 

Rotation

You can see some information about rotation in  Zebble here: http://zebble.net/docs/rotation-in-zebble

  <Switch Checked="true"  Style.Border="1"  ></Switch>

 

Sample 1:

<Switch Checked="true"  Style.Border="1" RotationX ="48" ></Switch>

 

 

 

Sample 2:

<Switch Checked="true"  Style.Border="1" RotationY="38"></Switch>

 

 

Margin & Padding

You can see some information about Margin & Padding in Zebble here: http://zebble.net/docs/margin-padding

Radious

<Switch Checked="true"   BackgroundImagePath="Images/VS.jpg" Style.Border="2" Style.Border.Radius="5"
Style.BoxShadow.Color ="red" Style.BoxShadow.BlurRadius="15" Style.BoxShadow.XOffset="5" Style.BoxShadow.YOffset="5"  />

Checked image:

You can use CheckedImage field to set an image for the checked state, like the following:

MySwitch..CheckedImage = new ImageView { Path = "Images/Something.png" };

Checked changed:

The main event for a Switch is CheckedChanged. In this method you should define what you want to do when user checks/unchecks the Switch control.

MySwitch.CheckedChanged += CheckedChange;

void CheckedChange() { /* Do something here */ }

Switch Events

• on-CheckedChanged: Raised when the value of Switch changed.
• on-Flashed: Raised when the Switch is flashed.
• on-Initialized: Raised when the Switch object is created and rendered.
• on-Initializing: Raised when the Switch object is being created and rendered.
• on-LongPressed: Raised when user clicked on the Switch for a long time.
• on-PanFinished: Raised when user panned on the Switch.
• on-Panning: Raised when user starts to pan on the Switch.
• on-PreRendered: Raised when the Switch object is not started to rendered before rendering.
• on-Swiped: Raised when user swiped on the Switch.
• on-Tapped: Raised when user tapped on the Switch.