Skip to content

Latest commit

 

History

History
61 lines (41 loc) · 2.37 KB

styling.md

File metadata and controls

61 lines (41 loc) · 2.37 KB
title page_title description position tags slug
Styling
.NET MAUI ToggleButton Documentation - Styling
Learn how to set the border color, border thickness and other styling properties of the Telerik ToggleButton for .NET MAUI.
11
.net maui, telerik .net maui, ui for .net maui, toggle, button, microsoft .net maui
togglebutton-styling

.NET MAUI ToggleButton Styling

The ToggleButton provides a set of styling options by exposing properties for customizing its visual appearance.

Styling the ToggleButton

To style the ToggleButton, you can use the following properties:

  • Background (Brush)—Specifies the background brush of the control.
  • BorderBrush (Brush)—Specifies the border brush of the control.
  • BorderColor (Color)—Specifies the border color of the control.
  • BorderThickness (Thickness)—Specifies the border thickness of the control.
  • CornerRadius (CornerRadius)—Specifies the corner radius of the control.
  • Padding (Thickness)—Specifies the padding of the control.
  • TextColor (Color)—Specifies the color of the Label.Text created when Content is string and ContentTemplate is not set.
  • All Properties from the [Content Configuration]({%slug togglebutton-configuration%}) article can be applied through style.

Using the Styling API

The following example demonstrates how to apply implicit and explicit styles to the ToggleButton.

1. Define the buttons in XAML:

2. Define the explicit styling to the page's resources:

3. Define the implicit styling to the page's resources:

4. Add the telerik namespace:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

This is the result on WinUI:

.NET MAUI ToggleButton Styling

For a runnable example demonstrating the ToggleButton styling options, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to the ToggleButton > Styling category.

See Also

  • [Configure the ToggleButton]({%slug togglebutton-configuration%})
  • [Toggle State]({%slug togglebutton-toggle-states%})
  • [Set Visual States]({%slug togglebutton-visual-states%})
  • [Events]({%slug togglebutton-events%})
  • [Execute Command]({%slug togglebutton-command%})