# .NET MAUI TemplatedButton Styling

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

## Styling the TemplatedButton

To style the TemplatedButton, 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](https://www.telerik.com/maui-ui/documentation/controls/templatedbutton/configuration) article can be applied through style.

The TemplatedButton uses the .NET MAUI Visual State Manager and defines a visual state group named `CommonStates` with the following visual states:

* `Normal`
* `MouseOver`
* `Pressed`
* `Disabled`

### Using the Styling API

The following example demonstrates how to apply implicit and explicit styles to the TemplatedButton using the visual states.

**1.** Define the buttons in XAML:

```XAML
<VerticalStackLayout Spacing="20" HorizontalOptions="Center">
    <telerik:RadTemplatedButton Content="Implicit Styling" />
    <telerik:RadTemplatedButton Style="{StaticResource TemplatedButtonStyle}"
                                Content="Explicit Styling" />
</VerticalStackLayout>
```

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

```XAML
<Style x:Key="TemplatedButtonStyle" TargetType="telerik:RadTemplatedButton">
    <Setter Property="Padding" Value="12, 8" />
    <Setter Property="CornerRadius" Value="12" />
    <Setter Property="FontAttributes" Value="Bold" />
    <Setter Property="TextColor" Value="#8660C5" />
    <Setter Property="VerticalTextAlignment" Value="Center" />
    <Setter Property="HorizontalTextAlignment" Value="Center" />
    <Setter Property="BorderBrush" Value="LightGray" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <Setter.Value>
            <VisualStateGroupList>
                <VisualStateGroup Name="CommonStates">
                    <VisualState Name="Normal" />
                    <VisualState Name="Focused" />
                    <VisualState Name="MouseOver">
                        <VisualState.Setters>
                            <Setter Property="Background" Value="#F2EFF9" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState Name="FocusedMouseOver">
                        <VisualState.Setters>
                            <Setter Property="Background" Value="#F2EFF9" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState Name="Pressed">
                        <VisualState.Setters>
                            <Setter Property="TextColor" Value="#998660C5" />
                            <Setter Property="Background" Value="#F2EFF9" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState Name="FocusedPressed">
                        <VisualState.Setters>
                            <Setter Property="TextColor" Value="#998660C5" />
                            <Setter Property="Background" Value="#F2EFF9" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState Name="Disabled">
                        <VisualState.Setters>
                            <Setter Property="TextColor" Value="#618660C5" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter.Value>
    </Setter>
</Style>
```

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

```XAML
<Style TargetType="telerik:RadTemplatedButton">
    <Setter Property="Padding" Value="12, 8" />
    <Setter Property="CornerRadius" Value="12" />
    <Setter Property="FontAttributes" Value="Italic" />
    <Setter Property="VerticalTextAlignment" Value="Center" />
    <Setter Property="HorizontalTextAlignment" Value="Center" />
    <Setter Property="TextColor" Value="#00897B" />
    <Setter Property="BorderBrush" Value="LightGray" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <Setter.Value>
            <VisualStateGroupList>
                <VisualStateGroup Name="CommonStates">
                    <VisualState Name="Normal" />
                    <VisualState Name="Focused" />
                    <VisualState Name="MouseOver">
                        <VisualState.Setters>
                            <Setter Property="Background" Value="#E8F5F4" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState Name="FocusedMouseOver">
                        <VisualState.Setters>
                            <Setter Property="Background" Value="#E8F5F4" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState Name="Pressed">
                        <VisualState.Setters>
                            <Setter Property="TextColor" Value="#9900897B" />
                            <Setter Property="Background" Value="#E8F5F4" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState Name="FocusedPressed">
                        <VisualState.Setters>
                            <Setter Property="TextColor" Value="#9900897B" />
                            <Setter Property="Background" Value="#E8F5F4" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState Name="Disabled">
                        <VisualState.Setters>
                            <Setter Property="TextColor" Value="#6100897B" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter.Value>
    </Setter>
</Style>
```

**4.** Add the `telerik` namespace:

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

This is the result on WinUI:

![.NET MAUI TemplatedButton Styling](https://www.telerik.com/maui-ui/documentation/assets/e2a8b90a4493f9d81e59042fd482583c/templatedbutton-styling.gif "TemplatedButton for .NET MAUI")

> For a runnable example demonstrating the TemplatedButton styling options, see the [SDKBrowser Demo Application](https://www.telerik.com/maui-ui/documentation/demos-and-sample-apps/sdkbrowser-app) and go to the **TemplatedButton > Styling** category.

## See Also

* [Configure the TemplatedButton](https://www.telerik.com/maui-ui/documentation/controls/templatedbutton/configuration)
* [Loading Button](https://www.telerik.com/maui-ui/documentation/controls/templatedbutton/loading-button)
* [Set Visual States](https://www.telerik.com/maui-ui/documentation/controls/templatedbutton/visual-states)
* [Events](https://www.telerik.com/maui-ui/documentation/controls/templatedbutton/events)
* [Execute Command](https://www.telerik.com/maui-ui/documentation/controls/templatedbutton/command)