diff --git a/_config.yml b/_config.yml index 80615d99..32718a13 100644 --- a/_config.yml +++ b/_config.yml @@ -500,6 +500,10 @@ navigation: position: 15 ## End SlideView Sub-Folders ##End SlideView + ## SpeechToTextButton + controls/speechtotextbutton: + title: "SpeechToTextButton" + ## End SpeechToTextButton ## SpreadProcessing controls/spreadprocessing: title: "SpreadProcessing" @@ -751,6 +755,7 @@ intro_columns: "Segmented Control": "segmentedcontrol-overview" "Button": "button-overview" "CheckBox": "checkbox-overview" + "SpeechToTextButton": "speechtotextbutton-overview" "TemplatedButton": "templatedbutton-overview" "ToggleButton": "togglebutton-overview" - diff --git a/_contentTemplates/get-started.md b/_contentTemplates/get-started.md index f44e089b..3d294191 100644 --- a/_contentTemplates/get-started.md +++ b/_contentTemplates/get-started.md @@ -37,6 +37,7 @@ To visualize the Telerik controls, register them in the `MauiProgram.cs` file of .UseTelerik() ``` + #end #add-telerik-component diff --git a/controls/bottomsheet/getting-started.md b/controls/bottomsheet/getting-started.md index 95790451..76b897df 100644 --- a/controls/bottomsheet/getting-started.md +++ b/controls/bottomsheet/getting-started.md @@ -18,11 +18,11 @@ At the end, you will achieve the following result. Before adding the BottomSheet, you need to: -1. [Set up your .NET MAUI application]({%slug maui-getting-started %}#step-1-set-up-your-net-maui-application). +1. [Set up your .NET MAUI application]({%slug maui-getting-started%}#prerequisites). -1. [Download Telerik UI for .NET MAUI]({% slug maui-getting-started %}#step-2-download-telerik-ui-for-net-maui). +1. [Download Telerik UI for .NET MAUI]({% slug maui-getting-started%}#step-0-start-your-free-trial). -1. [Install Telerik UI for .NET MAUI]({%slug maui-getting-started %}#step-3-install-telerik-ui-for-net-maui). +1. [Install Telerik UI for .NET MAUI]({%slug maui-getting-started%}#step-3-add-the-telerik-nuGet-server). ## Define the Control diff --git a/controls/speechtotextbutton/commands.md b/controls/speechtotextbutton/commands.md new file mode 100644 index 00000000..caef4219 --- /dev/null +++ b/controls/speechtotextbutton/commands.md @@ -0,0 +1,44 @@ +--- +title: Commands +page_title: .NET MAUI SpeechToTextButton Documentation - Commands +description: Use the exposed commands of the Telerik UI for .NET MAUI SpeechToTextButton +position: 9 +tags: .net maui, telerik speech to text button for .net maui, ui for .net maui, microsoft .net maui +slug: speechtotextbutton-commands +--- + +# .NET MAUI SpeechToTextButton Commands + +The .NET MAUI SpeechToTextButton provides commands that execute when specific actions occur, such as when speech is recognized or when an error occurs. This allows you to handle these events in a more MVVM-friendly way. + +The .NET MAUI SpeechToTextButton exposes the following commands: + +* `SpeechRecognizedCommand` (`ICommand`)—Specifies a command to execute when the speech recognition is successful and the recognized text is available. The command context is `SpeechToTextButtonSpeechRecognizedCommandContext`, which contains the recognized text—`FullText` and confidence score—`FullTextConfidenceScore`. +* `ErrorOccurredCommand` (`ICommand`)—Specifies a command to execute when an error occurs during the speech recognition process. The command context is `SpeechToTextButtonErrorOccurredCommandContext`, which contains the error message—`Message` and the exception—`Exception`. + +## Example + +Here is an example using the `SpeechRecognizedCommand` and `ErrorOccurredCommand`: + +**1.** Define the `SpeechToTextButton` in XAML: + + + +**2.** Add the `telerik` namespace: + +```XAML +xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" +``` + +**3.** Define the `ViewModel` with `SpeechRecognizedCommand` and `ErrorOccurredCommand` definitions: + + + +> For a runnable example with the SpeechToTextButton Commands scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to the **SpeechToTextButton > Features** category. + +## See Also + +- [Set Visual States]({%slug speechtotextbutton-visual-states%}) +- [Events]({%slug speechtotextbutton-events%}) +- [Custom Recognizer]({%slug speechtotextbutton-custom-recognizer%}) +- [Style the SpeechToTextButton]({%slug speechtotextbutton-styling%}) \ No newline at end of file diff --git a/controls/speechtotextbutton/configuration.md b/controls/speechtotextbutton/configuration.md new file mode 100644 index 00000000..2d9a66a6 --- /dev/null +++ b/controls/speechtotextbutton/configuration.md @@ -0,0 +1,53 @@ +--- +title: Configuration +page_title: .NET MAUI SpeechToTextButton Documentation - Configuration +description: Learn how to define language, get the text from the speech to text recognizer when using the Telerik SpeechToTextButton for .NET MAUI. +position: 5 +tags: .net maui, telerik speech to text button for .net maui, ui for .net maui, microsoft .net maui +slug: speechtotextbutton-configuration +--- + +# .NET MAUI SpeechToTextButton Configuration + +The purpose of this help article is to show you the main configuration options of the control. + +## Getting Full Text from Speech Recognition + +The SpeechToTextButton allows you to retrieve the full text recognized by the speech recognition service. +This is done through the `FullText` property, which provides the complete transcription of the spoken input from the beginning of the current listening session. + +To get the full text, you can subscribe to the `SpeechRecognized` event, which is triggered when the speech recognition is successful. + +## Continuous Recognition + +The SpeechToTextButton supports continuous speech recognition, allowing it to listen for speech input without stopping after each recognition. + +You can disable the continuous recognition by setting the `IsContinuousRecognition` property to `false`. The default value is `true`, meaning that the button will listen for speech input continuously, until it is explicitly stopped or the user taps the button again. + +```XAML + +``` + +## Language + +The SpeechToTextButton allows you to set the language for speech recognition. This is important for accurate transcription of spoken words into text. + +You can set the language using the `LanguageTag` property, which accepts a string representing the language code (e.g., "en-US" for English, "fr-FR" for French). + + + +### Language Support + +The SpeechToTextButton supports a variety of languages for speech recognition. The available languages depend on the underlying platform and the speech recognition service used. + +Check the following articles for more information on supported languages: [SpeechToTextButton Language Support in .NET MAUI]({%slug speechtotextbutton-language-support%}) + + +> For a runnable example with the SpeechToTextButton Configuration scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to the **SpeechToTextButton > Features** category. + +## See Also + +- [Set Visual States]({%slug speechtotextbutton-visual-states%}) +- [Execute Commands]({%slug speechtotextbutton-commands%}) +- [Style the SpeechToTextButton]({%slug speechtotextbutton-styling%}) \ No newline at end of file diff --git a/controls/speechtotextbutton/custom-recognizer.md b/controls/speechtotextbutton/custom-recognizer.md new file mode 100644 index 00000000..105a0ba2 --- /dev/null +++ b/controls/speechtotextbutton/custom-recognizer.md @@ -0,0 +1,46 @@ +--- +title: Custom Recognizer +page_title: .NET MAUI SpeechToTextButton Documentation - Custom Recognizer +description: Learn how to use a custom speech recognizer with the Telerik SpeechToTextButton for .NET MAUI. +position: 6 +tags: .net maui, telerik speech to text button for .net maui, ui for .net maui, custom recognizer, microsoft .net maui +slug: speechtotextbutton-custom-recognizer +--- + +# .NET MAUI SpeechToTextButton Custom Recognizer + +The .NET MAUI SpeechToTextButton allows you to use a custom speech recognizer by implementing the `IRadSpeechRecognizer` interface. This enables you to integrate third-party speech recognition services or customize the behavior of the speech recognition process. + +## Implementation Steps + +Follow these steps to implement a custom speech recognizer: + +**1.** Define the `SpeechToTextButton` in XAML: + + + +**2.** Add the `telerik` namespace: + +```XAML +xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" +``` + +**3.** Create a class `MyCustomSpeechRecognizer` that implements the `IRadSpeechRecognizer` interface: + + + +**4.** Set the `SpeechRecognizerCreator` property of the `RadSpeechToTextButton` to an instance of your custom recognizer: + + + +**5.** Handle the `SpeechRecognized` event to process the recognition results: + + + +> For a runnable example with the SpeechToTextButton Custom Recognizer scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to the **SpeechToTextButton > Features** category. + +## See Also + +- [Set Visual States]({%slug speechtotextbutton-visual-states%}) +- [Events]({%slug speechtotextbutton-events%}) +- [Style the SpeechToTextButton]({%slug speechtotextbutton-styling%}) \ No newline at end of file diff --git a/controls/speechtotextbutton/events.md b/controls/speechtotextbutton/events.md new file mode 100644 index 00000000..bdcb61a0 --- /dev/null +++ b/controls/speechtotextbutton/events.md @@ -0,0 +1,62 @@ +--- +title: Events +page_title: .NET MAUI SpeechToTextButton Documentation - Events +description: Learn about the events that the SpeechToTextButton for .NET MAUI exposes. +position: 8 +tags: .net maui, telerik speech to text button for .net maui, ui for .net maui +slug: speechtotextbutton-events +--- + +# .NET MAUI SpeechToTextButton Events + +The .NET MAUI SpeechToTextButton emits a set of events that allow you to configure the component's behavior in response to speech recognition. + +The .NET MAUI SpeechToTextButton exposes the following events: + +* `SpeechRecognized`—Raised when the speech recognition is successful and the recognized text is available. The `SpeechRecognized` event handler receives two parameters: + * The `sender` argument which is of type `object` but can be cast to `RadSpeechToTextButton`. + * A `SpeechRecognizerSpeechRecognizedEventArgs` argument which has a reference to the: + * `FullText` (`string`) property that contains the current full text recognized from the speech input from the beginning of the current listening session. + * `FullTextConfidenceScore` property that indicates the confidence level of the recognition. The value is between 0 and 1, indicating how confident the speech-to-text transcription is. If the value is -1, a confidence score could not be provided. + +* `ErrorOccurred`—Raised when an error occurs during the speech recognition process. The `ErrorOccurred` event handler receives two parameters: + * The `sender` argument which is of type `object` but can be cast to `RadSpeechToTextButton`. + * A `SpeechRecognizerErrorOccurredEventArgs` argument which has a reference to the: + * `Message` (`string`) property that contains the error message describing the issue that occurred during speech recognition. + * `Exception` (`System.Exception`) property that contains the exception associated with the speech recognizer error, if any. + * `Handled` (`bool`) property that determines whether the error has been handled. Set this to `true` to prevent the default error handling behavior. + +* `StateChanged`—Raised when the state of the speech recognizer changes. The `StateChanged` event handler receives two parameters: + * The `sender` argument which is of type `object` but can be cast to `RadSpeechToTextButton`. + * An `System.EventArgs`. + +## Example + +Here is an example using the `SpeechRecognized` and `ErrorOccurred` events: + +**1.** Define the `SpeechToTextButton` in XAML: + + + +**2.** Add the `telerik` namespace: + +```XAML +xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" +``` + +**3.** Handle the `SpeechRecognized` event: + + + +**4.** Handle the `ErrorOccurred` event: + + + +> For a runnable example with the SpeechToTextButton Events scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to the **SpeechToTextButton > Features** category. + +## See Also + +- [Set Visual States]({%slug speechtotextbutton-visual-states%}) +- [Custom Recognizer]({%slug speechtotextbutton-custom-recognizer%}) +- [Execute Commands]({%slug speechtotextbutton-commands%}) +- [Style the SpeechToTextButton]({%slug speechtotextbutton-styling%}) \ No newline at end of file diff --git a/controls/speechtotextbutton/getting-started.md b/controls/speechtotextbutton/getting-started.md new file mode 100644 index 00000000..91303867 --- /dev/null +++ b/controls/speechtotextbutton/getting-started.md @@ -0,0 +1,108 @@ +--- +title: Getting Started +page_title: .NET MAUI SpeechToTextButton Documentation - Getting Started +description: Get started with the Telerik UI for .NET MAUI SpeechToTextButton control and add the control to your .NET MAUI project. +position: 2 +slug: speechtotextbutton-getting-started +--- + +# Getting Started with the .NET MAUI SpeechToTextButton + +This guide provides the information you need to start using the Telerik UI for .NET MAUI SpeechToTextButton by adding the control to your project. + +At the end, you will achieve the following result. + +![.NET MAUI SpeechToTextButton Getting Started](images/speechtotextbutton-getting-started.png) + +## Prerequisites + +Before adding the SpeechToTextButton, you need to: + +1. [Set up your .NET MAUI application]({%slug maui-getting-started%}#prerequisites). + +1. [Download Telerik UI for .NET MAUI]({% slug maui-getting-started%}#step-0-start-your-free-trial). + +1. [Install Telerik UI for .NET MAUI]({%slug maui-getting-started%}#step-3-add-the-telerik-nuGet-server). + +## Required Permissions + +Before adding the contol, ensure that you have the required permissions set up in your project. + +### Android + +Add the following permissions to your `AndroidManifest.xml` file: + +```xml + +``` + +### iOS and MacCatalyst + +Add the `NSMicrophoneUsageDescription` and `NSSpeechRecognitionUsageDescription` permissions to your `Info.plist` file: + +```xml +NSMicrophoneUsageDescription +The SpeechToTextButton requires access to microphone. +NSSpeechRecognitionUsageDescription +The SpeechToTextButton requires access to the Speech Recognition service. +``` + +### WinUI + +There are limitations when using the SpeechToTextButton on WinUI. When clicking on the control, the `InvalidOperationException` occurs. + +To turn speech recognition on WinUI, review the [WinUI Support]({%slug speechtotextbutton-winui-support%}) article. + +## Define the Control + +**1.** When your .NET MAUI application is set up, you are ready to add a SpeechToTextButton control to your page: + + + + +**2.** Add the `telerik` namespace: + +```XAML +xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" +``` +```C# +using Telerik.Maui.Controls; +``` + +**3.** Register the Telerik controls through the `Telerik.Maui.Controls.Compatibility.UseTelerik` extension method called inside the `CreateMauiApp` method of the `MauiProgram.cs` file of your project: + +```C# +using Telerik.Maui.Controls.Compatibility; +public static class MauiProgram +{ + public static MauiApp CreateMauiApp() + { + var builder = MauiApp.CreateBuilder(); + builder + .UseTelerik() + .UseMauiApp() + .ConfigureFonts(fonts => + { + fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); + }); + return builder.Build(); + } +} +``` + +> For a runnable example with the SpeechToTextButton Getting Started scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to the **SpeechToTextButton > Getting Started** category. + +## Additional Resources + +- [Configure the SpeechToTextButton]({%slug speechtotextbutton-configuration%}) +- [Set Visual States]({%slug speechtotextbutton-visual-states%}) +- [Events]({%slug speechtotextbutton-events%}) +- [Execute Commands]({%slug speechtotextbutton-commands%}) +- [Style the SpeechToTextButton]({%slug speechtotextbutton-styling%}) + +## See Also + +- [.NET MAUI SpeechToTextButton Product Page](https://www.telerik.com/maui-ui/speechtotextbutton) +- [.NET MAUI SpeechToTextButton Forum Page](https://www.telerik.com/forums/maui?tagId=1764) +- [Telerik .NET MAUI Blogs](https://www.telerik.com/blogs/mobile-net-maui) +- [Telerik .NET MAUI Roadmap](https://www.telerik.com/support/whats-new/maui-ui/roadmap) \ No newline at end of file diff --git a/controls/speechtotextbutton/images/speechtotext-architecture.png b/controls/speechtotextbutton/images/speechtotext-architecture.png new file mode 100644 index 00000000..2be20a32 Binary files /dev/null and b/controls/speechtotextbutton/images/speechtotext-architecture.png differ diff --git a/controls/speechtotextbutton/overview.md b/controls/speechtotextbutton/overview.md new file mode 100644 index 00000000..b5834aa6 --- /dev/null +++ b/controls/speechtotextbutton/overview.md @@ -0,0 +1,37 @@ +--- +title: Overview +page_title: .NET MAUI SpeechToTextButton Documentation - Overview +description: Learn how the Telerik UI for .NET MAUI SpeechToTextButton enables seamless speech-to-text conversion in your applications. +tags: speech to text for .net maui, .net maui, ui for .net maui, microsoft .net maui +position: 0 +slug: speechtotextbutton-overview +--- + +# .NET MAUI SpeechToTextButton Overview + +The Telerik UI for .NET MAUI SpeechToTextButton is a UI component that enables users to convert spoken words into text within .NET MAUI applications. + +When the user taps the button, the control uses a speech recognition service, listens for voice input, and then transcribes the recognized speech into text. The recognized text can be displayed in a text field or used for further processing in your application. + +![.NET MAUI SpeechToTextButton Overview](images/speechtotext-overview.png) + +## Key Features of the Telerik .NET MAUI SpeechToTextButton + +* [Language Configuration]({%slug speechtotextbutton-configuration%}#language)—The SpeechToTextButton allows you to set the language for speech recognition, ensuring accurate transcription of spoken words into text. +* [Events]({%slug speechtotextbutton-events%})—The SpeechToTextButton emits a set of events that allow you to configure the component's behavior in response to speech recognition, including `SpeechRecognized` and `ErrorOccurred` events. +* [Commands]({%slug speechtotextbutton-commands%})—The SpeechToTextButton supports command execution, allowing you to bind commands to the button's actions in an MVVM-friendly way. +* [Custom Speech Recognizer]({%slug speechtotextbutton-custom-recognizer%})—Implement your own speech recognition logic by creating a custom recognizer that implements the `IRadSpeechRecognizer` interface. +* [Visual States]({%slug speechtotextbutton-visual-states%})—The SpeechToTextButton supports different visual states such as Normal, Listening, Error, and more, providing visual feedback to users during speech recognition. +* [Styling API]({%slug speechtotextbutton-styling%})—You can customize the appearance of the SpeechToTextButton using the styling API, which allows you to set properties like background color, border color, corner radius, and more. + +## Next Steps + +- [Getting Started with Telerik UI for .NET MAUI SpeechToTextButton]({%slug speechtotextbutton-getting-started%}) +- [Telerik UI for .NET MAUI SpeechToTextButton Support on WinUI]({%slug speechtotextbutton-winui-support%}) + +## See Also + +- [.NET MAUI SpeechToTextButton Product Page](https://www.telerik.com/maui-ui/speechtotextbutton) +- [.NET MAUI SpeechToTextButton Forum Page](https://www.telerik.com/forums/maui?tagId=1764) +- [Telerik .NET MAUI Blogs](https://www.telerik.com/blogs/mobile-net-maui) +- [Telerik .NET MAUI Roadmap](https://www.telerik.com/support/whats-new/maui-ui/roadmap) \ No newline at end of file diff --git a/controls/speechtotextbutton/states.md b/controls/speechtotextbutton/states.md new file mode 100644 index 00000000..de41c994 --- /dev/null +++ b/controls/speechtotextbutton/states.md @@ -0,0 +1,23 @@ +--- +title: States +page_title: .NET MAUI SpeechToTextButton Documentation - States +description: Learn what are the different states the SpeechToTextControl for .NET MAUI uses. +position: 4 +tags: .net maui, telerik speech to text button for .net maui, ui for .net maui +slug: speechtotextbutton-states +--- + +# .NET MAUI SpeechToTextButton Architecture and States + +The SpeechTextButton control handles user interactions and provides visual feedback about its current state, for example, when it's listening or ready. The button uses a speech recognition service that varies by platform and also provides an AI agent connection. Almost all operations are asynchronous. + +The image below explains how the control works and how the states are managed: + +![.NET MAUI SpeechToTextButton States](images/speechtotext-architecture.png) + +## See Also + +- [Set Visual States]({%slug speechtotextbutton-visual-states%}) +- [Events]({%slug speechtotextbutton-events%}) +- [Execute Commands]({%slug speechtotextbutton-commands%}) +- [Style the SpeechToTextButton]({%slug speechtotextbutton-styling%}) \ No newline at end of file diff --git a/controls/speechtotextbutton/styling.md b/controls/speechtotextbutton/styling.md new file mode 100644 index 00000000..4762cea8 --- /dev/null +++ b/controls/speechtotextbutton/styling.md @@ -0,0 +1,76 @@ +--- +title: Styling +page_title: .NET MAUI SpeechToTextButton Documentation - Styling +description: Learn how to set background color, border color, corner radius, and other properties of the SpeechToTextButton for .NET MAUI. +tags: speech to text for .net maui, .net maui, ui for .net maui, listening state +position: 11 +slug: speechtotextbutton-styling +--- + +# .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 in `Listening` state. +* `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: + + + +**2.** Define the style in the page's resources: + + + +**3.** Add the `telerik` namespace: + +```XAML +xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" +``` + +**4.** The `SpeechRecognized` event handler: + + + +**5.** The `ErrorOccurred` event handler: + + + +This is the result on Android and iOS: + +![.NET MAUI SpeechToTextButton Visual States](images/speechtotextbutton-styling.gif "SpeechToTextButton for .NET MAUI") + +> For a runnable example demonstrating the SpeechToTextButton Styling API, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to the **SpeechToTextButton > Styling** category. + +## See Also + +- [Visual States in the SpeechToTextButton]({%slug speechtotextbutton-visual-states%}) +- [Configure the SpeechToTextButton]({%slug speechtotextbutton-configuration%}) +- [Events]({%slug speechtotextbutton-events%}) +- [Execute Commands]({%slug speechtotextbutton-commands%}) diff --git a/controls/speechtotextbutton/visual-states.md b/controls/speechtotextbutton/visual-states.md new file mode 100644 index 00000000..5395ac2b --- /dev/null +++ b/controls/speechtotextbutton/visual-states.md @@ -0,0 +1,70 @@ +--- +title: Visual States +page_title: .NET MAUI SpeechToTextButton Documentation - Visual States +description: Learn how to set the border color, border thickness and other styling options for the different visual states of the Telerik SpeechToTextButton for .NET MAUI. +position: 10 +tags: .net maui, telerik .net maui, ui for .net maui, templated, button, microsoft .net maui +slug: speechtotextbutton-visual-states +--- + +# .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: + + + +**2.** Define the visual states in the page's resources with custom styling: + + + +**3.** Add the `telerik` namespace: + +```XAML +xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" +``` + +This is the result on WinUI: + +![.NET MAUI SpeechToTextButton Visual States](images/speechtotextbutton-styling.gif "SpeechToTextButton for .NET MAUI") + +> For a runnable example demonstrating the SpeechToTextButton Visual States scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to the **SpeechToTextButton > Styling** category. + +## See Also + +- [Style the SpeechToTextButton]({%slug speechtotextbutton-styling%}) +- [Configure the SpeechToTextButton]({%slug speechtotextbutton-configuration%}) +- [Events]({%slug speechtotextbutton-events%}) +- [Execute Commands]({%slug speechtotextbutton-commands%}) \ No newline at end of file diff --git a/controls/speechtotextbutton/visual-structure.md b/controls/speechtotextbutton/visual-structure.md new file mode 100644 index 00000000..dcfdfe04 --- /dev/null +++ b/controls/speechtotextbutton/visual-structure.md @@ -0,0 +1,28 @@ +--- +title: Visual Structure +page_title: .NET MAUI SpeechToTextButton Documentation - SpeechToTextButton Visual Structure +description: Learn what visual elements are displayed by the Telerik UI for .NET MAUI SpeechToTextButton, and see how these elements build the visual structure of the control. +position: 1 +slug: speechtotextbutton-visual-structure +--- + +# .NET MAUI SpeechToTextButton Visual Structure + +The visual structure of the .NET MAUI SpeechToTextButton represents the anatomy of the UI component. Being familiar with the visual elements of the SpeechToTextButton allows you to quickly find the information required to configure them. + +The following image shows the anatomy of the SpeechToTextButton. + +![.NET MAUI SpeechToTextButton Visual Structure](images/speechtotextbutton-visual-structure.png "Visual elements of The SpeechToTextButton control") + +## Displayed Elements + +* **Content**—The content of the SpeechToTextButton. + +## See Also + +- [Getting Started with Telerik UI for .NET MAUI SpeechToTextButton]({%slug speechtotextbutton-getting-started%}) +- [Configure the SpeechToTextButton]({%slug speechtotextbutton-configuration%}) +- [Set Visual States]({%slug speechtotextbutton-visual-states%}) +- [Events]({%slug speechtotextbutton-events%}) +- [Execute Commands]({%slug speechtotextbutton-commands%}) +- [Style the SpeechToTextButton]({%slug speechtotextbutton-styling%}) \ No newline at end of file diff --git a/controls/speechtotextbutton/winui-support.md b/controls/speechtotextbutton/winui-support.md new file mode 100644 index 00000000..a7ba3b84 --- /dev/null +++ b/controls/speechtotextbutton/winui-support.md @@ -0,0 +1,54 @@ +--- +title: WinUI Support +page_title: .NET MAUI SpeechToTextButton Documentation - WinUI Support +description: Review what are the options and limitations using the .NET MAUI SpeechToTextButton on WinUI. +position: 3 +slug: speechtotextbutton-winui-support +--- + +# .NET MAUI SpeechToTextButton WinUI Support Specifics + +The Telerik UI for .NET MAUI SpeechToTextButton control is designed to work seamlessly across all supported platforms, including WinUI. + +The Speech Recognizer uses platform-specific speech recognition services. By default, the `RadSpeechToTextButton` control uses the `RadSpeechRecognizer` as a speech recognizer creator. + +On WinUI, the `RadSpeechRecognizer` is not set to the `RadSpeechToTextButton`. When you click the control, an `InvalidOperationException` is thrown. The reason behind this is a limitation in the WinUI platform speech recognition service—[`Windows.Media.SpeechRecognition`](https://learn.microsoft.com/en-us/uwp/api/windows.media.speechrecognition?view=winrt-26100). + +The `RadSpeechRecognizer` on WinUI utilizes the [`Windows.Media.SpeechRecognition`](https://learn.microsoft.com/en-us/uwp/api/windows.media.speechrecognition?view=winrt-26100). There are specific considerations when using the control on WinUI due to limitations in the `Windows.Media.SpeechRecognition` API. The app crashes when trying to close the application via the "X" button and the app is **Packaged**. + +> See the following bug report for more details: [Application crashes after using SpeechRecognizer in a Packaged App](https://github.com/microsoft/microsoft-ui-xaml/issues/10697). + +## Solutions + +To use the SpeechToTextButton on WinUI, you can use one of the following approaches described in the table below: + +| Packaged Apps | Unpackaged Apps | +| ------------- | --------------- | +| Create a [custom recognizer]({%slug speechtotextbutton-custom-recognizer%}) | Create a [custom recognizer]({%slug speechtotextbutton-custom-recognizer%}) | +| | Use the `RadSpeechRecognizer` | + +If you want to use the `RadSpeechRecognizer` on WinUI, set the `SpeechRecognizerCreator` property of the `RadSpeechToTextButton` to `RadSpeechRecognizer`: + +```C# +this.speechToTextButton.SpeechRecognizerCreator = () => new RadSpeechRecognizer(); +``` + +### Configure Speech Recognition + +Confirm the following are enabled in your WinUI app: + +* Online speech recognition—(Settings -> Privacy -> Privacy & Security) is enabled. +* Microphone—(Settings -> Privacy & Security -> Microphone) has the necessary permissions for the app. + +### Language Support + +When setting the `RadSpeechToTextButton.LanguageTag` property to a specific value, ensure that the language is supported by the `Windows.Media.SpeechRecognition.SpeechRecognizer` on WinUI. + +For more details, review the [Microsoft documentation](https://learn.microsoft.com/en-us/windows/apps/design/input/speech-recognition#predefined-grammars). + +## See Also + +- [Visual States in the SpeechToTextButton]({%slug speechtotextbutton-visual-states%}) +- [Configure the SpeechToTextButton]({%slug speechtotextbutton-configuration%}) +- [Events]({%slug speechtotextbutton-events%}) +- [Execute Commands]({%slug speechtotextbutton-commands%}) \ No newline at end of file diff --git a/knowledge-base/speechtotextbutton-language-support.md b/knowledge-base/speechtotextbutton-language-support.md new file mode 100644 index 00000000..a0422916 --- /dev/null +++ b/knowledge-base/speechtotextbutton-language-support.md @@ -0,0 +1,106 @@ +--- +title: SpeechToTextButton Language Support in .NET MAUI +description: Learn what are the supported languages for the SpeechToTextButton in .NET MAUI and how to set them. +type: how-to +page_title: How to check the supported languages for the SpeechToTextButton in .NET MAUI +slug: speechtotextbutton-language-support +tags: .net maui, speechtotext, languages, supported languages, .net maui, microsoft .net maui +res_type: kb +--- + +## Environment + +| Version | Control | Author | +| ------- | ------- | ------ | +| SpeechToTextButton for .NET MAUI | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) | + +## Description + +This article explains how to check the supported languages for the SpeechToTextButton in .NET MAUI and how to set them. + +## Solution + +Here is an example of how to check the supported languages for the SpeechToTextButton in .NET MAUI. For the demo we will use +* An Editor for displaying the recognized text. +* Entry for setting the language. +* Label for displaying whether the language is supported or not. + +**1.** Define the `RadSpeechToTextButton` control in XAML. + +```XAML + + + + + + + +``` + +**2.** In the code-behind, handle the `TextChanged` event of the Entry to check if the entered language is supported. + +```C# +private void EntryLanguage_TextChanged(object sender, Microsoft.Maui.Controls.TextChangedEventArgs e) +{ + bool isSupported = IsLanguageSupported(e.NewTextValue); + this.label1.Text = isSupported ? "supported" : "not supported"; + + if (isSupported) + { + this.label1.Text = "supported"; + this.speechToTextButton.LanguageTag = e.NewTextValue; + } + else + { + this.label1.Text = "not supported"; + } +} + +private static bool IsLanguageSupported(string languageTag) +{ + try + { +#if ANDROID + //// There is no programmatic way to check if a language is supported on Android but most languages are. + //// https://cloud.google.com/speech-to-text/docs/speech-to-text-supported-languages +#elif IOS + var locale = Foundation.NSLocale.FromLocaleIdentifier(languageTag); + var localSpeechRecognizer = new Speech.SFSpeechRecognizer(locale); + localSpeechRecognizer.Dispose(); +#elif WINDOWS + var language = new global::Windows.Globalization.Language(languageTag); + var localSpeechRecognizer = new global::Windows.Media.SpeechRecognition.SpeechRecognizer(language); + localSpeechRecognizer.Dispose(); +#endif + return true; + } + catch + { + return false; + } +} +``` + +**3.** Handle the SpeechToTextButton's `SpeechRecognized` event to display the recognized text in the Editor. + +```C# +private void SpeechToTextButton_SpeechRecognized(object sender, SpeechRecognizerSpeechRecognizedEventArgs args) +{ + this.editor.Text = args.FullText; +} +``` + +## See Also + +- [SpeechToTextButton for .NET MAUI]({%slug speechtotextbutton-overview%}) +- [Configure the SpeechToTextButton]({%slug speechtotextbutton-configuration%}) +- [Set Visual States]({%slug speechtotextbutton-visual-states%}) +- [Events]({%slug speechtotextbutton-events%}) +- [Execute Commands]({%slug speechtotextbutton-commands%}) +- [Style the SpeechToTextButton]({%slug speechtotextbutton-styling%}) \ No newline at end of file diff --git a/spell-ignore.txt b/spell-ignore.txt index af7b6b8b..f950ec38 100644 --- a/spell-ignore.txt +++ b/spell-ignore.txt @@ -86,5 +86,7 @@ TextInput telerik TreeDataGrid Theming +SpeechToTextButton +SpeechToText BottomSheet -MCP +MCP \ No newline at end of file