.NET MAUI SpeechToTextButton Styling
The SpeechToTextButton for .NET MAUI provides extensive styling options that allow you to customize its visual appearance to match your application's design. You can modify colors, borders, spacing, and leverage visual states to provide clear feedback during different interaction phases.
Styling Properties
The following properties control the visual appearance of the SpeechToTextButton:
-
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 button icon.
The SpeechToTextButton uses the .NET MAUI Visual State Manager and defines a visual state group named CommonStates with the following visual states:
-
Normal—The default state when the button is not being interacted with and speech recognition is not active. -
Pressed—The state when the user is physically pressing the button but speech recognition hasn't started yet. - (Desktop)
PointerOver—The state when the mouse cursor is hovering over the button. -
Listening—The active state when the button is listening for speech input. This is the primary feedback state for users. - (Desktop)
ListeningPointerOver—The state when the mouse cursor is hovering over the button when inListeningstate. -
ListeningPressed—The state when the button is pressed when actively listening for speech input. -
Error—The state displayed when speech recognition encounters an error or fails to process input. -
Disabled—The state when the control is disabled and cannot be interacted with.
Each visual state can have different styling applied, allowing you to provide clear visual feedback for different interaction phases.
Example
The following example demonstrates how to style the SpeechToTextButton with custom colors and visual state styling.
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 style in the page's resources:
<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"
4. The SpeechRecognized event handler:
private void OnSpeechRecognized(object sender, Telerik.Maui.SpeechRecognizer.SpeechRecognizerSpeechRecognizedEventArgs e)
{
this.editor.Text = e.FullText;
}
5. The ErrorOccurred event handler:
private void OnErrorOccurred(object sender, Telerik.Maui.SpeechRecognizer.SpeechRecognizerErrorOccurredEventArgs e)
{
e.Handled = true;
var error = $"{e.Message}; {e.Exception}";
Application.Current.Windows[0].Page.DisplayAlert("Error", error, "OK");
}
This is the result on Android and iOS:
For a runnable example demonstrating the SpeechToTextButton Styling API, see the SDKBrowser Demo Application and go to the SpeechToTextButton > Styling category.