update articles and add images part 2

Author: didiyordanova

controls/accordion/animation.md

@@ -10,13 +10,13 @@ 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` (`bool`) 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`.
+* `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

controls/bottomsheet/animation.md

@@ -1,22 +1,22 @@
 ---
 title: Animation
 page_title: .NET MAUI BottomSheet Documentation - Animation
-description: Try now the Telerik BottomSheet for .NET MAUI that delivers an animation when opening/closing the bottom view.
+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
 
-Telerik .NET MAUI BottomSheet provides an option to set the animation when opening/closing the bottom view.
+Adding an animation to the BottomSheet provides visual continuity and makes the interface feel more responsive and polished. The Telerik .NET MAUI BottomSheet provides an option to set the animation when opening/closing the bottom view.
 
-## Animation while opening/closing
+## Animation while Opening/Closing
 
-To enable or disable the animation you need to use the `IsAnimationEnabled` (`bool`) property of `RadBottomSheet`. By default, the animation is enabled.
+To enable or disable the animation, use the `IsAnimationEnabled` (`bool`) property of `RadBottomSheet`. By default, the animation is enabled.
 
-You can also customize the duration and easing through `AnimationDuration` and `AnimationEasing` properties.
+You can also customize the animation's duration and easing through the `AnimationDuration` and `AnimationEasing` properties.
 
-* `AnimationDuration`(`uint`)—Defines the duration of the animation while opening/closing the bottom view. The default value is `1000`.
+* `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.

controls/bottomsheet/configuration.md

@@ -8,62 +8,122 @@ slug: bottomsheet-configuration
 
 # .NET MAUI BottomSheet Configuration
 
-The purpose of this help article is to show you how to configure the states and width of the Telerik .NET MAUI BottomSheet control.
+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 (Built-in Transitions)
+## States
 
-The Telerik UI for .NET MAUI BottomSheet control exposes predefined states (transitions). You can specify the state by using following options:
+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.
 
-* `CurrentState`(of type `BottomSheetState`) property. The property specifies the current state of the bottom sheet. The available options for `CurrentState` are:
+### Predefined States
 
-	* `Hidden`(the default one)—Represents a 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%`.
+The control includes four built-in states with predefined heights:
 
-The `BottomSheetState` class represents the state of a bottom sheet.
+* `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%`.
 
-The first instance of the class has as a parameters the name of the bottom sheet state and the height of the bottom sheet.
+### Setting States
 
-```C#
-public BottomSheetState(string name, BottomSheetSize height)
+You can specify the current state using the `State` property of type `BottomSheetState`:
+
+```xaml
+<telerik:RadBottomSheet x:Name="bottomSheet" 
+                        State="Partial">
+    <!-- Content -->
+</telerik:RadBottomSheet>
+```
+
+### Custom States
+
+Create custom states using the `BottomSheetState` class constructors:
+
+* Using `BottomSheetLength`
+
+```csharp
+public BottomSheetState(string name, BottomSheetLength height)
 ```
 
-The second instance of the class has as a parameters the name of the bottom sheet state and the height of the bottom sheet, and if the size parameter represents a percentage.
+* Using `double value`
 
