diff --git a/_config.yml b/_config.yml index a3189dc3a..32718a13f 100644 --- a/_config.yml +++ b/_config.yml @@ -118,6 +118,10 @@ navigation: controls/border: title: "Border" ## End Border + ## BottomSheet + controls/bottomsheet: + title: "BottomSheet" + ## End BottomSheet ## BusyIndicator controls/busyindicator: title: "BusyIndicator" @@ -496,6 +500,10 @@ navigation: position: 15 ## End SlideView Sub-Folders ##End SlideView + ## SpeechToTextButton + controls/speechtotextbutton: + title: "SpeechToTextButton" + ## End SpeechToTextButton ## SpreadProcessing controls/spreadprocessing: title: "SpreadProcessing" @@ -727,6 +735,7 @@ intro_columns: title: "Navigation & Layouts" items: "Accordion": "accordion-overview" + "BottomSheet": "bottomsheet-overview" "DockLayout": "docklayout-overview" "Expander": "expander-overview" "NavigationView": "navigationview-overview" @@ -746,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 f44e089b7..3d2941918 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/accordion/animation.md b/controls/accordion/animation.md index 424a0a79a..7504f7141 100644 --- a/controls/accordion/animation.md +++ b/controls/accordion/animation.md @@ -10,14 +10,14 @@ slug: accordion-animation Telerik .NET MAUI Accordion provides an option to set the animation when expanding/collapsing an accordion item. -## Animation while expanding/collapsing +## Animation while Expanding/Collapsing -To enable or disable the animation you need to use the `IsAnimationEnabled` property of `RadAccordion`. By default, the Animation is enabled. +To enable or disable the animation, use the `IsAnimationEnabled` (`bool`) property of `RadAccordion`. By default, the Animation is enabled. You can also customize the duration and easing through `AnimationDuration` and `AnimationEasing` properties. -* `AnimationDuration`(`int`)—Defines the duration of the animation while expanding/collapsing the AccordionItem. The default value is 500. -* `AnimationEasing`(`Microsoft.Maui.Easing`)—Specifies animation acceleration over time. The default value is Easing.Linear. +* `AnimationDuration`(`int`)—Defines the duration of the animation while expanding/collapsing the `AccordionItem`. The default value is `500`. +* `AnimationEasing`(`Microsoft.Maui.Easing`)—Specifies animation acceleration over time. The default value is `Easing.Linear`. ## Example diff --git a/controls/bottomsheet/animation.md b/controls/bottomsheet/animation.md new file mode 100644 index 000000000..20c5fb869 --- /dev/null +++ b/controls/bottomsheet/animation.md @@ -0,0 +1,32 @@ +--- +title: Animation +page_title: .NET MAUI BottomSheet Documentation - Animation +description: Learn how to configure animation settings for the Telerik BottomSheet for .NET MAUI, including duration, easing, and enable/disable options. +position: 5 +slug: bottomsheet-animation +--- + +# .NET MAUI BottomSheet Animation + +Adding animation to the BottomSheet provides visual continuity and makes the interface feel more responsive and polished. Smooth transitions help users understand the relationship between different states and create a more engaging user experience. + +The Telerik .NET MAUI BottomSheet provides comprehensive animation options for opening, closing, and state transitions, whether triggered programmatically or through user interactions like swipe gestures. + +The following properties control the animation behavior of the BottomSheet: + +To enable or disable the animation, use the `IsAnimationEnabled` (`bool`) property of `RadBottomSheet`. By default, the animation is enabled. + +You can also customize the animation's duration and easing by using the following properties. + +* `AnimationDuration`(`uint`)—Defines the duration of the animation while opening/closing the bottom view. The default value is `1000` milliseconds. +* `AnimationEasing`(`Microsoft.Maui.Easing`)—Specifies animation acceleration over time. The default value is `Easing.CubicOut`. + +> For a runnable example with the BottomSheet Animation scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **BottomSheet > Features** category. + +## See Also + +- [Swipe Gesture]({%slug bottomsheet-swipe-gesture%}) +- [Configure the BottomSheet]({%slug bottomsheet-configuration%}) +- [Style the BottomSheet]({%slug bottomsheet-styling%}) +- [Events]({%slug bottomsheet-events%}) +- [Methods]({%slug bottomsheet-methods%}) \ No newline at end of file diff --git a/controls/bottomsheet/configuration.md b/controls/bottomsheet/configuration.md new file mode 100644 index 000000000..d0bc12143 --- /dev/null +++ b/controls/bottomsheet/configuration.md @@ -0,0 +1,133 @@ +--- +title: Configuration +page_title: .NET MAUI BottomSheet Documentation - Configuration +description: Learn more about how to configure the Telerik UI for .NET MAUI BottomSheet control. +position: 3 +slug: bottomsheet-configuration +--- + +# .NET MAUI BottomSheet Configuration + +The Telerik UI for .NET MAUI BottomSheet control offers flexible configuration options for states, dimensions, and visual elements. You can define custom states with specific heights, control the sheet's dimensions using absolute or percentage values, and customize the draggable handle to match your application's design. + +## States + +The BottomSheet control provides a flexible state system that determines how much of the screen the component occupies. You can use predefined states or create custom ones to present content at different visibility levels. + +### Predefined States + +The control includes four built-in states with predefined heights: + +* `Hidden` (default)—Represents a completely hidden bottom sheet. +* `Minimal`—Represents a minimal bottom sheet state with height `25%`. +* `Partial`—Represents a partial bottom sheet state with height `50%`. +* `Full`—Represents a full bottom sheet state with height `90%`. + +![.NET MAUI BottomSheet States](images/bottomsheet-states.png "BottomSheet States") + +### Setting States + +You can specify the current state using the `State` property of type `BottomSheetState`: + +```xaml + + + +``` + +### Custom States + +You can control the generation of default states using the `AutoGenerateStates` (`bool`) property. The default value is `true`, which means the four predefined states are populated in the `States` collection. + +```xaml + +``` + +Create custom states using the `BottomSheetState` class constructors: + +* Using `BottomSheetLength` + +```csharp +public BottomSheetState(string name, BottomSheetLength height) +``` + +* Using `double` value + +```csharp +public BottomSheetState(string name, double size, bool isPercentage = false) +``` + +Example of creating custom states: + +```csharp +// Custom state with 30% height +var customState = new BottomSheetState("Custom", 30, true); + +// Custom state with absolute height = 200 +var fixedState = new BottomSheetState("Fixed", 200, false); +``` + +### Programmatic State Changes + +Use the [`GoToBottomSheetState(string name)` method]({%slug bottomsheet-methods%}) to programmatically change states: + +Here is an example setting the predefined name of the state inside the `GoToBottomSheetState(string name)` method: + + + +Here is an example setting a custom state: + +```csharp +// Navigate to custom states +var customState = new BottomSheetState("Custom", 30, true); +bottomSheet.GoToBottomSheetState("Custom"); +``` + +### States Collection + +The BottomSheet provides a read-only `States` collection of type `ObservableCollection` that contains all available states for the bottom sheet, including both predefined and custom states. + +> For a runnable example with setting the BottomSheet States, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **BottomSheet > Features** category. + +## Width + +You can specify the width for the bottom sheet content using the `BottomSheetContentWidth` property of type `BottomSheetLength`. The `BottomSheetLength` structure supports both absolute and percentage values: + +```xaml + + + + + + + + + +``` +```csharp +// Using percentage +bottomSheet.BottomSheetContentWidth = new BottomSheetLength(80, true); + +// Using absolute value +bottomSheet.BottomSheetContentWidth = new BottomSheetLength(300, false); +``` + +Here is an example setting the width of the `BottomSheetContent` to 400 (absolute value) and 50%: + +![.NET MAUI BottomSheet width](images/bottomsheet-width.gif) + +> For a runnable example with setting the BottomSheet Width, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **BottomSheet > Features** category. + +## Handle + +The BottomSheet exposes a visual cue which indicates the control can be dragged. You can customize the handle by using the `HandleStyle` (`Style` with target type `BottomSheetHandle`) property. + +For more details, review the [BottomSheet Handle Styling]({%slug bottomsheet-styling%}#handle-styling) article. + +## See Also + +- [Animation when opening and closing the bottom sheet]({%slug bottomsheet-animation%}) +- [Style the BottomSheet]({%slug bottomsheet-styling%}) +- [Events]({%slug bottomsheet-events%}) +- [Methods]({%slug bottomsheet-methods%}) \ No newline at end of file diff --git a/controls/bottomsheet/content.md b/controls/bottomsheet/content.md new file mode 100644 index 000000000..2f3897b98 --- /dev/null +++ b/controls/bottomsheet/content.md @@ -0,0 +1,48 @@ +--- +title: Content +page_title: .NET MAUI BottomSheet Documentation - Content +description: Learn more about how to set content inside the Telerik UI for .NET MAUI BottomSheet control. +position: 3 +slug: bottomsheet-content +--- + +# .NET MAUI BottomSheet Content + +The BottomSheet control has two distinct content areas: the _main content_ that serves as the background layer, and the _bottom sheet content_ that slides up to overlay additional information or functionality. You set the main content as the primary child of the control, while the `BottomSheetContent` (`View`) property defines what appears in the sliding panel. + +Here is a sample scenario when using the Telerik .NET MAUI [`RadCollectionView`]({%slug collectionview-overview%}) in the main content of the BottomSheet and a detailed view in the `BottomSheetContent`. + +**1.** Define the sample data model: + + + +**2.** Define the `ViewModel`: + + + +**3.** Define the BottomSheet in XAML with `RadCollectionView`: + + + +**4.** Add the `telerik` namespace: + +```XAML +xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" +``` + +**5.** Add the following code for the `RadCollectionView.ItemTapped` event handler: + + + +This is the result on Android: + +![.NET MAUI BottomSheet Content](images/bottomsheet-content.png) + +> For a runnable example with the BottomSheet Content scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and review all **BottomSheet** example. + +## See Also + +- [Animation when opening and closing the bottom sheet]({%slug bottomsheet-animation%}) +- [Style the BottomSheet]({%slug bottomsheet-styling%}) +- [Events]({%slug bottomsheet-events%}) +- [Methods]({%slug bottomsheet-methods%}) \ No newline at end of file diff --git a/controls/bottomsheet/events.md b/controls/bottomsheet/events.md new file mode 100644 index 000000000..26037f63d --- /dev/null +++ b/controls/bottomsheet/events.md @@ -0,0 +1,21 @@ +--- +title: Events +page_title: .NET MAUI BottomSheet Documentation - Events +description: Learn about the PositionChanged event in Telerik UI for .NET MAUI BottomSheet and how to handle position changes when the bottom sheet is dragged or programmatically moved. +position: 9 +slug: bottomsheet-events +--- + +# .NET MAUI BottomSheet Events + +The BottomSheet `StateChanging` event is useful for tracking user interactions and responding to sheet movements. Use this event to update UI elements based on the sheet's state, implement custom animations, or trigger actions when the sheet reaches specific state during drag gestures or programmatic state changes. +The `StateChanging` event handler receives two parameters: +* The `sender` argument, which is of type `object`, but can be cast to the `RadBottomSheet` type. +* The `BottomSheetStateChangingEventArgs` object, which has a reference to the new position of the bottom sheet through its `Position` property (of type `double`). + +## See Also + +- [Configure the BottomSheet]({%slug bottomsheet-configuration%}) +- [Animation when opening and closing the bottom sheet]({%slug bottomsheet-animation%}) +- [Style the BottomSheet]({%slug bottomsheet-styling%}) +- [Methods]({%slug bottomsheet-methods%}) \ No newline at end of file diff --git a/controls/bottomsheet/getting-started.md b/controls/bottomsheet/getting-started.md new file mode 100644 index 000000000..76b897df4 --- /dev/null +++ b/controls/bottomsheet/getting-started.md @@ -0,0 +1,89 @@ +--- +title: Getting Started +page_title: .NET MAUI BottomSheet Documentation - Getting Started +description: Get started with the Telerik UI for .NET MAUI BottomSheet control and learn how to add the control to your .NET MAUI application. +position: 2 +slug: bottomsheet-getting-started +--- + +# Getting Started with the .NET MAUI BottomSheet + +This guide provides the information you need to start using the Telerik UI for .NET MAUI BottomSheet by adding the control to your project. + +At the end, you will achieve the following result. + +![BottomSheet Getting Started](images/bottomsheet-getting-started.png) + +## Prerequisites + +Before adding the BottomSheet, 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). + +## Define the Control + +**1.** When your .NET MAUI application is set up, you are ready to add the BottomSheet 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.** Add the code for opening the BottomSheet view: + + + +**4.** Add the code for closing the BottomSheet view: + + + +**5.** 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 BottomSheet Getting Started scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **BottomSheet > Getting Started**. + +## Additional Resources + +- [.NET MAUI BottomSheet Product Page](https://www.telerik.com/maui-ui/bottomsheet) +- [.NET MAUI BottomSheet Forum Page](https://www.telerik.com/forums/maui?tagId=1763) +- [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) + +## See Also + +- [Configure the BottomSheet]({%slug bottomsheet-configuration%}) +- [Animation when opening and closing the bottom sheet]({%slug bottomsheet-animation%}) +- [Style the BottomSheet]({%slug bottomsheet-styling%}) +- [Events]({%slug bottomsheet-events%}) +- [Methods]({%slug bottomsheet-methods%}) diff --git a/controls/bottomsheet/images/bottomsheet-content.png b/controls/bottomsheet/images/bottomsheet-content.png new file mode 100644 index 000000000..31dc7e0a8 Binary files /dev/null and b/controls/bottomsheet/images/bottomsheet-content.png differ diff --git a/controls/bottomsheet/images/bottomsheet-control-template.png b/controls/bottomsheet/images/bottomsheet-control-template.png new file mode 100644 index 000000000..a4ba34c91 Binary files /dev/null and b/controls/bottomsheet/images/bottomsheet-control-template.png differ diff --git a/controls/bottomsheet/images/bottomsheet-getting-started.png b/controls/bottomsheet/images/bottomsheet-getting-started.png new file mode 100644 index 000000000..29a0a2f8d Binary files /dev/null and b/controls/bottomsheet/images/bottomsheet-getting-started.png differ diff --git a/controls/bottomsheet/images/bottomsheet-handle-styling.png b/controls/bottomsheet/images/bottomsheet-handle-styling.png new file mode 100644 index 000000000..685399732 Binary files /dev/null and b/controls/bottomsheet/images/bottomsheet-handle-styling.png differ diff --git a/controls/bottomsheet/images/bottomsheet-methods.gif b/controls/bottomsheet/images/bottomsheet-methods.gif new file mode 100644 index 000000000..1058e0c81 Binary files /dev/null and b/controls/bottomsheet/images/bottomsheet-methods.gif differ diff --git a/controls/bottomsheet/images/bottomsheet-overview.png b/controls/bottomsheet/images/bottomsheet-overview.png new file mode 100644 index 000000000..5967f3d99 Binary files /dev/null and b/controls/bottomsheet/images/bottomsheet-overview.png differ diff --git a/controls/bottomsheet/images/bottomsheet-states.png b/controls/bottomsheet/images/bottomsheet-states.png new file mode 100644 index 000000000..7b02a5e36 Binary files /dev/null and b/controls/bottomsheet/images/bottomsheet-states.png differ diff --git a/controls/bottomsheet/images/bottomsheet-styling.png b/controls/bottomsheet/images/bottomsheet-styling.png new file mode 100644 index 000000000..7d8fac2e2 Binary files /dev/null and b/controls/bottomsheet/images/bottomsheet-styling.png differ diff --git a/controls/bottomsheet/images/bottomsheet-swipe-gesture.gif b/controls/bottomsheet/images/bottomsheet-swipe-gesture.gif new file mode 100644 index 000000000..8141924b5 Binary files /dev/null and b/controls/bottomsheet/images/bottomsheet-swipe-gesture.gif differ diff --git a/controls/bottomsheet/images/bottomsheet-visual-structure.png b/controls/bottomsheet/images/bottomsheet-visual-structure.png new file mode 100644 index 000000000..dcfef9f6c Binary files /dev/null and b/controls/bottomsheet/images/bottomsheet-visual-structure.png differ diff --git a/controls/bottomsheet/images/bottomsheet-width.gif b/controls/bottomsheet/images/bottomsheet-width.gif new file mode 100644 index 000000000..97954ff8e Binary files /dev/null and b/controls/bottomsheet/images/bottomsheet-width.gif differ diff --git a/controls/bottomsheet/methods.md b/controls/bottomsheet/methods.md new file mode 100644 index 000000000..2fb4d13f4 --- /dev/null +++ b/controls/bottomsheet/methods.md @@ -0,0 +1,39 @@ +--- +title: Methods +page_title: .NET MAUI BottomSheet Documentation - Methods +description: Learn about the methods that the Telerik UI for .NET MAUI BottomSheet control exposes and find out how to use them to configure the UI component. +position: 11 +slug: bottomsheet-methods +--- + +# .NET MAUI BottomSheet Methods + +The Telerik UI for .NET MAUI BottomSheet component exposes the `GoToBottomSheetState(string name)` method. Use the method to transition the bottom sheet to a specified [state]({%slug bottomsheet-configuration%}). + +The example shows how to use the `GoToBottomSheetState(string name)` method: + +**1** Define the BottomSheet in XAML: + + + +**2.** Add the `telerik` namespace: + +```XAML +xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" +``` + +**3.** Call the `GoToBottomSheetState()` method with corresponding state name: + + + +This is the result on Android: + +![.NET MAUI BottomSheet Methods](images/bottomsheet-methods.gif) + +## See Also + +- [Configure the BottomSheet]({%slug bottomsheet-configuration%}) +- [Animation when opening and closing the bottom sheet]({%slug bottomsheet-animation%}) +- [Style the BottomSheet]({%slug bottomsheet-styling%}) +- [Events]({%slug bottomsheet-events%}) + diff --git a/controls/bottomsheet/overview.md b/controls/bottomsheet/overview.md new file mode 100644 index 000000000..ca713f65b --- /dev/null +++ b/controls/bottomsheet/overview.md @@ -0,0 +1,37 @@ +--- +title: Overview +page_title: .NET MAUI BottomSheet Documentation - Overview +description: Try now the Telerik UI for .NET MAUI BottomSheet that you can use to display action menus, various panels, previews, and more. +position: 0 +tags: .net maui, bottomsheet, ui for .net maui, .net maui conrols, microsoft .net maui +slug: bottomsheet-overview +--- + +# .NET MAUI BottomSheet Overview + +The Telerik UI for .NET MAUI BottomSheet is a UI component that slides up from the bottom of the screen to reveal more content. Use the BottomSheet to display additional information, provide the user with actions or give the option for secondary navigation. + +The control presents the information or actions related to the current screen but it does not cover the full screen. + +![.NET MAUI BottomSheet Overview](images/bottomsheet-overview.png "BottomSheet Overview") + +## Key Features of the Telerik .NET MAUI BottomSheet + +* [States]({%slug bottomsheet-configuration%}#states-built-in-transitions)—The BottomSheet control supports various states like `Full`, `Partial`, `Minimal`, and `Hidden`. +* [Visual Handle]({%slug bottomsheet-configuration%}#handle)—The BottomSheet exposes a visual cue which indicates the control can be dragged. +* [Width]({%slug bottomsheet-configuration%}#width)—The BottomSheet allows you to set the size of its bottom sheet view with an absolute value or percentage. +* [Setting Content]({%slug bottomsheet-content%})—The control allows you to set content by using the `BottomSheetContent` property. +* [Animation]({%slug bottomsheet-animation%})—The BottomSheet allows you to enable/disable the animation when opening/closing the bottom sheet view. +* [Flexible Styling API]({%slug bottomsheet-styling%})—Style the handle and the BottomSheet control by using the exposed styling API. +* [Events]({%slug bottomsheet-events%})—The BottomSheet exposes an event which occurs when the position of the bottom sheet changes. + +## Next Steps + +- [Getting Started with the Telerik UI for .NET MAUI BottomSheet]({% slug bottomsheet-getting-started %}) + +## See Also + +- [.NET MAUI BottomSheet Product Page](https://www.telerik.com/maui-ui/bottomsheet) +- [.NET MAUI BottomSheet Forum Page](https://www.telerik.com/forums/maui?tagId=1763) +- [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) diff --git a/controls/bottomsheet/styling.md b/controls/bottomsheet/styling.md new file mode 100644 index 000000000..944e3639f --- /dev/null +++ b/controls/bottomsheet/styling.md @@ -0,0 +1,92 @@ +--- +title: Styling +page_title: .NET MAUI BottomSheet Documentation - Styling +description: Learn how to customize the appearance of the Telerik UI for .NET MAUI BottomSheet control and its handle component using styling properties like colors, borders, and dimensions. +position: 15 +slug: bottomsheet-styling +--- + +# .NET MAUI BottomSheet Styling + +The BottomSheet control offers styling options for both the main container, the bottom sheet content view, and its draggable handle component. You can customize colors, borders, corner radius, and dimensions to match your application's design requirements and create a polished user experience. + +To style the BottomSheet control, use the `Style` property (`Style` with target type of `RadBottomSheet`). + +To style the view of the `BottomSheetContent`, use the `BottomSheetContentStyle` property (`Style` with target type of `telerik:BottomSheetContentView`). + +The available properties are described below: + +* `BackgroundColor` (`Color`)—Specifies the background color of the control. +* `BorderColor` (`Color`)—Specifies the border color around the control. +* `BorderBrush` (`Brush`)—Specifies the border brush around the control. +* `BorderThickness` (`Thickness`)—Specifies the border thickness around the control. +* `CornerRadius` (`Thickness`)—Specifies the corner radius of the border around the control. + +Here is an example of the BottomSheet styling. + +**1.** Define the BottomSheet in XAML: + + + +**2.** Define the `RadBottomSheet` style in page's resources: + + + +**3.** Define the `BottomSheetContentView` style in page's resources: + + + +**4.** Add the `telerik` namespace: + +```XAML +xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" +``` + +Here is the result of styling the BottomSheet and `BottomSheetContent`. The `BottomSheetContent` opens when tapping on an item from the CollectionView: + +![.NET MAUI BottomSheet Styling](images/bottomsheet-styling.png) + +> For a runnable example with the BottomSheet Style scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **BottomSheet > Styling** category. + +## Styling the BottomSheet Handle + +The handle of the BottomSheet is a small visual indicator at the top of the control that users can grab to drag and resize the panel. You can style the handle by setting the `HandleStyle` property to the `RadBottomSheet`. The target type of the `HandleStyle` is `BottomSheetHandle`. + +The available properties are described below: + +* `BackgroundColor` (`Color`)—Specifies the background color of the control. +* `BorderColor` (`Color`)—Specifies the border color around the control. +* `BorderBrush` (`Brush`)—Specifies the border brush around the control. +* `BorderThickness` (`Thickness`)—Specifies the border thickness around the control. +* `CornerRadius` (`Thickness`)—Specifies the corner radius of the border around the control. +* `WidthRequest` (`double`)—Specifies the width of the handle. +* `HeightRequest` (`double`)—Specifies the height of the handle. + +Here is an example of the BottomSheet handle styling. + +**1.** Define the BottomSheet in XAML: + + + +**2.** Define the `BottomSheetHandle` style in page's resources: + + + +**3.** Add the `telerik` namespace: + +```XAML +xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" +``` + +Here is the result of styling the handle. The BottomSheet content opens when tapping on an item from the CollectionView: + +![.NET MAUI BottomSheet Styling](images/bottomsheet-handle-styling.png) + +> For a runnable example with the BottomSheet Handle Style scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **BottomSheet > Styling** category. + +## See Also + +- [Configure the BottomSheet]({%slug bottomsheet-configuration%}) +- [Animation when opening and closing the bottom sheet]({%slug bottomsheet-animation%}) +- [Events]({%slug bottomsheet-events%}) +- [Methods]({%slug bottomsheet-methods%}) \ No newline at end of file diff --git a/controls/bottomsheet/swipe-gesture.md b/controls/bottomsheet/swipe-gesture.md new file mode 100644 index 000000000..9be943021 --- /dev/null +++ b/controls/bottomsheet/swipe-gesture.md @@ -0,0 +1,29 @@ +--- +title: Swipe Gesture +page_title: .NET MAUI BottomSheet Documentation - Swipe Gesture +description: Learn how to enable or disable swipe gestures for the Telerik UI for .NET MAUI BottomSheet control to control user interaction and accessibility. +position: 3 +slug: bottomsheet-swipe-gesture +--- + +# .NET MAUI BottomSheet Swiping + +The BottomSheet control supports intuitive swipe gestures that allow users to close and resize the sheet by dragging up or down on the content area. +This touch-friendly interaction provides a natural way for users to control the BottomSheet's visibility and gives the smooth transition between states with animation, enhancing the overall user experience on mobile and desktop devices. + +You can disable the swipe gesture by setting the `IsSwipeEnabled` (`bool`) property. The default value is `true`. + +> The animation is always enabled when using the swipe gesture to change the states of the BottomSheet. You can configure the animation settings using the `AnimationDuration` and `AnimationEasing` properties. + +Here is a video how the swipe gesture works in the BottomSheet control: + +![BottomSheet Swipe Gesture](images/bottomsheet-swipe-gesture.gif "BottomSheet Swipe Gesture") + +> For a runnable example with the BottomSheet Swipe scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **BottomSheet > Features** category. + +## See Also + +- [Animation when opening and closing the bottom sheet]({%slug bottomsheet-animation%}) +- [Style the BottomSheet]({%slug bottomsheet-styling%}) +- [Events]({%slug bottomsheet-events%}) +- [Methods]({%slug bottomsheet-methods%}) \ No newline at end of file diff --git a/controls/bottomsheet/visual-structure.md b/controls/bottomsheet/visual-structure.md new file mode 100644 index 000000000..dbad62f2c --- /dev/null +++ b/controls/bottomsheet/visual-structure.md @@ -0,0 +1,27 @@ +--- +title: Visual Structure +page_title: .NET MAUI BottomSheet Documentation - Visual Structure +description: Learn more about the visual elements used in the Telerik UI for .NET MAUI BottomSheet control. +position: 1 +slug: bottomsheet-visual-structure +--- + +# .NET MAUI BottomSheet Visual Structure + +The visual structure of the [.NET MAUI BottomSheet]({%slug bottomsheet-overview%}) represents the anatomy of the UI control. Being familiar with the visual elements of the BottomSheet allows you to quickly find the information required to configure them. + +The following image shows the anatomy of the BottomSheet. + +![Telerik UI for .NET MAUI BottomSheet Visual Structure](images/bottomsheet-visual-structure.png "Visual elements of the .NET MAUI BottomSheet control") + +* **BottomSheet Main Content**—Represents the main content of the BottomSheet. +* **BottomSheet Content**—Represents the content of the BottomSheet that slides up from the bottom of the screen. +* **BottomSheet Handle**—Represents a visual cue which indicates the control can be dragged. + +## See Also + +- [Configure the BottomSheet]({%slug bottomsheet-configuration%}) +- [Animation when opening and closing the bottom sheet]({%slug bottomsheet-animation%}) +- [Style the BottomSheet]({%slug bottomsheet-styling%}) +- [Events]({%slug bottomsheet-events%}) +- [Methods]({%slug bottomsheet-methods%}) \ No newline at end of file diff --git a/controls/collectionview/accessibility/screen-reader.md b/controls/collectionview/accessibility/screen-reader.md index b587a75af..ed38324a5 100644 --- a/controls/collectionview/accessibility/screen-reader.md +++ b/controls/collectionview/accessibility/screen-reader.md @@ -7,13 +7,26 @@ slug: collectionview-accessibility-screen-reader tags: accessibility, collectionview, screen reader, accessibility support, dotnet maui --- -# .NET MAUI CollectionView Screen Reader Support (Android and iOS) +# .NET MAUI CollectionView Screen Reader Support The Telerik UI for .NET MAUI CollectionView provides extensive accessibility support and enables users with disabilities to acquire complete control over its features. -The CollectionView allows the users to use the Android (TalkBack) and iOS (VoiceOver) screen readers for voice descriptions of the elements inside the CollectionView. +The CollectionView allows users to use the Android (TalkBack), WinUI (Narrator), iOS and MacCatalyst (VoiceOver) screen readers for voice descriptions of the elements inside the CollectionView. -![.NET MAUI ColelctionView Screen Reader Support](../images/collectionview-screen-reader.png) +The Telerik MAUI CollectionView exposes an `AutomationManager` class which controls the automation behavior of the control. The `AutomationManager` class is responsible for managing the automation features of the CollectionView, such as enabling or disabling screen reader support. + +## WinUI Automation Behavior + +The `AutomationManager` class exposes the `EnableWindowsAutomation` (`bool`) property, which determines whether the automation-related logic is enabled for WinUI. The default value is `false`, which means that the automation logic is disabled by default. To enable the automation logic, set the `EnableWindowsAutomation` property to `true`. + +Here's how to enable WinUI automation support: + +```csharp +// Enable Windows automation +AutomationManager.EnableWindowsAutomation = true; +``` + +![.NET MAUI CollectionView Screen Reader Support](../images/collectionview-screen-reader.png) ## See Also diff --git a/controls/collectionview/grouping/expand-collapse.md b/controls/collectionview/grouping/expand-collapse.md index a305451c5..46e5c39d8 100644 --- a/controls/collectionview/grouping/expand-collapse.md +++ b/controls/collectionview/grouping/expand-collapse.md @@ -13,6 +13,8 @@ The CollectionView supports group expand and collapse operations either through This section provides an overview of the methods used to control the expand/collapse state of the CollectionView groups. +By default, all groups are auto-expanded when the CollectionView initially loads. You can load the CollectionView with all groups collapsed by setting the `AutoExpandGroups` (`bool`) property to `false`. The default value of the `AutoExpandGroups` property is `true`. + ## Get the Grouped CollectionView Items To manipulate the collapsible CollectionView groups, first you will need to call its `GetDataView()` method. In short, the `GetDataView()` method provides a view of the `ItemsSource` after all the sorting, grouping, and filtering operations are applied. The return type is `IDataViewCollection` which exposes the `Expand` and `Collapse` methods. diff --git a/controls/collectionview/grouping/overview.md b/controls/collectionview/grouping/overview.md index 0d72efcb1..8fd4c57ff 100644 --- a/controls/collectionview/grouping/overview.md +++ b/controls/collectionview/grouping/overview.md @@ -24,11 +24,13 @@ When a group descriptor is applied, the default group template is visualized. Re The control supports groups expand and collapse operations through the UI by tapping on the group headers. +By default, all groups are auto-expanded when the CollectionView initially loads. You can load the CollectionView with all groups collapsed by setting the `AutoExpandGroups` (`bool`) property to `false`. The default value of the `AutoExpandGroups` property is `true`. + ## Bindable GroupDescriptor Users can control the `GroupDescriptors` collection by using MVVM. -## Sticky Group Headers (Mobile Only) +## Sticky Group Headers The CollectionView provides the option to set its [group headers as sticky]({%slug collectionview-sticky-group-header%}). This means the `GroupHeader` UI element "freezes" while scrolling through the items until the whole group is scrolled away. As you scroll through the next group, the currently stuck group header will be pushed by the next group header. In a multi-level grouping scenario, the last inner group from the parent group will be sticky. diff --git a/controls/collectionview/grouping/sticky-group-header.md b/controls/collectionview/grouping/sticky-group-header.md index a58cb376d..978b0ea8d 100644 --- a/controls/collectionview/grouping/sticky-group-header.md +++ b/controls/collectionview/grouping/sticky-group-header.md @@ -7,9 +7,9 @@ slug: collectionview-sticky-group-header tags: group, collectionview, groupdescriptor, sticky, group, headers --- -# .NET MAUI CollectionView Sticky Group Headers (Android and iOS) +# .NET MAUI CollectionView Sticky Group Headers -The CollectionView for .NET MAUI provides the option to set its group headers as sticky (only on Android and iOS). This means the `GroupHeader` UI element "freezes" while scrolling through the items until the whole group is scrolled away. As you scroll through the next group, the currently stuck group header will be pushed by the next group header. +The CollectionView for .NET MAUI provides the option to set its group headers as sticky in your desktop and mobile applications. This means the `GroupHeader` UI element "freezes" while scrolling through the items until the whole group is scrolled away. As you scroll through the next group, the currently stuck group header will be pushed by the next group header. In a multi-level grouping scenario, the last inner group from the parent group will be sticky. diff --git a/controls/datagrid/grouping/overview.md b/controls/datagrid/grouping/overview.md index 8eceff9b0..691574605 100644 --- a/controls/datagrid/grouping/overview.md +++ b/controls/datagrid/grouping/overview.md @@ -34,7 +34,7 @@ Programmatic grouping can be done by adding descriptors to the `GroupDescriptors The [Telerik UI for .NET MAUI DataGrid]({%slug datagrid-overview%}) lets you expand and collapse a group either through the UI—by tapping on the group headers—or programmatically. -The DataGrid allows you to collapse all groups and newly added groups by setting the `AutoExpandGroups` (`bool`) property. The default value of the `AutoExpandGroups` property is `false`, which means, all groups are expanded by default. +The DataGrid allows you to collapse all groups and newly added groups by setting the `AutoExpandGroups` (`bool`) property. The default value of the `AutoExpandGroups` property is `true`, which means, all groups are expanded by default. ## Group Headers Customization diff --git a/controls/speechtotextbutton/commands.md b/controls/speechtotextbutton/commands.md new file mode 100644 index 000000000..caef42191 --- /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 000000000..2d9a66a62 --- /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 000000000..aeb6d1981 --- /dev/null +++ b/controls/speechtotextbutton/custom-recognizer.md @@ -0,0 +1,50 @@ +--- +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: + + + +This is the result on Android: + +![.NET MAUI SpeechToTextButton Custom Recognizer](images/speechtotextbutton-custom-recognizer.gif) + +> 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 000000000..bdcb61a04 --- /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 000000000..913038676 --- /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 000000000..2be20a322 Binary files /dev/null and b/controls/speechtotextbutton/images/speechtotext-architecture.png differ diff --git a/controls/speechtotextbutton/images/speechtotextbutton-custom-recognizer.gif b/controls/speechtotextbutton/images/speechtotextbutton-custom-recognizer.gif new file mode 100644 index 000000000..6fc60bf33 Binary files /dev/null and b/controls/speechtotextbutton/images/speechtotextbutton-custom-recognizer.gif differ diff --git a/controls/speechtotextbutton/images/speechtotextbutton-getting-started.png b/controls/speechtotextbutton/images/speechtotextbutton-getting-started.png new file mode 100644 index 000000000..1a72f53ca Binary files /dev/null and b/controls/speechtotextbutton/images/speechtotextbutton-getting-started.png differ diff --git a/controls/speechtotextbutton/images/speechtotextbutton-overview.png b/controls/speechtotextbutton/images/speechtotextbutton-overview.png new file mode 100644 index 000000000..448fa06e1 Binary files /dev/null and b/controls/speechtotextbutton/images/speechtotextbutton-overview.png differ diff --git a/controls/speechtotextbutton/images/speechtotextbutton-styling.gif b/controls/speechtotextbutton/images/speechtotextbutton-styling.gif new file mode 100644 index 000000000..ca4ca3718 Binary files /dev/null and b/controls/speechtotextbutton/images/speechtotextbutton-styling.gif differ diff --git a/controls/speechtotextbutton/images/speechtotextbutton-visual-structure.png b/controls/speechtotextbutton/images/speechtotextbutton-visual-structure.png new file mode 100644 index 000000000..c06d34ec5 Binary files /dev/null and b/controls/speechtotextbutton/images/speechtotextbutton-visual-structure.png differ diff --git a/controls/speechtotextbutton/overview.md b/controls/speechtotextbutton/overview.md new file mode 100644 index 000000000..0af712fe1 --- /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/speechtotextbutton-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 000000000..4c49b22c9 --- /dev/null +++ b/controls/speechtotextbutton/states.md @@ -0,0 +1,25 @@ +--- +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 000000000..4762cea87 --- /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 000000000..5395ac2b9 --- /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 000000000..dcfdfe04f --- /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 000000000..a7ba3b84f --- /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 000000000..a04229166 --- /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 69976995f..17058ca80 100644 --- a/spell-ignore.txt +++ b/spell-ignore.txt @@ -86,4 +86,8 @@ TextInput telerik TreeDataGrid Theming -MCP \ No newline at end of file +SpeechToTextButton +SpeechToText +BottomSheet +MCP +MacCatalyst \ No newline at end of file