Toggle Button Styles

Davipb edited this page Sep 13, 2015 · 1 revision

All examples use Deep Purple as the Primary Color and Lime as the Secondary/Accent color. Icon is the 'Battery 50' material icon.

To use any of these styles, just insert the following setting to your toggle button's tag:

Style="{DynamicResource STYLE_NAME}"

Where STYLE_NAME is the name of the style you want to add.

MaterialDesignActionToggleButton

Uses the Primary Mid color scheme.

MaterialDesignActionToggleButton

MaterialDesignActionLightToggleButton

This variant changes the color scheme to Primary Light.

MaterialDesignActionLightToggleButton

MaterialDesignActionDarkToggleButton

This variant changes the color scheme to Primary Dark.

MaterialDesignActionDarkToggleButton

MaterialDesignActionAccentToggleButton

This variant changes the color scheme to Accent.

MaterialDesignActionAccentToggleButton

MaterialDesignFlatToggleButton

MaterialDesignFlatToggleButton

MaterialDesignFlatPrimaryToggleButton

This variant uses the Primary Mid Background color, instead of the default grey one.

MaterialDesignFlatPrimaryToggleButton

MaterialDesignSwitchToggleButton

Uses the Primary Mid color scheme.

Note: This style completly ignores the toggle button's Content.

MaterialDesignSwitchToggleButton

MaterialDesignHamburgerToggleButton

Note: This style completly ignores the toggle button's Content.

MaterialDesignHamburgerToggleButton