-```C#
+```csharp
 public BottomSheetState(string name, double size, bool isPercentage = false)
 ```
 
-* Calling the [`GoToBottomSheetState(string name)` method]({%slug bottomsheet-methods%}). Where the `string name` is the name of the predefined sates.
-	* `Hidden`&mdash;`HiddenStateName`.
-	* `Minimal`&mdash;`StateName`.
-	* `Partial`&mdash;`PartialStateName`.
-	* `Full`&mdash;`FullStateName`.
+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:
 
 <snippet id='open-bottomsheet-view' />
 
-The `UseDefaultStates`(`bool`) property allows you to specify whether the control will generate the default states. The default value is `true`.
+Here is an example setting a custom state:
 
-The BottomSheet provides a read-only collection&mdash;`States` of type `ObservableCollection<BottomSheetState>`. The collection contains the available sheet states for the bottom sheet.
+```csharp
+// Navigate to custom states
+var customState = new BottomSheetState("Custom", 30, true);
+bottomSheet.GoToBottomSheetState("Custom");
+```
+
+### Auto-Generated States
+
+You can control the generation of default states using the `AutoGenerateStates` property.
+
+```xaml
+<telerik:RadBottomSheet AutoGenerateStates="False">
+
+</telerik:RadBottomSheet>
+```
+
+The default value is `true`, which means the four predefined states are populated in the `States` collection.
+
+### States Collection
+
+The BottomSheet provides a read-only `States` collection of type `ObservableCollection<BottomSheetState>` 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, by using the `BottomSheetWidth` (`struct` of type `BottomSheetSize`) property. You can set a percentage or an absolute value to the `BottomSheetWidth`.
+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
+<!-- Percentage width -->
+<telerik:RadBottomSheet BottomSheetContentWidth="80%">
+    <!-- Content -->
+</telerik:RadBottomSheet>
 
+<!-- Absolute width -->
+<telerik:RadBottomSheet BottomSheetContentWidth="300">
+    <!-- Content -->
+</telerik:RadBottomSheet>
+```
+```csharp
+// Using percentage
+bottomSheet.BottomSheetContentWidth = new BottomSheetLength(80, true);
+
+// Using absolute value
+bottomSheet.BottomSheetContentWidth = new BottomSheetLength(300, false);
+```
 
 > 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.
+For more details, review the [BottomSheet Handle Styling]({%slug bottomsheet-styling%}#handle-styling) article.
 
 ## See Also
 

controls/bottomsheet/content.md

@@ -1,20 +1,14 @@
 ---
 title: Content
 page_title: .NET MAUI BottomSheet Documentation - Content
-description: Learn more about how to set a content inside the Telerik UI for .NET MAUI BottomSheet control.
+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 purpose of this help article is to show you how to define content in the Telerik .NET MAUI BottomSheet control.
-
-The BottomSheet control contains a main content and a bottom sheet content.
-
-* The main content is the part that is always visible in the control.
-
-* Set a content to the bottom sheet using the `BottomSheetContent` (`View`) property.
+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`.
 
@@ -40,8 +34,25 @@ xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
 
 <snippet id='bottomsheet-content-tapped-event' />
 
+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.
 
+## 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/events.md

@@ -1,19 +1,19 @@
 ---
 title: Events
 page_title: .NET MAUI BottomSheet Documentation - Events
-description: 
+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 .NET MAUI BottomSheet exposes the `PositionChanged` event which is raised when the position of the bottom sheet changes. 
-The `PositionChanged` event handler receives two parameters: 
-* The `sender` argument which is of type `object`, but can be cast to the `RadBottomSheet` type.
-* The `BottomSheetPositionChangedEventArgs` object which has a reference to the new position of the bottom sheet through its `Position`(of type `double`) property.
+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
+## See Also
 
 - [Configure the BottomSheet]({%slug bottomsheet-configuration%})
 - [Animation when opening and closing the bottom sheet]({%slug bottomsheet-animation%})

controls/bottomsheet/getting-started.md

@@ -1,7 +1,7 @@
 ---
 title: Getting Started
 page_title: .NET MAUI BottomSheet Documentation - Getting Started
-description: Get started with the Telerik UI for .NET MAUI Bottom Sheet control and learn how to add the control to your .NET MAUI application.
+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
 ---
@@ -26,7 +26,7 @@ Before adding the BottomSheet, you need to:
 
 ## Define the Control
 
-**1.** When the your .NET MAUI application is set up, you are ready to add the BottomSheet control to your page.
+**1.** When your .NET MAUI application is set up, you are ready to add the BottomSheet control to your page.
 
 <snippet id='bottomsheet-getting-started-xaml' />
 <snippet id='bottomsheet-getting-started-csharp' />