New to Telerik UI for .NET MAUI? Start a free 30-day trial

.NET MAUI TemplatedButton Visual States

The TemplatedButton provides the following CommonStates visual states:

Visual States Description
Normal Applies when the button is in normal state.
Pressed Applies when the button is pressed.
PointerOver (Desktop-only) Applies when the mouse pointer hovers over the control.
Disabled Applies when the button is disabled.

Using the Visual States

The following example demonstrates how to use the TemplatedButton visual states.

1. Define the TemplatedButton in XAML:

<VerticalStackLayout Spacing="20" HorizontalOptions="Center">
    <HorizontalStackLayout Spacing="5">
        <telerik:RadCheckBox x:Name="checkBox"
                             IsChecked="True"
                             IsThreeState="False"
                             CheckedSymbolColor="White"
                             CheckedColor="#00897B" />
        <Label Text="IsEnabled?"
               VerticalTextAlignment="Center"
               telerik:RadCheckBox.ToggleOnTap="{x:Reference checkBox}" />
    </HorizontalStackLayout>
    <telerik:RadTemplatedButton IsEnabled="{Binding IsChecked, Source={x:Reference checkBox}}"
                                Content="TemplatedButton"
                                Style="{StaticResource CustomButtonStyle}" />
</VerticalStackLayout>

2. Define the visual states in the page's resources:

<Style x:Key="CustomButtonStyle" TargetType="telerik:RadTemplatedButton">
    <Setter Property="TextColor" Value="#00897B" />
    <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>

3. Add the telerik namespace:

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

This is the result on WinUI:

.NET MAUI TemplatedButton Visual States

For a runnable example demonstrating the TemplatedButton visual states, see the SDKBrowser Demo Application and go to the TemplatedButton > Features category.

See Also

In this article