Merged from master

controls/button/getting-started.md

@@ -10,9 +10,13 @@ slug: button-getting-started
 
 This guide provides the information you need to start using the Telerik UI for .NET MAUI Button by adding the control to your project.
 
+This is the default look of the `RadButton` control:
+
+![.NET MAUI Button Default Look](images/button-default-look.png)
+
 At the end, you will achieve the following result.
 
-![Button Getting Started](images/button-getting-started.png)
+![.NET MAUI Button Getting Started](images/button-getting-started.png)
 
 ## Prerequisites
 
@@ -42,11 +46,10 @@ xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
 
 **4.** 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
- {
+```C#
+using Telerik.Maui.Controls.Compatibility;
+public static class MauiProgram
+{
 	public static MauiApp CreateMauiApp()
 	{
 		var builder = MauiApp.CreateBuilder();
@@ -57,11 +60,10 @@ xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
 			{
 				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
 			});
-
 		return builder.Build();
 	}
- }           
- ```
+}           
+```
 
 > For a runnable example with the Button Getting Started scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **Button > Getting Started**.
 

controls/button/overview.md

@@ -12,7 +12,7 @@ slug: button-overview
 
 The Telerik UI for .NET MAUI Button control enhances the functionality of the standard .NET MAUI Button by providing options for customizing its look and feel. Additionally, it enables you to add borders, set its transparency, align its content, define backgrounds, and render images.
 
-![Button Overview](images/button-overview.png "Button for .NET MAUI")
+![.NET MAUI Button Overview](images/button-overview.png "Button for .NET MAUI")
 
 ## Key Features
 

controls/chat/styling.md

@@ -25,6 +25,11 @@ To customize the different parts of the control, you can use the following built
 
 - `OutgoingLabelStyle` (target type `Label`)—Defines the style of the label of the outgoing message.
 
+In addition, the following properties set the background of the Chat:
+
+* `BackgroundColor`(`Color`)—Defines the background color of the Chat control.
+* `InputAreaBackgroundColor`(`Color`)—Defines the bacgkround color of the area that the input elements (entry and button) reside.
+
 ## Customize the Chat Entry
 
 You can customize the `ChatEntry` with an implicit style. The example below shows how to customize the chat entry in your Chat control. The `ChatEntry` represents the entry used for writing messages in the Telerik UI for .NET MAUI Chat control.

controls/checkbox/xamarin-migration.md

@@ -28,6 +28,8 @@ The tables in the following sections list any differences between the APIs of th
 | N/A | `CornerRadius` |
 | `CheckBoxUserCommand` | N/A |
 
+Review the [Implementing the CheckBoxUserCommand Behavior When Migrating from Xamarin CheckBox to MAUI CheckBox]({%slug migrating-xamarin-checkbox-maui-checkbox%}) how-to article for more details how to define a command when the Telerik .NET MAUI CheckBox state changes. 
+
 ## See Also
 
 * [Migrating from Xamarin.Forms to .NET MAUI]({% slug migrate-to-net-maui %})

controls/datagrid/columns/overview.md

@@ -84,6 +84,10 @@ xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
 
 <snippet id='datagrid-columns-converter' />
 
+Check the result in the image below:
+
+![Telerik .NET MAUI DataGrid Defining Columns](images/datagrid-columns.png)
+
 ## Columns Features
 
 Find below a quick overview of the DataGrid's Columns features.

controls/datagrid/filtering/filter-control-template.md

@@ -0,0 +1,39 @@
+---
+title: Filter Control Template
+page_title: .NET MAUI DataGrid Documentation - Filter Control Template
+description: "Review the Telerik .NET MAUI DataGrid Filter Control Template documentation article to learn more about applying custom filter to the DataGrid using FilterControlTemplate property."
+position: 2
+slug: datagrid-filter-control-template
+---
+
+# Filter Control Template
+
+The Telerik DataGrid provides a built-in filtering UI which enables users to quickly filter the displayed data. To customize the built-in filtering UI for a concrete column, use the `FilterControlTemplate` property of the typed columns (text, boolean, numeric, date, time, and picker columns). 
+
+In addition, as the [template column]({%slug datagrid-columns-template-column%}) does not provide a default filtering UI, with the `FilterControlTemplate` property you can allow users to filter data in template columns as well.
+
+* `FilterControlTemplate`(`DataTemplate`)—Specifies the user defined template used for Filtering UI. The template must contain an instance of the `Telerik.Maui.Controls.Compatibility.DataGrid.DataGridFilterControlBase` class. 
+
+Check a quick example on how to create a custom `FilterControlTemplate` below.
+
+**1.** Add the following snippet to declare a sample CityFilterControl - it should inherit from `Telerik.Maui.Controls.Compatibility.DataGrid.DataGridFilterControlBase`:
+
+<snippet id='datagrid-filter-template-filtercontrolbase' />
+
+**2.** Here is the code behind of the CityFilterControl:
+
+<snippet id='datagrid-filter-template-filtercontrolbase-code' />
+
+**3.** Add the `RadDataGrid` instance - you'd need to manually define the columns and apply the custom Filter Control Template through the `FilterTemplate` property:
+
+<snippet id='datagrid-filter-template-xaml' />
+
+Check the result below:
+
+![Telerik .NET MAUI DataGrid Custom Filter Control Template](images/datagrid-customfiltertemplate.gif)
+
+## See Also
+
+- [Columns Overview]({%slug datagrid-columns-overview%})
+- [Filtering UI]({%slug datagrid-filtering-ui%})
+- [Programmatic Filtering]({%slug datagrid-programmatic-filtering%})

controls/imageeditor/commands.md

@@ -116,7 +116,7 @@ xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
 
 **3.** Rotate Commands set on a Button
 
-<snippet id='imageeditor-commands-xaml'/>
+<snippet id='imageeditor-rotate-commands-xaml'/>
 
 **4.** Hue Command Executed on a Button click and a Slider for changing the Hue Value:
 

controls/imageeditor/migrate-from-xamarin.md

@@ -15,24 +15,66 @@ Telerik .NET MAUI ImageEditor control preserves the same API as Xamarin.Forms Im
 | Control | Control name | XAML Namespcace | C# Namespace|
 | --------------- | --------------- | --------------- | --------------- |
 | Xamarin ImageEditor | `RadImageEditor` | xmlns:telerikImageEditor="clr-namespace:Telerik.XamarinForms.ImageEditor;assembly=Telerik.XamarinForms.ImageEditor" | using Telerik.XamarinForms.ImageEditor; |
+| Xamarin ImageEditorToolbar | `RadImageEditorToolbar` | xmlns:telerikImageEditor="clr-namespace:Telerik.XamarinForms.ImageEditor;assembly=Telerik.XamarinForms.ImageEditor" | using Telerik.XamarinForms.ImageEditor; |
 | .NET MAUI ImageEditor | `RadImageEditor` | xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" | using Telerik.Maui.Controls; |
+| .NET MAUI ImageEditorToolbar | `RadImageEditorToolbar` | xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" | using Telerik.Maui.Controls; |
 
 
 ## Modifying the API
 
+When migrating the ImageEditor from Xamarin to .NET MAUI, consider the following differences in the API:
+
 | Xamarin ImageEditor | .NET MAUI ImageEditor |
 | ------------- | --------------- |
-| - | support for exporting images as `Gif` |
-| - | support for exporting images as `Bmp` |
-| - | `UndoCommand` |
-| - | `RedoCommand` |
-| - | `RotateBackwardCommand` |
-| - | `SaturationInteractiveCommand` |
-| - | `BrightnessInteractiveCommand` |
-| - | `BlurInteractiveCommand` |
-| - | `ContrastInteractiveCommand` |
-| - | `HueInteractiveCommand` |
-| - | `SharpenInteractiveCommand` |
+| N/A | support for exporting images as `Gif` |
+| N/A | support for exporting images as `Bmp` |
+| N/A | `UndoCommand` |
+| N/A | `RedoCommand` |
+| N/A | `RotateBackwardCommand` |
+| N/A | `SaturationInteractiveCommand` |
+| N/A | `BrightnessInteractiveCommand` |
+| N/A | `BlurInteractiveCommand` |
+| N/A | `ContrastInteractiveCommand` |
+| N/A | `HueInteractiveCommand` |
+| N/A | `SharpenInteractiveCommand` |
+
+When migrating the ImageEditorToolbar from Xamarin to .NET MAUI, consider the following differences in the API:
+
+| Xamarin ImageEditorToolbar | .NET MAUI ImageEditorToolbar |
+| ------------- | --------------- |
+| `IsMultiLine` with `true` and `false` values | `OverflowMode` with `DropDown`, `Scroll` and `Wrap`(multiline) values  |
+| N/A | `OverflowMenuButtonVisibility` |
+| `OverflowButtonTemplate` | `OverflowMenuButtonTemplate` |
+| `OverflowButtonText`, `OverflowButtonTextColor` and `OverflowButtonFontFamily` | `OverflowMenuButtonStyle` - Style the overflow button |
+| `TransformsToolbarItem` | `ImageEditorTransformationsToolbarItem` |
+| `CropToolbarItem` for mobile and desktop | `ImageEditorCropToolbarItem` |
+| N/A | `ImageEditorCropOptionsToolbarItem` |
+| `ResizeToolbarItem` | `ImageEditorResizeOptionsToolbarItem` |
+| `RotateLeftToolbarItem` | `ImageEditorRotateLeftToolbarItem` |
+| `RotateRightToolbarItem` | `ImageEditorRotateRightToolbarItem` |
+| `FlipHorizontalToolbarItem` | `ImageEditorFlipHorizontalToolbarItem` |
+| `FlipVerticalToolbarItem` | `ImageEditorFlipVerticalToolbarItem` |
+| `EffectsToolbarItem` for mobile and desktop | `ImageEditorFiltersToolbarItem` for mobile |
+| N/A | `ImageEditorFilterOptionsToolbarItem` for desktop |
+| `TransformsToolbarItem` | `ImageEditorTransformationsToolbarItem` |
+| `HueToolbarItem` | `ImageEditorHueToolbarItem` |
+| `SaturationToolbarItem` | `ImageEditorSaturationToolbarItem` |
+| `BrightnessToolbarItem` | `ImageEditorBrightnessToolbarItem` |
+| `ContrastToolbarItem` | `ImageEditorContrastToolbarItem` |
+| `BlurToolbarItem` | `ImageEditorBlurToolbarItem` |
+| `SharpenToolbarItem` | `ImageEditorSharpenToolbarItem` |
+| `UndoToolbarItem` | `ImageEditorUndoToolbarItem` |
+| `RedoToolbarItem` | `ImageEditorRedoToolbarItem` |
+| `ResetToolbarItem` | `ImageEditorResetToolbarItem` |
+| `ApplyToolbarItem` | `ImageEditorApplyToolbarItem` |
+| `CancelToolbarItem` | `ImageEditorCancelToolbarItem` |
+| `TemplateToolbarItem` | Review the [toolbar items]({%slug toolbar-items%}) `RadToolbar` control provides |
+| `CommandToolbarItem` | Review the [toolbar items]({%slug toolbar-items%}) `RadToolbar` control provides |
+| `ZoomToFitToolbarItem` | `ImageEditorZoomToFitToolbarItem` |
+| N/A | `ImageEditorZoomInToolbarItem` |
+| N/A | `ImageEditorZoomOutToolbarItem` |
+| N/A | `ImageEditorZoomToolbarItem` |
+| N/A | `ImageEditorZoomToOriginalToolbarItem` |
 
 ## See Also
 

controls/imageeditor/toolbar/items.md

@@ -54,7 +54,7 @@ The table below shows the built-in toolbar items available for desktop - `WinUI`
 
 Review all properties available for toolbar items configuration.
 
-### Properties for All Toolbar Items**
+### Properties for All Toolbar Items
 
 The properties described bellow apply to all toolbar items available in the `ImageEditorToolbar`:
 
@@ -65,7 +65,7 @@ The properties described bellow apply to all toolbar items available in the `Ima
 	* `ToolStrip`—The toolbar item appears in the main tool strip area of the toolbar.
 	* `DropDown`—The toolbar item appears in the overflow drop-down menu of the toolbar.
 
