.NET MAUI SpeechToTextButton Visual States

The SpeechToTextButton control provides visual states that allow you to customize its appearance based on user interactions and operational states. Visual states enable you to create responsive UI that provides clear feedback to users about the control's current status.

You can use visual states to change the visual appearance of the control depending on its current state—whether it's disabled, pressed, listening for speech, or encountering an error.

Available Visual States

The SpeechToTextButton provides the following CommonStates visual states:

Visual State	Description
Normal	Applied when the button is in its default, inactive state.
Pressed	Applied when the button is being pressed or tapped by the user.
PointerOver	(Desktop) Applied when the mouse cursor is hovering over the button.
Listening	Applied when the button is actively listening for speech input.
ListeningPointerOver	(Desktop) Applied when the mouse cursor is hovering over the button when in Listening state.
ListeningPressed	Applied when the button is pressed when actively listening for speech input.
Error	Applied when an error occurs during speech recognition (e.g., no internet connection, speech recognizer issues, permission denied).
Disabled	Applied when the button is disabled and cannot be interacted with.

Visual State Transitions

The SpeechToTextButton automatically transitions between visual states based on user interaction and speech recognition status:

• Normal → Pressed—When the user presses the button.
• Pressed → Listening—When speech recognition begins.
• Listening → Normal—When speech recognition completes successfully.
• Any State → Error—When an error occurs during operation.
• Any State → Disabled—When the control is programmatically disabled.

Using Visual States

The following example demonstrates how to customize the SpeechToTextButton visual states with different styling for each state.

1. Define the SpeechToTextButton in XAML:

<Grid ColumnDefinitions="*, Auto"
      RowDefinitions="Auto">
    <Editor x:Name="editor" 
            AutoSize="TextChanges" />
    <telerik:RadSpeechToTextButton x:Name="speechToTextButton"
                                   SpeechRecognized="OnSpeechRecognized"
                                   ErrorOccurred="OnErrorOccurred"
                                   Grid.Column="1"
                                   VerticalOptions="Start"
                                   Style="{StaticResource SpeechToTextButtonStyle}" />
</Grid>

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

<Style x:Key="SpeechToTextButtonStyle" TargetType="telerik:RadSpeechToTextButton">
    <Setter Property="Padding" Value="12, 8" />
    <Setter Property="CornerRadius" Value="12" />
    <Setter Property="VerticalTextAlignment" Value="Center" />
    <Setter Property="HorizontalTextAlignment" Value="Center" />
    <Setter Property="TextColor" Value="#00897B" />
    <Setter Property="BackgroundColor" Value="Transparent" />
    <Setter Property="BorderBrush" Value="LightGray" />
    <Setter Property="BorderThickness" Value="2" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal" />
                <VisualState Name="Pressed">
                    <VisualState.Setters>
                        <Setter Property="telerik:RadSpeechToTextButton.TextColor" Value="#9900897B" />
                        <Setter Property="telerik:RadSpeechToTextButton.BackgroundColor" Value="#E8F5F4" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="Listening">
                    <VisualState.Setters>
                        <Setter Property="telerik:RadSpeechToTextButton.Content" Value="{x:Static telerik:TelerikFont.IconStopRecording}" />
                        <Setter Property="telerik:RadSpeechToTextButton.TextColor" Value="#000000" />
                        <Setter Property="telerik:RadSpeechToTextButton.BackgroundColor" Value="#00897B" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="ListeningPressed">
                    <VisualState.Setters>
                        <Setter Property="telerik:RadSpeechToTextButton.Content" Value="{x:Static telerik:TelerikFont.IconStopRecording}" />
                        <Setter Property="telerik:RadSpeechToTextButton.TextColor" Value="#9900897B" />
                        <Setter Property="telerik:RadSpeechToTextButton.BackgroundColor" Value="#E8F5F4" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="Error">
                    <VisualState.Setters>
                        <Setter Property="telerik:RadSpeechToTextButton.TextColor" Value="#FF0000" />
                        <Setter Property="telerik:RadSpeechToTextButton.BackgroundColor" Value="Transparent" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="telerik:RadSpeechToTextButton.BackgroundColor" Value="#6100897B" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

3. 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 SpeechToTextButton Visual States scenario, see the SDKBrowser Demo Application and go to the SpeechToTextButton > Styling category.

See Also

• Style the SpeechToTextButton
• Configure the SpeechToTextButton
• Events
• Execute Commands