.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.
• BackgroundColor (Color)—Specifies the background color 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 article can be applied through style.

Using the Styling API

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

1. Define the buttons in 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:

<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="PointerOver">
                        <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="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:

<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="PointerOver">
                        <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="Disabled">
                        <VisualState.Setters>
                            <Setter Property="TextColor" Value="#6100897B" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter.Value>
    </Setter>
</Style>

4. Add the telerik namespace:

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

This is the result on WinUI:

For a runnable example demonstrating the TemplatedButton styling options, see the SDKBrowser Demo Application and go to the TemplatedButton > Styling category.

See Also

• Configure the TemplatedButton
• Loading Button
• Set Visual States
• Events
• Execute Command