-### Properties for Specific Toolbar Items**
+### Properties for Specific Toolbar Items
 
 The properties described below apply to `blur`, `hue`, `saturation`, `brightness`, `sharpen`, `contrast`, `flip`, `resize`, `undo`, `redo`, `crop`, `rotate`, `button` toolbar items:
 
@@ -76,13 +76,13 @@ The properties described below apply to `blur`, `hue`, `saturation`, `brightness
 * `CommandParameter`(`object`)—Defines the parameter of the command, which is executed when the button is clicked.
 * `Clicked` event—Raised when the button is clicked.
 
-### Properties for Filter Toolbar Items - `blur`, `hue`, `saturation`, `brightness`, `sharpen`, `contrast`**
+### Properties for Filter Toolbar Items - `blur`, `hue`, `saturation`, `brightness`, `sharpen`, `contrast`
 
 * `Value`(`double`)—Defines the current value, when using an auto-generated slider content. Default value is`0`.
 * `MinimumProperty`(`double`)—Defines the minimum value, when using an auto-generated slider content. Default value is `-100`.
 * `MaximumProperty`(`double`)—Defines the maximum value, when using an auto-generated slider content. Default value is `100`.
 
-### Properties for Navigation Toolbar Item**
+### Properties for Navigation Toolbar Item
 
 * `AutoGenerateItems`(`bool`)—Specifies a value indicating whether to auto-generate all child items by default. The default value is `true`.
 * `Items`(`IList<ToolbarItem>`)&mdash;Read-only collection of `Telerik.Maui.Controls.ToolbarItems`.

controls/scheduler/built-in-dialogs.md

@@ -102,13 +102,13 @@ You can style the visual appearance of each dialog by creating the corresponding
 * `EditAppointmentDialogStyle`—Defines the `Style` that will be applied on the Edit Appointment dialog.
 * `EditRecurrenceDialogStyle`—Defines the `Style` that will be applied on the Edit Recurrence dialog.
 * `EditRecurrenceChoiceDialogStyle`—Defines the `Style` that will be applied on the Edit Recurrence Choice dialog.
-* `DeleteAppointmentChoiceDialogStyle`—Defines the `Style` that will be applied on the Delete Appointment Choice dialog.
+* `DeleteAppointmentChoiceDialogStyle`—(Desktop-only)Defines the `Style` that will be applied on the Delete Appointment Choice dialog.
 * `DeleteRecurrenceChoiceDialogStyle`—Defines the `Style` that will be applied on the Delete Recurrence Choice dialog.
 * `PreviewAppointmentDialogStyle`—(Android- and iOS-only)Defines the `Style` for the Preview Appointment dialog. 
 
 ## See Also
 
-- [Appointments]({% slug appointments-overview %})
-- [Recurrence Pattern](% slug recurrence-pattern %})
-- [Recurrence Rule](% slug recurrence-rule %})
-- [Views]({%slug scheduler-views-overview %})
+- [Appointments]({%slug appointments-overview %})
+- [Recurrence Pattern]({%slug scheduler-recurrence-pattern %})
+- [Recurrence Rule]({%slug scheduler-recurrence-rule %})
+- [Views]({%slug scheduler-views-overview %})

controls/sidedrawer/transitions.md

@@ -14,7 +14,7 @@ Transitions are the animation effects applied to the side drawer while being ope
 * `DrawerTransitionType`(enum of type `Telerik.Maui.Controls.SideDrawerTransitionType`)—Defines the transition of the component. This property can be set to one of the following values: 
 	* `Fade`, `Push`, `Reveal`, `ReverseSlideOut`, `ScaleUp`, `SlideAling`, `SlideInOnTop`, `Custom`
 
-* `DrawerTransitionFadeOpacity`(`double`)—Defines the opacity of the fade layer of the component. This controls the fade layer opacity on Android or the dim opacity on iOS.
+* `DrawerTransitionFadeOpacity`(`double`)—Defines the opacity of the fade layer of the component. This controls the fade layer opacity on Android and WinUI or the dim opacity on iOS and MacCatalyst. The opacity value is different on different platforms. Review the [Making SideDrawer Opacity Consistent across Platforms]({%slug make-sidedrawer-opacity-consistent-across-platforms-net-maui%}) how-to article for more details.
 
 ## Built-in Transitions
 

controls/slideview/navigation-buttons.md

@@ -12,7 +12,7 @@ To switch through the different views of the SlideView, you van use Navigation B
 
 The SlideView exposes a `NavigationButtonVisibility` property that allows you to control the visibility options of the Navigation Buttons:
 
-* `Visisble`—The buttons are visible.
+* `Visible`—The buttons are visible.
 
 * `HiddenWhenDisabled`—The buttons are visible when enabled and hidden when disabled.
 
@@ -24,4 +24,4 @@ The SlideView exposes a `NavigationButtonVisibility` property that allows you to
 - [Handling the SlideView Events]({%slug slideview-events%})
 - [Using an Item Template in SlideView]({%slug slideview-item-template%})
 - [Styling the SlideView Component]({%slug slideview-navigation-buttons-styling%})
-- [Styling the SlideView Indicators]({%slug indicators-styling%})
+- [Styling the SlideView Indicators]({%slug indicators-styling%})

controls/toolbar/items/overview.md

@@ -10,7 +10,7 @@ slug: toolbar-items
 
 ![.NET MAUI Toolbar Visual Structure](../images/toolbar-visual-structure.png "Visual elements of Toolbar")
 
-The Telerik .NET MAUI Toolbar provides a built-in toolbar items. The available items are described in the table below: 
+The Telerik .NET MAUI Toolbar provides built-in toolbar items. The available items are described in the table below: 
 
 | Toolbar Item | Description |
 | ------------ | ------- |

demos-and-sample-apps/controls-showcase-app.md

@@ -49,9 +49,9 @@ You can access the Controls Samples application in the following ways:
 
  `dotnet build -t:Run -f net8.0-maccatalyst`
 
-	* ControlsSamples application on MacOS.
+ * ControlsSamples application on MacOS.
 
-	![Telerik UI for .NET MAUI ControlsSamples App MacCatalyst](images/controlssamples-macos.png)
+  ![Telerik UI for .NET MAUI ControlsSamples App MacCatalyst](images/controlssamples-mac.png)
 
 1. Run on iOS using the following command:
 
@@ -63,9 +63,9 @@ You can access the Controls Samples application in the following ways:
   3. Select Connected device. 
   4. Under Device Information, you will get an identifier, or UDID, of the device. 
 
-	* ControlsSamples application on iOS.
+ * ControlsSamples application on iOS.
 
-	![Telerik UI for .NET MAUI ControlsSamples App iOS](images/controlssamples-iphone.png)
+  ![Telerik UI for .NET MAUI ControlsSamples App iOS](images/controlssamples-iphone.png)
 
   >tip Check the [.NET MAUI Examples, Demos, and Sample Apps Overview]({%slug sampleapps-overview%}) topic which lists all the sample applications built with Telerik UI for .NET MAUI.
 

demos-and-sample-apps/crypto-app.md

@@ -11,8 +11,6 @@ position: 3
 
 Crypto Tracker demo is a real-case crypto application that shows changes in cryptocurrency prices, built with the Telerik UI for .NET MAUI controls.
 
-![Telerik UI for .NET MAUI CryptoTracker App](../images/crypto-app.png)
-
 You can start using the Crypto Tracker application in the following ways:
 
 You can access the SDKBrowser application in the following ways:

demos-and-sample-apps/overview.md

@@ -22,14 +22,16 @@ The Telerik .NET MAUI library has a few fully-featured [demo applications](https
 
 The Telerik UI for .NET MAUI Controls Samples is a highly polished application offering many scenario-specific use cases designed to show off a subset of features for each component. The app provides various .NET MAUI examples for many of the 60+ .NET MAUI controls included in the library.
 
-![.NET MAUI examples and controls samples](images/controlssamples_all.png)
+![Telerik UI for .NET MAUI ControlsSamples App WinUI](images/controlssamples-winui.png)
 
 For more information on it, refer to [Controls Samples App]({%slug controls-samples-app%}).
 
 ## SDKBrowser App
 
 The SDKBrowser is a set of .NET MAUI examples that explain how to use the features of a control. Contrary to the Controls Samples application, the SDKBrowser shows the components in their pure form without adding extra styling and polishing. It's the go-to source for "how do I use X in Y control". Most of the code snippets available in the documentation are directly generated from the examples in the SDKBrowser (you can see special comments in the code for this).
 
+![.NET MAUI examples and controls samples](images/sdk-mobile.png)
+
 For more information on it, refer to [SDKBrowser App]({%slug sdkbrowser-app%}).
 
 ## Crypto Tracker App