-
-
Notifications
You must be signed in to change notification settings - Fork 8
CustomSwitch
Ieuan Walker edited this page May 9, 2024
·
12 revisions
The best place to learn how to create a new switch is by looking at the examples.
These are the key things to know -
-
BackgroundContent
is used to set the content of the switch -
KnobContent
is used to set the content on the knob. The content on the knob is hidden/shown by utilising theIsClippedToBounds
property. So essentially, as the knob moves from one side to the other it is just revealing a different part of the content. - The
SwitchPanUpdate
is used transition from true to false, i.e. color fading etc.
Property | What it does | Extra info |
---|---|---|
IsToggled | A bool to indicate the toggled status of the switch |
Default value is false |
ToggleAnimationDuration | Used to set the duration of the toggle animation | Default value is 100 To disable the animation set the value to 0
|
HeightRequest | The Height of the switch | Default value is 0 |
WidthRequest | The width of the switch | Default value is 0 |
StrokeShape | Is of type IShape, describes the shape of the switch. Learn more on MS docs | Default is new Rectangle() |
Stroke | Stroke, of type Brush, indicates the brush used to paint the border. Learn more on MS docs | Default is Brush.Default |
StrokeThickness | Is of type double, indicates the width of the border. | Default is 0 |
BackgroundColor | The solid color of the switch | Default value is Color.Default |
Background | The background for the switch, this is of type Brush, learn more on MS docs | Default value is Brush.Default |
BackgroundContent | Sets the content of the switch. See examples for an idea how to utilise it |
Default value is null |
KnobHeight | The height of the knob on the switch | Default value is 0 |
KnobWidth | The width of the knob on the switch | Default value is 0 |
KnobBackground | The background for the knob, this is of type Brush, learn more on MS docs | Default value is Brush.Default |
KnobBackgroundColor | The solid color of the knob | Default value is Color.Default |
KnobStrokeShape | Is of type IShape, describes the shape of the knob. Learn more on MS docs | Default is new Rectangle() |
KnobStroke | Stroke, of type Brush, indicates the brush used to paint the border. Learn more on MS docs | Default is Brush.Default |
KnobStrokeThickness | Is of type double, indicates the width of the border. | Default is 0 |
KnobContent | Sets the content of the knob. See examples for an idea how to utilise it |
Default value is null |
HorizontalKnobMargin | Adds a margin to the max distance the knob can travel | Default value is 0 |
KnobLimit | Used to calculate the knob position. See examples for an idea how to utilise it |
Default value is KnobLimitEnum.Boundary |
IsEnabled | Prevents any interaction with the switch | Can update the style of the switch based on the value, you can see in the demo app how I used a data trigger to change the opacity |
IsBusy | Use to show/ hide the IsBusyContent
|
Should also be used with the IsEnabled property. Just setting IsBusy to true, doesn't prevent the user from interacting with it
|
IsBusyContent | The content used to style the IsBusy state | You can see in the demo app how I used an activity indicator. And you can see what this looks like when also used with the IsEnabled property in the PR
|
Event | What it does |
---|---|
Toggled | Triggered when the switch is toggled |
SwitchPanUpdate | Triggered when the switch is toggled or dragged. Used to handle the transition of the switch from one side to the other. See examples for an idea how to utilise it |
Command | What it does |
---|---|
ToggledCommand | Triggered when the switch is toggled |