Merge pull request #1221 from telerik/didi/images

add images

Author: didiyordanova

controls/bottomsheet/configuration.md

@@ -23,6 +23,8 @@ The control includes four built-in states with predefined heights:
 * `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`:
@@ -111,6 +113,10 @@ bottomSheet.BottomSheetContentWidth = new BottomSheetLength(80, true);
 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

controls/bottomsheet/content.md

@@ -40,19 +40,6 @@ This is the result on Android:
 
 > For a runnable example with the BottomSheet Content scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and review all **BottomSheet** example.
 
-## Setting Custom Control Template
-
-> If you want to review the default BottomSheet templates, add the [TelerikTheming]({%slug themes-overview%}) to the project and go to `TelerikTheming/Styles/Platform/BottomSheet.xaml` file.
-
-
-Here is an example setting custom `ControlTemplate`.
-
-<snippet id='bottomsheet-custom-control-template' />
-
-This is the result on Android:
-
-![.NET MAUI BottomSheet Control Template](images/bottomsheet-control-template.png)
-
 ## See Also
 
 - [Animation when opening and closing the bottom sheet]({%slug bottomsheet-animation%})

controls/bottomsheet/images/bottomsheet-states.png

@@ -28,7 +28,7 @@ xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
 
 This is the result on Android:
 
-![.NET MAUI BottomSheet Methods](images/botomsheet-methods.gif)
+![.NET MAUI BottomSheet Methods](images/bottomsheet-methods.gif)
 
 ## See Also
 

controls/bottomsheet/images/bottomsheet-swipe-gesture.gif

@@ -15,6 +15,10 @@ You can disable the swipe gesture by setting the `IsSwipeEnabled` (`bool`) prope
 
 > 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

controls/bottomsheet/images/bottomsheet-visual-structure.png

@@ -14,4 +14,14 @@ 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%})

controls/bottomsheet/images/bottomsheet-width.gif

@@ -37,6 +37,10 @@ xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
 
 <snippet id='speechtotext-events-speech-recognized' />
 
+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