.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.

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

• Normal
• PointerOver
• 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:

<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