diff --git a/_pdf.yml b/_pdf.yml
index c8915d0b3..9291dd1af 100644
--- a/_pdf.yml
+++ b/_pdf.yml
@@ -5,73 +5,96 @@ intro_columns:
-
categories:
-
- title: "Data Controls"
+ title: "Data Controls"
items:
+ "CollectionView": "collectionview-overview"
+ "DataForm": "dataform-overview"
"DataGrid": "datagrid-overview"
- "ListView": "listview-overview"
- "DataForm": "dataform-overview"
+ "DataPager": "datapager-overview"
+ "ItemsControl": "itemscontrol-overview"
-
- title: "Pdf Viewer"
+ title: "Data Visualization"
items:
- "PdfViewer": "pdfviewer-overview"
+ "Barcodes": "barcode-overview"
+ "Charts": "chart-overview"
+ "Gauges": "gauge-overview"
+ "Map": "map-overview"
+ "ProgressBar": "progressbar-overview"
+ "Ratings": "rating-overview"
-
- title: "Calendar & Scheduling"
+ title: "Chatbots"
items:
- "Calendar": "calendar-overview"
+ "Conversation UI (Chat)": "chat-overview"
+-
+ categories:
-
- title: "Navigation & Layout"
+ title: "Editors"
+ items:
+ "AutoComplete": "autocomplete-overview"
+ "ComboBox": "combobox-overview"
+ "DatePicker": "datepicker-overview"
+ "DateTimePicker": "datetimepicker-overview"
+ "Entry": "entry-overview"
+ "ImageEditor": "imageeditor-overview"
+ "ListPicker": "listpicker-overview"
+ "MaskedEntries": "maskedentry-overview"
+ "NumericInput": "numericinput-overview"
+ "RangeSlider": "rangeslider-overview"
+ "RichTextEditor": "richtexteditor-overview"
+ "TemplatedPicker": "templatedpicker-overview"
+ "TimePicker": "timepicker-overview"
+ "TimeSpanPicker": "timespanpicker-overview"
+ "SignaturePad": "signaturepad-overview"
+ "Slider": "slider-overview"
+-
+ categories:
+ -
+ title: "Navigation & Layouts"
items:
- "TreeView": "treeview-overview"
- "SideDrawer": "sidedrawer-overview"
- "TabView": "tabview-overview"
"Accordion": "accordion-overview"
- "Expander": "expander-overview"
"DockLayout": "docklayout-overview"
+ "Expander": "expander-overview"
+ "NavigationView": "navigationview-overview"
+ "SideDrawer": "sidedrawer-overview"
+ "SlideView": "slideview-overview"
+ "TabView": "tabview-overview"
+ "TreeView": "treeview-overview"
+ "WrapLayout": "wraplayout-overview"
+ -
+ title: "Calendar & Scheduling"
+ items:
+ "Calendar": "calendar-overview"
+ "Scheduler": "scheduler-overview"
-
title: "Buttons"
items:
"Segmented Control": "segmentedcontrol-overview"
"Button": "button-overview"
"CheckBox": "checkbox-overview"
- -
- title: "Editors"
- items:
- "Entry": "entry-overview"
- "AutoCompleteView": "autocompleteview-overview"
- "NumericInput": "numericinput-overview"
- "MaskedInput": "maskedinput-overview"
- "Image Editor": "imageeditor-overview"
- "DateTime Picker": "datetime-picker-overview"
- "List Picker": "list-picker-overview"
- "Templated Picker": "templated-picker-overview"
+ "TemplatedButton": "templatedbutton-overview"
+ "ToggleButton": "togglebutton-overview"
-
categories:
-
- title: "Data Visualization"
- items:
- "Charts": "chart-overview"
- "Map": "map-overview"
- "Gauge": "gauge-overview"
- "Rating": "rating-overview"
- "Barcode": "barcode-overview"
- -
title: "Interactivity & UX"
items:
- "BusyIndicator": "busyindicator-overview"
- "Popup": "popup-overview"
- "SlideView": "slideview-overview"
+ "AIPrompt": "aiprompt-overview"
+ "BadgeView": "badgeview-overview"
"Border": "border-overview"
+ "BusyIndicator": "busyindicator-overview"
+ "GridSplitter": "gridsplitter-overview"
"Path": "path-overview"
+ "Popup": "popup-overview"
+ "Toolbar": "toolbar-overview"
-
- title: "Document Processing Libraries"
+ title: "PDF Viewer"
items:
- "PdfProcessing": "radpdfprocessing-overview"
- "WordsProcessing": "radwordsprocessing-overview"
- "SpreadProcessing": "radspreadprocessing-overview"
- "SpreadStreamProcessing": "radspreadstreamprocessing-overview"
- "ZipLibrary": "radziplibrary-overview"
+ "PDF Viewer": "pdfviewer-overview"
-
- title: "Chatbots"
+ title: "Document Processing Libraries"
items:
- "Conversational UI": "chat-overview"
-
\ No newline at end of file
+ "PdfProcessing": "document-processing-libraries-overview"
+ "WordsProcessing": "document-processing-libraries-overview"
+ "SpreadProcessing": "document-processing-libraries-overview"
+ "SpreadStreamProcessing": "document-processing-libraries-overview"
+ "ZipLibrary": "document-processing-libraries-overview"
diff --git a/controls/accordion/overview.md b/controls/accordion/overview.md
index 826303017..402043374 100644
--- a/controls/accordion/overview.md
+++ b/controls/accordion/overview.md
@@ -12,7 +12,7 @@ The Telerik UI for .NET MAUI Accordion is a vertically collapsible content panel
-## Key features
+## Key Features of the .NET MAUI Accordion
* [Collapsed/expanded states]({%slug accordion-expand-collapse-states%})—Accordion consists of AccordionItems that can present any content. The end users can show or hide this content by interacting with the headers of the control.
* [Collapse All Items]({% slug accordion-expand-collapse-states%}#collapse-all-items)—You can allow the app users to collapse the Accordion through the `CanCollapseAllItems` Boolean property.
diff --git a/controls/aiprompt/overview.md b/controls/aiprompt/overview.md
index b8fad34cc..4ffe4f981 100644
--- a/controls/aiprompt/overview.md
+++ b/controls/aiprompt/overview.md
@@ -14,7 +14,7 @@ The component allows you to interact with the output from the AI and execute a s
-## Key Features
+## Key Features of the .NET MAUI AIPrompt
* [Views]({%slug aiprompt-views-overview %})—The AIPrompt provides different views that you can include in it - Input, Output and Commands view. Through interaction with the component, the user can change the currently active view.
* [Suggestions]({%slug aiprompt-suggestions%})—This collection will allow you to populate the AIPrompt component with suggestions that will be displayed to the user prior to sending the request.
diff --git a/controls/autocomplete/images/autocomplete-focused-text.png b/controls/autocomplete/images/autocomplete-focused-text.png
new file mode 100644
index 000000000..662bb47c8
Binary files /dev/null and b/controls/autocomplete/images/autocomplete-focused-text.png differ
diff --git a/controls/autocomplete/images/autocomplete-placeholder.png b/controls/autocomplete/images/autocomplete-placeholder.png
new file mode 100644
index 000000000..7387eb5cd
Binary files /dev/null and b/controls/autocomplete/images/autocomplete-placeholder.png differ
diff --git a/controls/autocomplete/images/autocomplete-tokens-template.png b/controls/autocomplete/images/autocomplete-tokens-template.png
new file mode 100644
index 000000000..7676c4393
Binary files /dev/null and b/controls/autocomplete/images/autocomplete-tokens-template.png differ
diff --git a/controls/autocomplete/overview.md b/controls/autocomplete/overview.md
index 1a9115794..b51ffd38b 100644
--- a/controls/autocomplete/overview.md
+++ b/controls/autocomplete/overview.md
@@ -12,7 +12,7 @@ The Telerik UI for .NET MAUI AutoComplete can automatically complete user input
-## Key features
+## Key Features of the .NET MAUI AutoComplete
* [Tokens Support]({%slug autocomplete-tokens-support%})—With AutoComplete you can enable users to search for and pick items in one control.
* [Filtering Options]({%slug autocomplete-filtering%})—You can define the filtering behavior to display all the matches that either `StartsWith` or `Contains` the typed symbols.
diff --git a/controls/autocomplete/styling.md b/controls/autocomplete/styling.md
index f638fc7a0..ce0debf73 100644
--- a/controls/autocomplete/styling.md
+++ b/controls/autocomplete/styling.md
@@ -16,14 +16,10 @@ The Telerik UI for .NET MAUI AutoComplete control provides the following Style p
* `BorderBrush`(`Brush`)—Defines the brush of the border around the control.
* `BorderThickness`(`Thickness`)—Defines the thickness of the border around the control.
* `ClearButtonStyle` (of type `Style` with target type `Telerik.Maui.Controls.RadTemplatedButton`)—Defines the style for the clear button.
-* `TextInputStyle`(of type `Style` with target type `Telerik.Maui.Controls.RadTextInput`)—Defines the style of the inner `RadTextInput` control.
-In addition, you can change the visual appearance of the AutoComplete by defining the following visual states through the .NET MAUI Visual State Manager:
+The AutoComplete control uses the [`RadTextInput`]({%slug entry-textinput%}) control internally. To style the input control (`RadTextInput`), use the `TextInputStyle` (of type `Style` with target type `Telerik.Maui.Controls.RadTextInput`).
-* `Normal`—Applied when the AutoComplete is in its normal state.
-* `Focused`—Applied when the AutoComplete receives focus.
-* (Windows Only)`MouseOver`—Applied when the mouse cursor is hovering over the AutoComplete.
-* `Disabled`—Applied when the AutoComplete's `IsEnabled` is `False`.
+In addition to the available styling properties, you can apply specific [Visual States]({%slug autocomplete-visual-states%}) to the AutoComplete control.
## Suggestion View Styling
@@ -63,6 +59,8 @@ And when an item is selected:
+>tip For a runnable example demonstrating the AutoComplete's Styling options, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to the **AutoComplete > Styling** category.
+
## Highlight Customization
In case a custom template is used, the user can achieve text highlighting inside the `RadAutoComplete.SuggestionItemTemplate` using `RadHighlightLabel`.
@@ -91,10 +89,12 @@ Here is the result:
->important For AutoComplete HighlightText example refer to the [SDKBrowser Demo application]({%slug sdkbrowser-app%}).
+>important For AutoComplete HighlightText example, refer to the [SDKBrowser Demo application]({%slug sdkbrowser-app%}) and go to the **AutoComplete > Featrues** category.
## See Also
+- [Apply Implicit Style]({%slug style-combobox-autocomplete-entry-implicit-explicit%})
+- [Styling the AutoComplete Using Visual States]({%slug style-autocomplete-visual-state-border-telerik-maui%})
- [Data Binding]({%slug autocomplete-data-binding%})
- [Configuration]({%slug autocomplete-configuration%})
- [Suggest Mode]({%slug autocomplete-suggest-mode%})
diff --git a/controls/autocomplete/visual-states.md b/controls/autocomplete/visual-states.md
new file mode 100644
index 000000000..874af1069
--- /dev/null
+++ b/controls/autocomplete/visual-states.md
@@ -0,0 +1,54 @@
+---
+title: Visual States
+page_title: .NET MAUI AutoComplete Documentation - Visual States
+description: Learn how to set the border color, background color, and other visual states for the Telerik UI for .NET MAUI AutoComplete control.
+position: 15
+tags: .net maui, telerik .net maui, ui for .net maui, autocomplete, states, microsoft .net maui
+slug: autocomplete-visual-states
+---
+
+# .NET MAUI AutoComplete Visual States
+
+This article describes the visual states provided by the AutoComplete control. You can use these visual states to change the appearance of the control based on its state—such as when it’s disabled, focused, hovered, and more.
+
+The AutoComplete provides the following `CommonStates` visual states:
+
+| Visual State | Description |
+| ------------- | --------------- |
+| `Normal` | Applies when the AutoComplete is in its normal state. |
+| `Focused` | Applied when the AutoComplete receives focus. |
+| `MouseOver` | (Windows-only) Applied when the mouse cursor is hovering over the AutoComplete. |
+| `PointerOver` | (MacCatalyst-only) Applied when the mouse cursor is hovering over the AutoComplete. |
+| `Disabled` | Applied when the AutoComplete's `IsEnabled` is `False`. |
+
+## Using the Visual States
+
+The example below demonstrates some of the styling capabilities of the AutoComplete, such as custom `ClearButtonStyle`, `TextInputStyle`, `TextColor`, `PlaceholderColor`, and others. It also shows how to switch its appearance through the .NET MAUI Visual State Manager.
+
+**1.** Add a Style that targets the `RadAutoComplete` to your page's resources and apply all the needed styling properties and the visual states:
+
+
+
+**2.** Define the AutoComplete in XAML:
+
+
+
+**3.** Create the needed business objects, for example type `Client` with the following properties:
+
+
+
+**4.** Create a `ViewModel` with a collection of `Client` objects:
+
+
+
+Here is how the AutoComplete looks when styling is applied:
+
+
+
+>tip For a runnable example demonstrating the AutoComplete's Visual States, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to the **AutoComplete > Styling** category.
+
+## See Also
+
+- [AutoComplete Styling]({%slug autocomplete-styling%})
+- [Apply Implicit Style]({%slug style-combobox-autocomplete-entry-implicit-explicit%})
+- [Styling AutoComplete Using Visual States]({%slug style-autocomplete-visual-state-border-telerik-maui%})
diff --git a/controls/autocomplete/visual-structure.md b/controls/autocomplete/visual-structure.md
new file mode 100644
index 000000000..044b74c3c
--- /dev/null
+++ b/controls/autocomplete/visual-structure.md
@@ -0,0 +1,33 @@
+---
+title: Visual Structure
+page_title: .NET MAUI AutoComplete Documentation - AutoComplete Visual Structure
+description: Learn more about the visual elements used in the Telerik UI for .NET MAUI AutoComplete control.
+position: 0
+slug: autocomplete-visual-structure
+---
+
+# .NET MAUI AutoComplete Visual Structure
+
+The visual structure of the [.NET MAUI AutoComplete]({%slug autocomplete-overview%}) represents the anatomy of the UI control. Being familiar with the visual elements of the AutoComplete allows you to quickly find the information required to configure them.
+
+The images in this article show the anatomy of the AutoComplete and its building blocks.
+
+
+
+- `Placeholder`—The text that guides the end-user on what can be entered/searched in the input.
+
+## Tokens Structure
+
+
+
+- `Tokens`—When multiple items are selected from the dropdown list, these items appear as tokens. They can be deselected using their close button.
+- `ShowMore Template`—This template represents a UI that is displayed when the control is not focused and the space is insufficient to show all tokens in a multiple selection scenario.
+
+## Filtering Structure
+
+
+
+- `Text`—The text entered in the control's input filed.
+- [`RadTextInput`]({%slug entry-textinput%})—The control used for the text input.
+- `Clear Button`—Clears the selection in the control (for both multiple and single selection scenarios).
+- `Filtered Items`—The items that are displayed after filtering the `ItemsSource` of the AutoComplete control.
diff --git a/controls/badgeview/overview.md b/controls/badgeview/overview.md
index e6e403f97..3680591e2 100644
--- a/controls/badgeview/overview.md
+++ b/controls/badgeview/overview.md
@@ -7,7 +7,7 @@ tags: badge, .net maui, badgeview, notifications, indicator, marker, badge for .
slug: badgeview-overview
---
-# .NET MAUI BadgeView - Overview
+# .NET MAUI BadgeView Overview
The Telerik UI for .NET MAUI BadgeView allows you to display badges in your application.
@@ -16,7 +16,7 @@ Badges can be used as an additional marker for any element: to decorate avatars,
-## Key Features
+## Key Features of the .NET MAUI BadgeView
* [Badge indicator]({% slug badge-overview %})—The BadgeView provides a number of features for customizing its Badge indicator.
* [Position]({%slug badgeview-position-alignment%}#badge-position)—The BadgeView allows you to specify the `Position` of the Badge indicator based on its content.
diff --git a/controls/barcode/overview.md b/controls/barcode/overview.md
index b72a1402b..94de38b95 100644
--- a/controls/barcode/overview.md
+++ b/controls/barcode/overview.md
@@ -13,7 +13,7 @@ The Telerik UI for .NET MAUI Barcode enables you to create and show barcodes. Yo
-## Key Features
+## Key Features of the .NET MAUI Barcode
* [Value and symbology]({% slug barcode-valuesymbology %})—The Barcode enables you set the symbology that will be used to convert the value of the control into a visual barcode representation.
* [Sizing modes]({% slug barcode-sizingmodes %})—The Barcode provides three sizing modes that enable you to fine-tune the rendering of the barcodes.
diff --git a/controls/border/overview.md b/controls/border/overview.md
index 8ebe6b3d9..5bbfbfb86 100644
--- a/controls/border/overview.md
+++ b/controls/border/overview.md
@@ -16,7 +16,7 @@ It provides various border thickness types and corner-side radiuses, which can b
-## Key Features
+## Key Features of the .NET MAUI Border
* [Thickness]({% slug border-styling%}#border-thickness)—Telerik UI for .NET MAUI Border provides options for setting its thickness and enables you to visually enhance your label, image, and other views.
diff --git a/controls/busyindicator/overview.md b/controls/busyindicator/overview.md
index dbde8077a..37d60f80b 100644
--- a/controls/busyindicator/overview.md
+++ b/controls/busyindicator/overview.md
@@ -13,7 +13,7 @@ The Telerik BusyIndicator for .NET MAUI allows you to display a notification whe
-## Key Features
+## Key Features of the .NET MAUI BusyIndicator
* [Built-in animations]({%slug busyindicator-animations%}#built-in-animations)—The BusyIndicator control provides a set of built-in animations, which you can use.
* [Custom animation]({%slug busyindicator-animations%}#custom-animation)—The control allows you to define custom content and animate it by using the `RadAnimation` class.
diff --git a/controls/button/overview.md b/controls/button/overview.md
index 6e30a3512..9e678a784 100644
--- a/controls/button/overview.md
+++ b/controls/button/overview.md
@@ -14,7 +14,7 @@ The Telerik UI for .NET MAUI Button control enhances the functionality of the st
-## Key Features
+## Key Features of the .NET MAUI Button
* [Content alignment]({% slug button-configuration%})—The Button enables you to control the horizontal and vertical positioning of its content.
* [Background image]({%slug button-configuration%}#background-image)—Apply an image as a background of the button.
diff --git a/controls/calendar/blackout-dates.md b/controls/calendar/blackout-dates.md
index 55607b93b..5c4501926 100644
--- a/controls/calendar/blackout-dates.md
+++ b/controls/calendar/blackout-dates.md
@@ -8,7 +8,7 @@ slug: calendar-blackout-dates
# .NET MAUI Calendar Blackout Dates
-The Calendar component for .NET MAUI provides a simple way to disable specific dates. To take advantage of this feature, specify the `BlackoutDates`(`IEnumerable`) collection and the user cannot select the defined dates.
+The .NET MAUI Calendar component provides a simple way to disable specific dates. To take advantage of this feature, specify the `BlackoutDates`(`IEnumerable`) collection and the user cannot select the defined dates.
## Disabled (Blackout) Dates Example
diff --git a/controls/calendar/commands.md b/controls/calendar/commands.md
index 4493574ac..b30d68be1 100644
--- a/controls/calendar/commands.md
+++ b/controls/calendar/commands.md
@@ -8,7 +8,7 @@ slug: calendar-commands
# .NET MAUI Calendar Commands
-The .NET MAUI Calendar provides various commands that allow the user to switch between the display modes and views.
+The .NET MAUI Calendar provides various commands that allow the user to switch between the display modes and views.
## Commands for Navigating the Current View
diff --git a/controls/calendar/date-properties.md b/controls/calendar/date-properties.md
index 2805d8bab..a770d2b2a 100644
--- a/controls/calendar/date-properties.md
+++ b/controls/calendar/date-properties.md
@@ -8,7 +8,7 @@ slug: calendar-date-properties
# .NET MAUI Calendar Date Properties
-The .NET MAUI Calendar provides various date properties that allow you to configure the control by setting the display date, restricting the selectable dates, disabling the day names, and more.
+The .NET MAUI Calendar provides various date properties that allow you to configure the control by setting the display date, restricting the selectable dates, disabling the day names, and more.
## Setting the Display Date
diff --git a/controls/calendar/display-modes.md b/controls/calendar/display-modes.md
index b97fc9445..919793c73 100644
--- a/controls/calendar/display-modes.md
+++ b/controls/calendar/display-modes.md
@@ -8,7 +8,7 @@ slug: calendar-display-modes
# .NET MAUI Calendar Display Modes
-The Telerik .NET MAUI Calendar is a control that allows the user to select a date from a standard view that can represent various time spans. The Calendar views define what is visible in the Calendar, for example, month, year, decade, or century.
+The Telerik .NET MAUI Calendar is a control that allows the user to select a date from a standard view that can represent various time spans. The Calendar views define what is visible in the Calendar, for example, month, year, decade, or century.
## Setting the Display Mode Programmatically
diff --git a/controls/calendar/events.md b/controls/calendar/events.md
index 85483368b..bea667ec8 100644
--- a/controls/calendar/events.md
+++ b/controls/calendar/events.md
@@ -8,7 +8,7 @@ slug: calendar-events
# .NET MAUI Calendar Events
-The Telerik UI for .NET MAUI Calendar component exposes a set of events that users trigger through interaction. You can handle these events and customize the configuration of the UI component.
+The Telerik UI for .NET MAUI Calendar component exposes a set of events that users trigger through interaction. You can handle these events and customize the configuration of the UI component.
The Calendar for .NET MAUI exposes the [`DisplayDateChanged`](#displaydatechanged) and the [`SelectionChanged`](#selectionchanged) events.
diff --git a/controls/calendar/formatting.md b/controls/calendar/formatting.md
index 4a399a5ad..0d4ce675a 100644
--- a/controls/calendar/formatting.md
+++ b/controls/calendar/formatting.md
@@ -8,7 +8,7 @@ slug: calendar-date-formatting
# .NET MAUI Calendar Header Text Formatting
-The .NET MAUI Calendar allows you to specify the format of the header label text in the different display modes. The format must be a valid date format. The available options for the header label text formatting are:
+The .NET MAUI Calendar allows you to specify the format of the header label text in the different display modes. The format must be a valid date format. The available options for the header label text formatting are:
* `MonthHeaderTextFormat`(`string`)—Specifies the format of the header text when the Calendar `DisplayMode` is `Month`.
* `YearHeaderTextFormat`(`string`)—Specifies the format of the header text when the Calendar `DisplayMode` is `Year`.
diff --git a/controls/calendar/globalization.md b/controls/calendar/globalization.md
index 626570855..39e39d154 100644
--- a/controls/calendar/globalization.md
+++ b/controls/calendar/globalization.md
@@ -10,7 +10,7 @@ slug: calendar-globalization
Globalization refers to developing an application in such a way that it works on the target device culture. This includes changes in the Calendar day names and first day of week.
-The Telerik UI for .NET MAUI Calendar control supports globalization through the `Culture` property (of type `System.Globalization.CultureInfo`).
+The Telerik UI for .NET MAUI Calendar control supports globalization through the `Culture` property (of type `System.Globalization.CultureInfo`).
The following example demonstrates how to set the desired culture in the `RadCalendar`:
diff --git a/controls/calendar/navigation.md b/controls/calendar/navigation.md
index cc3e7dc11..f4499a1a5 100644
--- a/controls/calendar/navigation.md
+++ b/controls/calendar/navigation.md
@@ -8,7 +8,7 @@ slug: calendar-navigation
# .NET MAUI Calendar Navigation
-You can navigate between the different views of the Calendar programmatically or let the user change the views from the UI.
+You can navigate between the different views of the .NET MAUI Calendar programmatically or let the user change the views from the UI.
## Navigating through Buttons
diff --git a/controls/calendar/overview.md b/controls/calendar/overview.md
index 911a8822d..1aa0b4f2c 100644
--- a/controls/calendar/overview.md
+++ b/controls/calendar/overview.md
@@ -12,7 +12,7 @@ The Telerik UI for .NET MAUI Calendar allows you to select single or multiple da
-## Key Features
+## Key Features of the .NET MAUI Calendar
* [Different display modes]({%slug calendar-display-modes%})—The Calendar features year, month, decade, and century display modes.
* [Date ranges]({%slug calendar-date-properties%})—Restrict the visible/selectable dates in the Calendar by utilizing the `MinDate` and `MaxDate` properties.
diff --git a/controls/calendar/selection.md b/controls/calendar/selection.md
index ec12b7c34..8c05ee3ce 100644
--- a/controls/calendar/selection.md
+++ b/controls/calendar/selection.md
@@ -8,7 +8,7 @@ slug: calendar-selection
# .NET MAUI Calendar Selection
-Calendar for .NET MAUI provides three different types of selection: Single, Multiple, and Range. The selected dates can be changed programmatically or by tapping a calendar cell.
+The .NET MAUI Calendar provides three different types of selection: Single, Multiple, and Range. The selected dates can be changed programmatically or by tapping a calendar cell.
## Changing the Selection Mode
diff --git a/controls/calendar/templates.md b/controls/calendar/templates.md
index 0b2f37d53..afc751e07 100644
--- a/controls/calendar/templates.md
+++ b/controls/calendar/templates.md
@@ -8,7 +8,7 @@ slug: calendar-templates-overview
# .NET MAUI Calendar Templates
-If the default look how the days, months, years and decades are presented do not match your use case, you can define custom templates. The available templates for customizing are:
+If the default look how the days, months, years and decades are presented in the .NET MAUI Calendar do not match your use case, you can define custom templates. The available templates for customizing are:
* `DayTemplate `(`DataTemplate`)—Specifies the content templates for the days in the month view of the Calendar.
* `MonthTemplate `(`DataTemplate`)—Specifies the content templates for the months in the year view of the Calendar.
diff --git a/controls/calendar/visual-structure.md b/controls/calendar/visual-structure.md
index ba396ccc0..974ec6a63 100644
--- a/controls/calendar/visual-structure.md
+++ b/controls/calendar/visual-structure.md
@@ -8,7 +8,7 @@ slug: calendar-visual-structure
# .NET MAUI Calendar Visual Structure
-The visual structure of the .NET MAUI Calendar represents the anatomy of the UI component. Being familiar with the visual elements of the Calendar allows you to quickly find the information required to configure them.
+The visual structure of the .NET MAUI Calendar represents the anatomy of the UI component. Being familiar with the visual elements of the Calendar allows you to quickly find the information required to configure them.
The following image shows the anatomy of the Calendar.
diff --git a/controls/chart/overview.md b/controls/chart/overview.md
index cf6325a46..3cc3068d5 100644
--- a/controls/chart/overview.md
+++ b/controls/chart/overview.md
@@ -48,7 +48,7 @@ The [Pie Chart]({% slug chart-types-pie-chart %}) visualizes its data points by
* [Donut Series]({% slug chart-series-donut-series %})
* [Pie Series]({% slug chart-series-pie-series %})
-## Key Features
+## Key Features of the .NET MAUI Chart
Each Telerik UI for .NET MAUI Chart delivers a range of handy and developer-friendly features whose number and further development are not limited by the list in this section. The team constantly invests efforts to improve the performance and add more value to the existing Charts library as well as develop new features and controls to it.
diff --git a/controls/chart/types/cartesian-chart.md b/controls/chart/types/cartesian-chart.md
index fbf6821ba..80bcb6003 100644
--- a/controls/chart/types/cartesian-chart.md
+++ b/controls/chart/types/cartesian-chart.md
@@ -79,6 +79,10 @@ The Financial Cartesian Chart supports the following series:
- [Candlestick Series]({%slug chart-series-candlestick-series%})—Data points are plotted as visuals that resemble candlesticks.
- [Financial Indicators Series]({%slug chart-series-financial-indicators%})—The financial, or also called stock indicators, are mainly used for keeping track of stock prices and patterns of price changes over time.
+## Customize the Chart Colors
+
+You can take advantage of the available customization options the Chart control provides. You can change the default Chart and series colors by setting a `Palette`. For more details on the suggested implementation, see the [Creating Custom Chart Palettes KB article]({%slug chart-how-to-create-custom-palette%}).
+
## Example
**1.** Define the `RadCartesianChart`:
@@ -130,7 +134,6 @@ The Financial Cartesian Chart supports the following series:
xmlns:local="clr-namespace:[The namespace where the ViewModel class is defined];assembly=[The assembly name]"
```
-
## Cartesian Chart Example
The following example shows the full definition of the chart.
@@ -170,6 +173,8 @@ The following image shows the final result:
+For a sample example
+
## See Also
- [Pie Chart]({%slug chart-types-pie-chart%})
diff --git a/controls/chart/types/pie-chart.md b/controls/chart/types/pie-chart.md
index 071292cb1..b1559e05a 100644
--- a/controls/chart/types/pie-chart.md
+++ b/controls/chart/types/pie-chart.md
@@ -2,7 +2,7 @@
title: Pie Chart
page_title: .NET MAUI Chart Documentation - Pie Chart
position: 2
-description: Check our "Pie Chart" documentation article for Telerik Chart for .NET MAUI
+description: Learn how to configure the Telerik UI for .NET MAUI PieChart control.
previous_url: /controls/chart/types/chart-types-pie-chart
slug: chart-types-pie-chart
---
@@ -24,38 +24,13 @@ The Pie Chart supports the following properties:
## Series
-The Pie Chart supports the Pie Series, which visualize a single series of data in a pie chart. The sweep of a pie slice is directly proportional to the magnitude of the data point values.
+The PieChart supports the Pie Series, which visualize a single series of data in a pie chart. The sweep of a pie slice is directly proportional to the magnitude of the data point values.
-## Example
+## Customize the Chart Colors
-**1.** Define the `RadPieChart`:
+You can take advantage of the available customization options the Chart control provides. You can change the default Chart and series colors by setting a `Palette`. For more details on the suggested implementation, see the [Creating Custom PieChart Palettes KB article]({%slug pie-chart-custom-colors%}).
-```XAML
-
-
-```
-
-**2.** Add the series to the `RadPieChart.Series` collection:
-
-```XAML
-
-
-
-
-
-
-
-```
-
-**3.** Set the `BindingContext` of the chart if none of its parents has a context:
-
-```XAML
-
-
-
-```
-
-## Pie Chart Example
+## PieChart Example
The following example shows the full definition of the chart.
diff --git a/controls/chat/overview.md b/controls/chat/overview.md
index 149a6c4b2..647a58518 100644
--- a/controls/chat/overview.md
+++ b/controls/chat/overview.md
@@ -12,7 +12,7 @@ The Telerik UI for .NET MAUI Chat is a UI component that enables the implementat
-## Key Features
+## Key Features of the .NET MAUI Chat
* [A variety of chat items for great user experience]({%slug chat-items-overview %})—You can choose between simple text messages, various pickers, such as list view, calendar, date and time pickers, and cards.
* [Typing indicator]({%slug chat-typing-indicator%})—Use the typing indicator to let the users that other Chat participants are currently typing.
diff --git a/controls/checkbox/overview.md b/controls/checkbox/overview.md
index 5ca690947..9fa3f7244 100644
--- a/controls/checkbox/overview.md
+++ b/controls/checkbox/overview.md
@@ -15,7 +15,7 @@ Telerik UI for .NET MAUI CheckBox is a control, which enables users to make a ch
-## Key Features
+## Key Features of the .NET MAUI CheckBox
* [Checked states]({% slug checkbox-checked-states %})—The CheckBox delivers options for setting its state to checked and unchecked, and provides an additional indeterminate state which indicates the control is neither checked nor unchecked.
* [Size]({% slug checkbox-configuration%}#size)—You can set the width and height of the CheckBox by adjusting only a single CheckBox property.
diff --git a/controls/collectionview/overview.md b/controls/collectionview/overview.md
index f86d773af..644346ed6 100644
--- a/controls/collectionview/overview.md
+++ b/controls/collectionview/overview.md
@@ -12,7 +12,7 @@ The Telerik .NET MAUI CollectionView is a virtualizing view component that provi
-## Key Features
+## Key Features of the .NET MAUI CollectionView
* [Selection]({%slug collectionview-selection%})—The .NET MAUI CollectionView supports both single and multiple selections. It also allows you to select items by using the tap gesture.
diff --git a/controls/combobox/databinding.md b/controls/combobox/databinding.md
index a90b5ee6e..a95c1822e 100644
--- a/controls/combobox/databinding.md
+++ b/controls/combobox/databinding.md
@@ -11,7 +11,9 @@ slug: combobox-databinding
- `ItemsSource`(`IEnumerable`)—Defines the collection of the items that will populate the control with data.
- `DisplayMemberPath`(`string`)—Defines the name of the property which will be visualized inside the drop-down list.
-> If DisplayMemberPath is not set the “ToString” implementation of the business object will be visualized. The DisplayMemberPath is a property that helps the developers to visualize an exact property from the business object they are bound to.
+The `DisplayMemberPath` is a property that lets the developer specify a particular property of the business object to be displayed. If `DisplayMemberPath` is not set, the ComboBox will visualize the `ToString` implementation of the business object.
+
+To customize the content inside the input area when an item is selected and the `DisplayMemberPath` property is not set, use the [`SelectionBoxTemplate`](%slug combobox-templates%). The `SelectionBoxTemplate` applies when the `SelectionMode` is `Single` and the control's `IsEditable` property is set to `false`.
## Binding to a Complex Object
diff --git a/controls/combobox/images/combo-editmode.png b/controls/combobox/images/combo-editmode.png
new file mode 100644
index 000000000..e600e7553
Binary files /dev/null and b/controls/combobox/images/combo-editmode.png differ
diff --git a/controls/combobox/images/combobox-multiple-selection-visual-structure.png b/controls/combobox/images/combobox-multiple-selection-visual-structure.png
index 3ac986ea4..7676c4393 100644
Binary files a/controls/combobox/images/combobox-multiple-selection-visual-structure.png and b/controls/combobox/images/combobox-multiple-selection-visual-structure.png differ
diff --git a/controls/combobox/images/combobox-single-selection-visual-structure.png b/controls/combobox/images/combobox-single-selection-visual-structure.png
index a751e240f..5a43c94c4 100644
Binary files a/controls/combobox/images/combobox-single-selection-visual-structure.png and b/controls/combobox/images/combobox-single-selection-visual-structure.png differ
diff --git a/controls/combobox/images/combobox-visual-structure.png b/controls/combobox/images/combobox-visual-structure.png
index 5e74649e4..1a646edae 100644
Binary files a/controls/combobox/images/combobox-visual-structure.png and b/controls/combobox/images/combobox-visual-structure.png differ
diff --git a/controls/combobox/images/dropdown-multiple-selection.png b/controls/combobox/images/dropdown-multiple-selection.png
index 14a0b8d95..9e9d8c597 100644
Binary files a/controls/combobox/images/dropdown-multiple-selection.png and b/controls/combobox/images/dropdown-multiple-selection.png differ
diff --git a/controls/combobox/overview.md b/controls/combobox/overview.md
index 7fac8d306..7919e7e1b 100644
--- a/controls/combobox/overview.md
+++ b/controls/combobox/overview.md
@@ -8,11 +8,11 @@ slug: combobox-overview
# .NET MAUI ComboBox Overview
-The Telerik UI for .NET MAUI ComboBox allows users to select item/items from a drop down list of items. The control has a number of features such as searching, single and multiple selection, flexible styling API, dropdown customizations and more.
+The Telerik UI for .NET MAUI ComboBox enables users to select one or more items from a dropdown list. It offers various features, including search functionality, options for single and multiple selections, a flexible styling API, and customizable dropdowns, among others.
-## .NET MAUI ComboBox Key Features
+## Key Features of the .NET MAUI ComboBox
* [Editable and NonEditable mode]({%slug combobox-editmode-and-search%})—The .NET MAUI ComboBox supports both editable and noneditable state. When the control is in edit mode searching can be performed.
* [Searching Support]({%slug combobox-editmode-and-search%})—The ComboBox provides both case-sensitive and case-insensitive searching modes. The available options are: `Contains`, `StartsWith`, `ContainsCaseSensitive` and `StartsWithCaseSensitive`.
diff --git a/controls/combobox/styling.md b/controls/combobox/styling.md
index fc1230536..9aadf586b 100644
--- a/controls/combobox/styling.md
+++ b/controls/combobox/styling.md
@@ -19,15 +19,11 @@ The [Telerik UI for .NET MAUI ComboBox]({%slug combobox-overview%}) provides the
* `BorderColor`(`Color`)—Defines the color of the border.
* `BorderThickness`(`Thickness`)—Defines the thickness of the border.
* `ClearButtonStyle` (of type `Style` with target type `Telerik.Maui.Controls.RadTemplatedButton`)—Defines the style for the clear button.
-* `TextInputStyle`(of type `Style` with target type `Telerik.Maui.Controls.RadTextInput`)—Defines the style of the inner `RadTextInput` control used when the ComboBox is editable (`IsEditable` must be `True`).
* `Font Options`(`FontAttributes`, `FontFamily`, `FontSize`)—Defines the font options for the text of the ComboBox. It's applied to the Placeholder and Selected Text (for single selection) and when the control is in Editable Mode.
-In addition, you can change the visual appearance of the ComboBox by defining the following visual states through the .NET MAUI Visual State Manager:
+The ComboBox control uses the [`RadTextInput`]({%slug entry-textinput%}) control internally when the ComboBox `IsEditable` property is set to `True`. To style the input control (`RadTextInput`), use the `TextInputStyle` (of type `Style` with target type `Telerik.Maui.Controls.RadTextInput`).
-* `Normal`—Applied when the ComboBox is in its normal state.
-* `Focused`—Applied when the ComboBox receives focus (when it's editable).
-* (Windows Only) `MouseOver`—Applied when the mouse cursor is hovering over the ComboBox.
-* `Disabled`**—Applied when the ComboBox's `IsEnabled` is `False`.
+In addition to the available styling properties, you can apply specific [Visual States]({%slug combobox-visual-states%}) to the ComboBox control.
### Example for ComboBox Styling
@@ -81,5 +77,7 @@ Here is how the Drop Down Styling looks:
## See Also
+- [Apply Implicit Style]({%slug style-combobox-autocomplete-entry-implicit-explicit%})
+- [Styling the ComboBox Using Visual States]({%slug style-combobox-visual-state-border-telerik-maui%})
- [Configuration]({% slug combobox-configuration%})
- [Edit Mode & Search]({%slug combobox-editmode-and-search%})
diff --git a/controls/combobox/templates.md b/controls/combobox/templates.md
index b0d96262a..17f8bcdde 100644
--- a/controls/combobox/templates.md
+++ b/controls/combobox/templates.md
@@ -11,13 +11,12 @@ slug: combobox-templates
If the default templates of the control do not suit your needs, you can define custom ones. The available templates for customizing are:
* `ItemTemplate`(`DataTemplate`)—Defines the template of the items that are visualized in the dropdown list.
-
-> When the selection mode is single and the control is not editable if there is ItemTemplate set the same template will be visualized in the box part of the control when item is selected.
-
* `SelectedItemTemplate`(`DataTemplate`)—Defines the template of the selected items that are visualized in the dropdown list.
* `TokenTemplate`(`DataTemplate`)—Defines the template of the tokens that are visualized when multiple selection is performed.
* `ShowMoreTemplate`(`DataTemplate`)—Defines the Template of the Show More UI that gets visualized when the control is not focused and the space is not enough to show all tokens when using the Multiple selection mode.
-* `SelectionBoxTemplate`(`DataTemplate`)—Defines the template of the selected item in the box section of the control. This property is only available when the RadComboBox is non-editable(`IsEditable` set to "false").
+* `SelectionBoxTemplate`(`DataTemplate`)—Defines the template of the selected item in the box section of the control. This property is only available when the `RadComboBox` is non-editable (`IsEditable` set to `false`).
+
+To customize the content inside the input area when an item is selected and the `DisplayMemberPath` property is not set, use the [`SelectionBoxTemplate`](%slug combobox-templates%). The `SelectionBoxTemplate` applies when the `SelectionMode` is `Single` and the control's `IsEditable` property is set to `false`.
### Example with ItemTemplate and SelectedItemTemplate
diff --git a/controls/combobox/visual-states.md b/controls/combobox/visual-states.md
new file mode 100644
index 000000000..9e3be3ca2
--- /dev/null
+++ b/controls/combobox/visual-states.md
@@ -0,0 +1,52 @@
+---
+title: Visual States
+page_title: .NET MAUI ComboBox Documentation - Visual States
+description: Learn how to set the border color, background color, and other visual states for the Telerik UI for .NET MAUI ComboBox control.
+position: 15
+tags: .net maui, telerik .net maui, ui for .net maui, combobox, states, microsoft .net maui
+slug: combobox-visual-states
+---
+
+# .NET MAUI ComboBox Visual States
+
+This article describes the visual states provided by the ComboBox control. You can use these visual states to change the appearance of the control based on its state—such as when it’s disabled, focused, hovered, and more.
+
+The ComboBox provides the following `CommonStates` visual states:
+
+| Visual State | Description |
+| ------------- | --------------- |
+| `Normal` | Applies when the ComboBox is in its normal state. |
+| `Focused` | Applied when the ComboBox receives focus (when it's editable). |
+| `MouseOver` | (Windows-only) Applied when the mouse cursor is hovering over the ComboBox. |
+| `PointerOver` | (MacCatalyst-only) Applied when the mouse cursor is hovering over the ComboBox. |
+| `Disabled` | Applied when the ComboBox's `IsEnabled` is `False`. |
+
+## Using the Visual States
+
+The example below demonstrates some of the styling capabilities of the ComboBox, such as custom `ClearButtonStyle`, `TextInputStyle`, `TextColor`, `PlaceholderColor`, and others. It also shows how to switch its appearance through the .NET MAUI Visual State Manager.
+
+The example uses the same `ViewModel` and `City` classes as the [Getting Started]({%slug combobox-getting-started%}) topic.
+
+**1.** Add a Style that targets the `RadComboBox` to your page's resources and apply all the needed styling properties and the visual states:
+
+
+
+**2.** Define the ComboBox in XAML:
+
+
+
+Here is how the ComboBox looks when styling is applied:
+
+
+
+Here is how the styling is applied when the control is focused and item is selected:
+
+
+
+> For the ComboBox Visual States example, go to the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and navigate to the **ComboBox > Styling** category.
+
+## See Also
+
+- [ComboBox Styling]({%slug combobox-styling%})
+- [Apply Implicit Style]({%slug style-combobox-autocomplete-entry-implicit-explicit%})
+- [Styling ComboBox Using Visual States]({%slug style-combobox-visual-state-border-telerik-maui%})
diff --git a/controls/combobox/visual-structure.md b/controls/combobox/visual-structure.md
index cb370e6cf..c091f3df8 100644
--- a/controls/combobox/visual-structure.md
+++ b/controls/combobox/visual-structure.md
@@ -8,35 +8,47 @@ slug: combobox-visual-structure
# .NET MAUI ComboBox Visual Structure
-Here are described all visual elements used in the [.NET MAUI ComboBox]({%slug combobox-overview%}).
+The visual structure of the [.NET MAUI ComboBox]({%slug combobox-overview%}) represents the anatomy of the UI control. Being familiar with the visual elements of the ComboBox allows you to quickly find the information required to configure them.
-## ComboBox Visual Structure
+The images in this article show the anatomy of the ComboBox and its building blocks.
-
+## ComboBox Visual Structure
-### Single Selection
+
-
+- `Placeholder`—The text that guides the end-user on what can be entered/searched in the input.
+- `DropDown Button`—A button used for opening and closing the DropDown part of the control–the arrow icon of the button indicates whether it's currently opened or closed.
-### Multiple Selection
+## Single Selection Structure
-
+
-## DropDown Visual Structure
+- `Text`—The text entered in the control's input filed.
+- `Clear Button`—Clears the selection in the control (for both multiple and single selection scenarios).
+- `DropDown Button`—A button used for opening and closing the DropDown part of the control–the arrow icon of the button indicates whether it's currently opened or closed.
+- `Selected Item`—The currently selected item.
-### Single Selection
+## Tokens Structure
-
+
-### Multiple Selection
+- `Tokens`—When multiple items are selected from the dropdown list, these items appear as tokens. They can be deselected using their close button.
+- `ShowMore Template`—This template represents a UI that is displayed when the control is not focused and the space is insufficient to show all tokens in a multiple selection scenario.
-
+## Multiple Selection Structure
-## Legend
+
-- `Placeholder`—The text which is used to give guidance to the end user on what can be entered/searched in the input.
-- `ClearButton`—Clears the selection of the control both multiple and single.
- `Tokens`—When multiple items are selected from the dropdown list, these items appear as tokens. They can be deselected using their close button.
-- `SelectedItem`—The currently selected item.
-- `SelectedItems`—The selected items, when multiple selection is used.
-- `DropDownButton`—A button used for opening and closing the DropDown part of the control – the arrow icon of the button indicates whether it's currently opened or closed.
+- `SelectedItems`—The selected items when multiple selection is used.
+- `ShowMore Template`—This template represents a UI that is displayed when the control is not focused and the space is insufficient to show all tokens in a multiple selection scenario.
+
+## Edit Mode Structure
+
+
+
+- `Clear Button`—Clears the selection in the control (for both multiple and single selection scenarios).
+- `DropDown Button`—A button used for opening and closing the DropDown part of the control–the arrow icon of the button indicates whether it's currently opened or closed.
+- [`RadTextInput`]({%slug entry-textinput%})—The control used for the text input.
+- `Text`—The text entered in the control's input filed.
+- `Highlighted Items`—The items that match the text entered in the input area.
diff --git a/controls/dataform/overview.md b/controls/dataform/overview.md
index 9d4b581a1..6e2197f18 100644
--- a/controls/dataform/overview.md
+++ b/controls/dataform/overview.md
@@ -12,7 +12,7 @@ The Telerik UI for .NET MAUI DataForm is a customizable component allowing you t
-## Key Features
+## Key Features of the .NET MAUI DataForm
* [Built-in editors]({%slug dataform-editors%})—DataForm provides a set of built-in editors for the available primitive types such as `numeric`, `string`, `boolean`, `enumerations`, `DateTime`, `TimeSpan`. The control detects the types of the data object’s properties and automatically displays the proper editor.
diff --git a/controls/datagrid/columns/cell-templates.md b/controls/datagrid/columns/cell-templates.md
index b471d1999..783ad55ed 100644
--- a/controls/datagrid/columns/cell-templates.md
+++ b/controls/datagrid/columns/cell-templates.md
@@ -11,18 +11,19 @@ slug: datagrid-cell-templates
This article describes how to extend the functionality of a [.NET MAUI DataGrid]({%slug datagrid-overview%}) column and define custom content and edit templates using the `CellContentTemplate` and `CellEditTemplate` properties.
-* `CellContentTemplate` (DataTemplate): Defines the appearance of each cell associated with the concrete column. `CellContentTemplate` gives you the opportunity to wrap the text inside each DataGrid column. You can add a Label as a content of the Text, Template Column and wrap its text using the Label's `LineBreakMode` property.
-* `CellEditTemplate` (DataTemplate): Defines the editor associated with the concrete column. The `CellEditTemplate` is displayed when the cell is in edit mode.
+* `CellContentTemplate` (`DataTemplate`)—Defines the appearance of each cell associated with the concrete column. `CellContentTemplate` gives you the opportunity to wrap the text inside each DataGrid column. You can add a Label as a content of the Text, Template Column and wrap its text using the Label's `LineBreakMode` property.
+* `CellContentTemplateSelector` (`DataTemplateSelector`)—Defines a `DataTemplateSelector` instance that may be used to retrieve dynamic data templates on a per-cell basis.
+* `CellEditTemplate` (`DataTemplate`)—Defines the editor associated with the concrete column. The `CellEditTemplate` is displayed when the cell is in edit mode.
## Cell Content Template Example
The following example demonstrates how to use the `CellContentTemplate` property to customize your columns. We set a `RadDateTimePicker` as a `CellContentTemplate` for the DataGrid Date Column (Date Established) and a Switch - for the DataGrid Boolean Column (Champion).
-**1.** Use the following snippet to declare a `RadDataGrid` in XAML:
+**1.** Declare a `RadDataGrid` in XAML:
-**2.** Add the following namespaces:
+**2.** Add the `telerik` namespace:
```XAML
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
@@ -32,7 +33,7 @@ xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
-**4.** And the `Club` custom object:
+**4.** Define the `Club` custom object:
@@ -42,11 +43,11 @@ xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
The following example demonstrates how to use the `CellEditTemplate` property to customize your columns. Here, for the DataGrid Boolean Column (Champion) we set a `CellEditTemplate` containing a Switch and two Buttons for confirming or canceling the edit operation. The edit template is visualized when the cell is in edit mode.
-**1.** Use the following snippet to declare a `RadDataGrid` in XAML:
+**1.** Declare a `RadDataGrid` in XAML:
-**2.** Add the following namespaces:
+**2.** Add the `telerik` namespace:
```XAML
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
@@ -56,7 +57,7 @@ xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
-**4.** And the `Club` custom object:
+**4.** Define the `Club` custom object:
diff --git a/controls/datagrid/columns/column-types/boolean-column.md b/controls/datagrid/columns/column-types/boolean-column.md
index 4e54ca45f..ec4eae54a 100644
--- a/controls/datagrid/columns/column-types/boolean-column.md
+++ b/controls/datagrid/columns/column-types/boolean-column.md
@@ -19,7 +19,8 @@ The `DataGridBooleanColumn` is used to represent boolean values. It uses the Che
* `CellContentStyleSelector`—Defines the `StyleSelector` instance that allows for the dynamic appearance on a per-cell basis.
* `CellContentFormat`—Defines the custom format for each cell value. The `String.Format` routine is used and the format passed has to be in the form required by this method.
* `CellContentTemplate`(`DataTemplate`)—Defines the appearance of each cell associated with the concrete column. The `CellContenTemplate` enables you to customize the default content of the cell.
-* `CellEditTemplate`(`DataTemplate`)—Defines the editor associated with the concrete column. The `CellEditTemplate` is displayed when the cell is in edit mode.
+* `CellContentTemplateSelector` (`DataTemplateSelector`)—Defines a `DataTemplateSelector` instance that may be used to retrieve dynamic data templates on a per-cell basis.
+* * `CellEditTemplate`(`DataTemplate`)—Defines the editor associated with the concrete column. The `CellEditTemplate` is displayed when the cell is in edit mode.
* `FooterText`—Defines the content that will be displayed in the Footer UI that represents the column.
* `FooterStyle`(`DataGridColumnFooterStyle`)—Defines the `Style` object that sets the appearance of each footer cell associated with this column.
* `FooterContentTemplate`(`DataTemplate`)—Defines the appearance of the footer.
diff --git a/controls/datagrid/columns/column-types/date-column.md b/controls/datagrid/columns/column-types/date-column.md
index 518aeac07..484c96604 100644
--- a/controls/datagrid/columns/column-types/date-column.md
+++ b/controls/datagrid/columns/column-types/date-column.md
@@ -19,6 +19,7 @@ The `DataGridDateColumn` is used to represent `DateTime` objects. It uses the Te
* `CellContentStyleSelector`—Defines the `StyleSelector` instance that allows for the dynamic appearance on a per-cell basis.
* `CellContentFormat`—Specifies the custom format for each cell value. The `String.Format` routine is used and the format passed has to be in the form required by this method.
* `CellContentTemplate` (`DataTemplate`)—Defines the appearance of each cell associated with the concrete column. `CellContenTemplate` enables you to customize the default content of the cell.
+* `CellContentTemplateSelector` (`DataTemplateSelector`)—Defines a `DataTemplateSelector` instance that may be used to retrieve dynamic data templates on a per-cell basis.
* `CellEditTemplate` (`DataTemplate`)—Defines the editor associated with the concrete column. The `CellEditTemplate` is displayed when the cell is in edit mode.
* `FooterText`—Defines the content that will be displayed in the Footer UI that represents the column.
* `FooterStyle` (`DataGridColumnFooterStyle`)—Defines the `Style` object that sets the appearance of each footer cell associated with this column.
diff --git a/controls/datagrid/columns/column-types/numerical-column.md b/controls/datagrid/columns/column-types/numerical-column.md
index 037f0fcdd..b7960bfd1 100644
--- a/controls/datagrid/columns/column-types/numerical-column.md
+++ b/controls/datagrid/columns/column-types/numerical-column.md
@@ -19,6 +19,7 @@ The `DataGridNumericalColumn` is used to represent only numerical values. It use
* `CellContentStyleSelector`—Defines the `StyleSelector` instance that allows for the dynamic appearance on a per-cell basis.
* `CellContentFormat`—Defines the custom format for each cell value. The `String.Format` routine is used and the format passed has to be in the form required by this method.
* `CellContentTemplate` (`DataTemplate`)—Defines the appearance of each cell associated with the concrete column. `CellContenTemplate` enables you to customize the default look of the cell.
+* `CellContentTemplateSelector` (`DataTemplateSelector`)—Defines a `DataTemplateSelector` instance that may be used to retrieve dynamic data templates on a per-cell basis.
* `CellEditTemplate` (`DataTemplate`)—Defines the editor associated with the concrete column. The `CellEditTemplate` is displayed when the cell is in edit mode.
* `FooterText`—Defines the content that will be displayed in the Footer UI that represents the column.
* `FooterStyle` (`DataGridColumnFooterStyle`)—Defines the `Style` object that sets the appearance of each footer cell associated with this column.
diff --git a/controls/datagrid/columns/column-types/picker-column.md b/controls/datagrid/columns/column-types/picker-column.md
index d575d11b9..cb16230f0 100644
--- a/controls/datagrid/columns/column-types/picker-column.md
+++ b/controls/datagrid/columns/column-types/picker-column.md
@@ -24,6 +24,7 @@ Here are the specific properties defined for `DataGridPickerColumn`:
* `CellContentStyleSelector`—Defines the `StyleSelector` instance that allows for the dynamic appearance on a per-cell basis.
* `CellContentFormat`—Defines the custom format for each cell value. The `String.Format` routine is used and the format passed has to be in the form required by this method.
* `CellContentTemplate` (`DataTemplate`)—Defines the appearance of each cell associated with the concrete column. `CellContenTemplate` enables you to customize the default look of the cell.
+* `CellContentTemplateSelector` (`DataTemplateSelector`)—Defines a `DataTemplateSelector` instance that may be used to retrieve dynamic data templates on a per-cell basis.
* `CellEditTemplate` (`DataTemplate`)—Defines the editor associated with the concrete column. The `CellEditTemplate` is displayed when the cell is in edit mode.
* `FilterControlTemplate`(`DataTemplate`)—Specifies the user defined template used for the Filtering UI. The template must contain an instance of the `Telerik.Maui.Controls.DataGrid.DataGridFilterControlBase` class.
* `FooterText`—Defines the content that will be displayed in the Footer UI that represents the column.
diff --git a/controls/datagrid/columns/column-types/text-column.md b/controls/datagrid/columns/column-types/text-column.md
index e4766743c..6cd98e7e1 100644
--- a/controls/datagrid/columns/column-types/text-column.md
+++ b/controls/datagrid/columns/column-types/text-column.md
@@ -23,6 +23,7 @@ Here are the specific properties for the Text Columns:
* `CellContentStyle`(`DataGridTextCellStyle`)—Defines the appearance of each cell associated with this column.
* `CellContentStyleSelector`—Defines the `StyleSelector` instance that allows for the dynamic appearance on a per-cell basis.
* `CellContentTemplate` (`DataTemplate`)—Defines the appearance of each cell associated with the concrete column. `CellContenTemplate` enables you to customize the default content of the cell.
+* `CellContentTemplateSelector` (`DataTemplateSelector`)—Defines a `DataTemplateSelector` instance that may be used to retrieve dynamic data templates on a per-cell basis.
* `CellEditTemplate` (`DataTemplate`)—Defines the editor associated with the concrete column. The `CellEditTemplate` is displayed when the cell is in edit mode.
* `FooterText`—Defines the content that will be displayed in the Footer UI that represents the column.
* `FooterStyle` (`DataGridColumnFooterStyle`)—Defines the `Style` object that sets the appearance of each footer cell associated with this column.
diff --git a/controls/datagrid/columns/column-types/time-column.md b/controls/datagrid/columns/column-types/time-column.md
index 0f4ba520c..48efd6936 100644
--- a/controls/datagrid/columns/column-types/time-column.md
+++ b/controls/datagrid/columns/column-types/time-column.md
@@ -19,6 +19,7 @@ The `DataGridTimeColumn` is used to represent `TimeSpan` objects. It uses the Te
* `CellContentStyleSelector`—Defines the `StyleSelector` instance that allows for the dynamic appearance on a per-cell basis.
* `CellContentFormat`—Defines the custom format for each cell value. The `String.Format` routine is used and the format passed has to be in the form required by this method.
* `CellContentTemplate` (`DataTemplate`)—Defines the appearance of each cell associated with the concrete column. `CellContenTemplate` enables you to customize the default content of the cell.
+* `CellContentTemplateSelector` (`DataTemplateSelector`)—Defines a `DataTemplateSelector` instance that may be used to retrieve dynamic data templates on a per-cell basis.
* `CellEditTemplate` (`DataTemplate`)—Defines the editor associated with the concrete column. The `CellEditTemplate` is displayed when the cell is in edit mode.
* `FooterText`—Defines the content that will be displayed in the Footer UI that represents the column.
* `FooterStyle` (`DataGridColumnFooterStyle`)—Defines the `Style` object that sets the appearance of each footer cell associated with this column.
diff --git a/controls/datagrid/overview.md b/controls/datagrid/overview.md
index 601b447b6..e08d54704 100644
--- a/controls/datagrid/overview.md
+++ b/controls/datagrid/overview.md
@@ -19,7 +19,7 @@ The optimized data layer of the DataGrid enables fast grouping, sorting, and fil
-## Key Features of the Telerik .NET MAUI Grid
+## Key Features of the .NET MAUI DataGrid
* [Different column types]({%slug datagrid-columns-overview %})—The MAUI DataGrid provides a set of built-in columns such as Text, Boolean, Numeric, ComboBox, Date, Time, and Template. These predefined templates allow you to handle different data types and user scenarios, each with its specific editor.
diff --git a/controls/datapager/images/datapager-databinding.png b/controls/datapager/images/datapager-databinding.png
index 6526f0a43..49754fa6c 100644
Binary files a/controls/datapager/images/datapager-databinding.png and b/controls/datapager/images/datapager-databinding.png differ
diff --git a/controls/datapager/overview.md b/controls/datapager/overview.md
index 808df3e5f..c311b198a 100644
--- a/controls/datapager/overview.md
+++ b/controls/datapager/overview.md
@@ -12,7 +12,7 @@ The Telerik UI for .NET MAUI DataPager provides users with a navigation interfac
-## Key Features
+## Key Features of the .NET MAUI DataPager
* [Data Binding]({%slug datapager-data-binding%})—You can bind the DataPager to any collection that implements the `IEnumerable` interface, making it suitable for paging any collection.
* [Display modes]({%slug datapager-display-mode%})—You can use different modes to define which of the visual elements in the DataPager will be visible, for example, the first/last/next page buttons and more.
diff --git a/controls/datepicker/overview.md b/controls/datepicker/overview.md
index 14ebddf72..94b8f8ff4 100644
--- a/controls/datepicker/overview.md
+++ b/controls/datepicker/overview.md
@@ -13,7 +13,7 @@ The Telerik UI for .NET MAUI DatePicker allows you to select a date and visualiz
-## Key Features
+## Key Features of the .NET MAUI DatePicker
* [Spinner format]({%slug datepicker-formatting%}#setting-the-spinner-format)—The DatePicker for .NET MAUI allows you to use a standard or custom date format string through its `SpinnerFormat` property. Depending on the type of format, the picker visualizes spinner controls with the pre-populated values.
* [Picker mode]({%slug datepicker-picker-mode%})—You can choose between the popup and drop-down UI for showing the spinner controls with the available date values. For desktop apps, the default picker mode is `DropDown` while for mobile it's `Popup`.
diff --git a/controls/datetimepicker/overview.md b/controls/datetimepicker/overview.md
index 204c5d527..cf7b74cb6 100644
--- a/controls/datetimepicker/overview.md
+++ b/controls/datetimepicker/overview.md
@@ -12,7 +12,7 @@ The Telerik UI for .NET MAUI DateTimePicker provides a way to pick a date, time
-## Key Features
+## Key Features of the .NET MAUI DateTimePicker
* [Spinner format]({%slug datetimepicker-formatting%}#setting-the-spinner-format)—The DateTimePicker for .NET MAUI allows you to use a standard or custom date format string through its `SpinnerFormat` property. Depending on what format is set, the picker visualizes spinner controls with the prepopulated values ready to be picked.
diff --git a/controls/docklayout/overview.md b/controls/docklayout/overview.md
index 910e9b2c8..35d7b2741 100644
--- a/controls/docklayout/overview.md
+++ b/controls/docklayout/overview.md
@@ -13,7 +13,7 @@ The Telerik UI for .NET MAUI DockLayout is a layout control that provides a mech
-## Key Features
+## Key Features of the .NET MAUI DockLayout
* [Docking functionality]({% slug docklayout-docking %})—You can set the position of each child element inside the layout as well as render multiple child elements to one side.
* [Adaptable docking]({% slug docklayout-docking %}#setting-the-position-of-the-last-child-element)—The DockLayout enables you to overwrite the default behavior of the last docked element, which stretches over the remaining space that is unoccupied by the other child elements.
diff --git a/controls/entry/images/entry-focused-text.png b/controls/entry/images/entry-focused-text.png
new file mode 100644
index 000000000..fef35744d
Binary files /dev/null and b/controls/entry/images/entry-focused-text.png differ
diff --git a/controls/entry/images/entry-valid-text.png b/controls/entry/images/entry-valid-text.png
new file mode 100644
index 000000000..7c7a17a2e
Binary files /dev/null and b/controls/entry/images/entry-valid-text.png differ
diff --git a/controls/entry/images/winui-entry.png b/controls/entry/images/winui-entry.png
new file mode 100644
index 000000000..5e772b54e
Binary files /dev/null and b/controls/entry/images/winui-entry.png differ
diff --git a/controls/entry/overview.md b/controls/entry/overview.md
index 777d93e8d..fc6de2344 100644
--- a/controls/entry/overview.md
+++ b/controls/entry/overview.md
@@ -14,7 +14,7 @@ The Telerik UI for .NET MAUI Entry is a text input control that accepts string i
-## Key Features
+## Key Features of the .NET MAUI Entry
* [Placeholder]({%slug entry-text-appearance%}#adding-watermarks)—The Entry allows you to add a hint text as a placeholder to guide the users what is the expected input. In addition you can style the Placeholder.
diff --git a/controls/entry/styling.md b/controls/entry/styling.md
index f79b5ca7e..462859184 100644
--- a/controls/entry/styling.md
+++ b/controls/entry/styling.md
@@ -56,6 +56,9 @@ The following example demonstrates how to apply the font options to the Entry.
## See Also
+- [Apply Implicit Style]({%slug style-combobox-autocomplete-entry-implicit-explicit%})
- [Text Appearance]({% slug entry-text-appearance%})
- [Text Selection]({%slug entry-text-selection %})
- [Events]({% slug entry-events%})
+- [Styling Entry in Telerik MAUI After Upgrading to Version 8.0.0 or Later]({%slug style-entry-visual-state-border-telerik-maui%})
+- [Comparison Between Entry and TextInput]({%slug entry-vs-textinput%})
\ No newline at end of file
diff --git a/controls/entry/text-input.md b/controls/entry/text-input.md
index fbaee3059..254473bc3 100644
--- a/controls/entry/text-input.md
+++ b/controls/entry/text-input.md
@@ -26,3 +26,4 @@ Along with the properties the Telerik .NET MAUI TextInput control inherits from
- [Entry Overview]({%slug entry-overview%})
- [Entry Styling]({%slug entry-styling%})
+- [Comparison Between Entry and TextInput]({%slug entry-vs-textinput%})
diff --git a/controls/entry/visual-states.md b/controls/entry/visual-states.md
index b402e5525..a433066af 100644
--- a/controls/entry/visual-states.md
+++ b/controls/entry/visual-states.md
@@ -68,3 +68,5 @@ This is the result on WinUI:
## See Also
- [Entry Styling]({%slug entry-styling%})
+- [Apply Implicit Style]({%slug style-combobox-autocomplete-entry-implicit-explicit%})
+- [Styling Entry Using Visual States]({%slug style-entry-visual-state-border-telerik-maui%})
diff --git a/controls/entry/visual-structure.md b/controls/entry/visual-structure.md
new file mode 100644
index 000000000..196672601
--- /dev/null
+++ b/controls/entry/visual-structure.md
@@ -0,0 +1,37 @@
+---
+title: Visual Structure
+page_title: .NET MAUI Entry Documentation - Entry Visual Structure
+description: Learn more about the visual elements used in the Telerik UI for .NET MAUI Entry control.
+position: 0
+slug: entry-visual-structure
+---
+
+# .NET MAUI Entry Visual Structure
+
+The visual structure of the [.NET MAUI Entry]({%slug entry-overview%}) represents the anatomy of the UI control. Being familiar with the visual elements of the Entry allows you to quickly find the information required to configure them.
+
+The images in this article show the anatomy of the Entry and its building blocks.
+
+## Entry Visual Structure
+
+
+
+- `Placeholder`—The text that guides the end-user on what can be entered/searched in the input.
+- [`RadTextInput`]({%slug entry-textinput%})—The control used for the text input.
+
+## Input Structure
+
+
+
+- `Text`—The text entered in the control's input filed.
+- [`RadTextInput`]({%slug entry-textinput%})—The control used for the text input.
+- `Clear Button`—Clears the selection in the control for both multiple and single selection scenarios.
+
+## Validation Structure
+
+
+
+- `Text`—The text entered in the control's input filed.
+- `Clear Button`—Clears the selection in the control for both multiple and single selection scenarios.
+- `Style when IsValueValis is False`—Specifies the style applied when the value entered in the input field is invalid.
+- `Invalid Image`—An image is displayed when the input value is invalid.
diff --git a/controls/expander/overview.md b/controls/expander/overview.md
index 248768754..0fe45bea6 100644
--- a/controls/expander/overview.md
+++ b/controls/expander/overview.md
@@ -12,7 +12,7 @@ The Telerik UI for .NET MAUI Expander helps you save screen space by presenting
-## Configurations
+## Key Features of the .NET MAUI Expander
* [Collapsed/expanded states]({%slug expander-configuration%})—Expander provides an expandable area which can hold content of your choice. The end users can show or hide this content by interacting with the Header of the control.
* [Customizable Header]({%slug expander-header%})—You have full control over the visual appearance of the Header of the control.
diff --git a/controls/gauge/overview.md b/controls/gauge/overview.md
index 3e3e710fb..9880e31f6 100644
--- a/controls/gauge/overview.md
+++ b/controls/gauge/overview.md
@@ -15,7 +15,7 @@ To provide the indicated value or values with context, the Gauges use axes and r
-## Key Features
+## Key Features of the .NET MAUI Gauge
* Gauge types—The Gauge control comes in three individual types, which enable you to display the gauge scale through different layouts. Depending on the requirements of your project, you can choose between the [Horizontal Gauge]({% slug gauge-types-horizontal %}), [Vertical Gauge]({% slug gauge-types-vertical %}), or [Radial Gauge]({% slug gauge-types-radial %}).
* [Axis options]({% slug gauge-axis %})—The supported axis options provide full control over the display of the Gauge axis including its ticks, labels, appearance, and axis range.
diff --git a/controls/gridsplitter/overview.md b/controls/gridsplitter/overview.md
index d65528ea3..109153301 100644
--- a/controls/gridsplitter/overview.md
+++ b/controls/gridsplitter/overview.md
@@ -18,7 +18,7 @@ You can define the GridSplitter to be located within its own row (for horizontal
-## Key Features
+## Key Features of the .NET MAUI GridSplitter
* [Resize behavior]({%slug gridsplitter-configuration%}#resize-behavior)—The GridSplitter allows you to control which columns or rows are resized relative to the position of the splitter.
* [Resize direction]({%slug gridsplitter-configuration%}#resize-direction)—You can control whether the GridSplitter control resizes rows or columns.
diff --git a/controls/imageeditor/overview.md b/controls/imageeditor/overview.md
index 74b65a661..c97a45d9c 100644
--- a/controls/imageeditor/overview.md
+++ b/controls/imageeditor/overview.md
@@ -12,7 +12,7 @@ The Telerik UI for .NET MAUI ImageEditor is a control that enables you to visual
-## Key features
+## Key Features of the .NET MAUI ImageEditor
* Importing and Exporting images—ImageEditor allows you to import different image formats such as `.jpeg`, `.png`, `.gif`, `.bmp` and export images in `.jpeg`, `.png`, `.gif`, `.bmp` formats.
* [Various image source options]({%slug imageeditor-loading-image%})—Load images from a Stream, File (as embedded resource, or image located on the device) and URI.
diff --git a/controls/itemscontrol/overview.md b/controls/itemscontrol/overview.md
index 916008eb9..283901138 100644
--- a/controls/itemscontrol/overview.md
+++ b/controls/itemscontrol/overview.md
@@ -14,7 +14,7 @@ The Telerik UI for .NET MAUI ItemsControl enables you to visualize a list of ite
-## Key Features
+## Key Features of the .NET MAUI ItemsControl
* [Setting the ItemsSource]({% slug itemscontrol-configuration %}#setting-the-items-source)—The ItemsControl provides the `ItemsSource` property, which enables you to define a collection of items and populate them with data.
* [Using Template]({% slug itemscontrol-configuration %}#customizing-the-appearance)—You can also customize the visualization of the ItemsControl items by using the `ItemTemplate` property.
diff --git a/controls/listpicker/overview.md b/controls/listpicker/overview.md
index 45c22ee5e..56569d9c3 100644
--- a/controls/listpicker/overview.md
+++ b/controls/listpicker/overview.md
@@ -13,7 +13,7 @@ The Telerik UI for .NET MAUI ListPicker allows the user to select an item from a
-## Key Features
+## Key Features of the .NET MAUI ListPicker
* [Looping]({%slug listpicker-looping%})—The ListPicker enables you to loop through its items infinitely while scrolling.
* [Picker mode]({%slug listpicker-picker-mode%})—You can choose between `Popup` and `DropDown` UI for showing the items inside the list picker. For Desktop the default picker mode is `DropDown` while for mobile it's `Popup`.
diff --git a/controls/listview/overview.md b/controls/listview/overview.md
index fa671a7bc..9de25aa25 100644
--- a/controls/listview/overview.md
+++ b/controls/listview/overview.md
@@ -15,7 +15,7 @@ The Telerik .NET MAUI ListView is a virtualizing list component that provides th
-## Key Features of the Telerik .NET MAUI ListView
+## Key Features of the .NET MAUI ListView
* [Selection]({% slug listview-features-selection %})—The .NET MAUI ListView supports both single and multiple selections and you can also select items on tap and hold gestures.
diff --git a/controls/map/overview.md b/controls/map/overview.md
index 6f39642b7..16bc9f44c 100644
--- a/controls/map/overview.md
+++ b/controls/map/overview.md
@@ -12,7 +12,7 @@ The Telerik UI for .NET MAUI Map is a data visualization control whose primary p
-## Key Features
+## Key Features of the .NET MAUI Map
* [Shapefile visualization]({% slug map-layers-overview %})—The Map can display rich spatial data from ESRI shapefiles. Each shapefile has to be loaded and configured through a `MapShapefileLayer` instance added to the Layers collection of the control.
diff --git a/controls/maskedentry/overview.md b/controls/maskedentry/overview.md
index 2f62f0649..0281e8d2b 100644
--- a/controls/maskedentry/overview.md
+++ b/controls/maskedentry/overview.md
@@ -13,7 +13,7 @@ Telerik UI for .NET MAUI MaskedEntry formats and restricts text inputs to predef
-## Key Features
+## Key Features of the .NET MAUI MaskedEntry
* [Mask types]({%slug maskedentry-masked-types%})—The MaskedEntry allows you to define a string of characters that constrain user input. The `Mask` property may contain literals and special mask characters based on the used MaskedEntry such as Regex, Numeric, and more.
diff --git a/controls/navigationview/overview.md b/controls/navigationview/overview.md
index 79de24945..4ceb9aabb 100644
--- a/controls/navigationview/overview.md
+++ b/controls/navigationview/overview.md
@@ -12,7 +12,7 @@ The Telerik UI for .NET MAUI NavigationView is an adaptive control used to build
-## Key Features
+## Key Features of the .NET MAUI NavigationView
* [Display modes]({%slug navigationview-display-mode%})—You can use different modes to display the navigation pane—Compact, Expanded and Minimal.
* [Auto-changing the Display mode]({%slug navigationview-display-mode%})—NavigationView provides an option for automatically changing the display mode depending on the threshold width.
diff --git a/controls/numericinput/overview.md b/controls/numericinput/overview.md
index e19cb4d13..35ab5e193 100644
--- a/controls/numericinput/overview.md
+++ b/controls/numericinput/overview.md
@@ -13,7 +13,7 @@ Telerik UI for .NET MAUI NumericInput is a customizable input control for numeri
-## Key Features
+## Key Features of the .NET MAUI NumericInput
* [Minimum and maximum values]({% slug numericinput-configuration%}#input-range %})—The NumericInput allows you to restrict the input value through setting its `Minimum` and `Maximum` properties.
diff --git a/controls/path/overview.md b/controls/path/overview.md
index b11940010..64311a608 100644
--- a/controls/path/overview.md
+++ b/controls/path/overview.md
@@ -13,7 +13,7 @@ The Telerik UI for .NET MAUI Path is a control which can be used to draw complex
-## Key Features
+## Key Features of the .NET MAUI Path
* [Built-in geometries]({%slug geometry-types%})—The Path supports predefined geometries like: `Star`, `Circle`, `Heart` and `Diamond`.
diff --git a/controls/pdfviewer/annotations.md b/controls/pdfviewer/annotations.md
index fc21c5c40..c5e89cef1 100644
--- a/controls/pdfviewer/annotations.md
+++ b/controls/pdfviewer/annotations.md
@@ -8,7 +8,7 @@ slug: pdfviewer-annotations
# Link Annotations
-The Telerik .NET MAUI PDF Viewer supports link annotations. This feature allows the user to tap any hyperlink that leads to an absolute URI, and the link will open in the browser. In addition, if the PDF contains links that point to bookmarks in the same document, the viewport scrolls to the destination specified in the link.
+The Telerik .NET MAUI PDF Viewer supports link annotations. This feature allows the user to tap any hyperlink that leads to an absolute URI, and the link will open in the browser. In addition, if the PDF contains links that point to bookmarks in the same document, the viewport scrolls to the destination specified in the link.
diff --git a/controls/pdfviewer/commands.md b/controls/pdfviewer/commands.md
index c7a35cd66..3ec59bd66 100644
--- a/controls/pdfviewer/commands.md
+++ b/controls/pdfviewer/commands.md
@@ -8,7 +8,7 @@ slug: pdfviewer-commands
# Commands
-PDF Viewer provides the following commands of type `ICommand`:
+The .NET MAUI PDF Viewer provides the following commands of type `ICommand`:
* `ZoomInCommand`—Zooms in.
* `ZoomOutCommand`—Zooms out.
diff --git a/controls/pdfviewer/configuration.md b/controls/pdfviewer/configuration.md
index 2556746f2..1bfee7a8e 100644
--- a/controls/pdfviewer/configuration.md
+++ b/controls/pdfviewer/configuration.md
@@ -8,7 +8,7 @@ slug: pdfviewer-configuration
# Configuration
-By setting the configuration options of the Telerik UI for .NET MAUI PDF Viewer, you can control how the opened document looks on the screen.
+By setting the configuration options of the Telerik UI for .NET MAUI PDF Viewer, you can control how the opened document looks on the screen.
## Setting the Zoom Level
diff --git a/controls/pdfviewer/display-documents.md b/controls/pdfviewer/display-documents.md
index 2b0abd1dd..d386b5838 100644
--- a/controls/pdfviewer/display-documents.md
+++ b/controls/pdfviewer/display-documents.md
@@ -12,7 +12,7 @@ The Telerik UI for .NET MAUI PDF Viewer control enables you to visualize PDF doc
## Visualize Documents from a Fixed Document
-The PDF Viewer allows you to load the PDF document from a stream by using the `RadFixedDocument` element.
+The .NET MAUI PDF Viewer allows you to load the PDF document from a stream by using the `RadFixedDocument` element.
By using this approach, you have more control over the loading process, for example, you can modify the document after importing it and before assigning it as a `Source` to the PDF Viewer control. For more details, check [`RadFixedDocument`](https://docs.telerik.com/devtools/document-processing/libraries/radpdfprocessing/model/radfixeddocument) topic from `RadPdfProcessing` documentation.
diff --git a/controls/pdfviewer/events.md b/controls/pdfviewer/events.md
index 56eb89f9a..187b4217f 100644
--- a/controls/pdfviewer/events.md
+++ b/controls/pdfviewer/events.md
@@ -12,7 +12,7 @@ The Telerik UI for .NET MAUI PDF Viewer provides various events that allow you t
## Page Elements Loaded
-The PDF Viewer raises the `PageElementsLoaded` event when all elements on the page are loaded. Use this event to alter the page content before it is rendered. This event is raised on a background thread.
+The .NET MAUI PDF Viewer raises the `PageElementsLoaded` event when all elements on the page are loaded. Use this event to alter the page content before it is rendered. This event is raised on a background thread.
The `PageElementsLoaded` event handler receives two parameters:
* `sender`—The PDF Viewer control.
diff --git a/controls/pdfviewer/fonts.md b/controls/pdfviewer/fonts.md
index 585975903..fbb799a04 100644
--- a/controls/pdfviewer/fonts.md
+++ b/controls/pdfviewer/fonts.md
@@ -12,7 +12,7 @@ The Telerik UI for .NET MAUI PDF Viewer supports [standard](#standard-fonts) and
## Standard Fonts
-There are 14 standard fonts that are not embedded in the document when you use them. As our .NET MAUI PDF Viewer works with the [RadPdfProcessing](https://docs.telerik.com/devtools/document-processing/libraries/radpdfprocessing/overview) model, these fonts can be accessed through the PdfProcessing [`FontsRepository` class](https://docs.telerik.com/devtools/document-processing/api/telerik.windows.documents.fixed.model.fonts.fontsrepository).
+There are 14 standard fonts that are not embedded in the document when you use them. As our .NET MAUI PDF Viewer works with the [RadPdfProcessing](https://docs.telerik.com/devtools/document-processing/libraries/radpdfprocessing/overview) model, these fonts can be accessed through the PdfProcessing [`FontsRepository` class](https://docs.telerik.com/devtools/document-processing/api/telerik.windows.documents.fixed.model.fonts.fontsrepository).
You can find a full list of the provided standard fonts below:
diff --git a/controls/pdfviewer/layout-mode.md b/controls/pdfviewer/layout-mode.md
index 110f05553..cb0f0c224 100644
--- a/controls/pdfviewer/layout-mode.md
+++ b/controls/pdfviewer/layout-mode.md
@@ -17,7 +17,7 @@ The available options are:
The current `LayoutMode` can be changed through the `ToggleLayoutModeCommand` and the `ToggleLayoutModeToolbarItem` [`RadPdfViewer` commands]({%slug pdfviewer-commands%}).
-Here is how the PDF Viewer looks when the `LayoutMode` is set to `ContinuousScroll`:
+Here is how the .NET MAUI PDF Viewer looks when the `LayoutMode` is set to `ContinuousScroll`:
diff --git a/controls/pdfviewer/localization.md b/controls/pdfviewer/localization.md
index c1ce58493..53fe94bd5 100644
--- a/controls/pdfviewer/localization.md
+++ b/controls/pdfviewer/localization.md
@@ -8,7 +8,7 @@ slug: pdfviewer-localization
# .NET MAUI PDF Viewer Localization
-The Telerik UI for .NET MAUI PDF Viewer provides localization support. Localization refers to the translation of application resources into localized versions for the specific languages that the application supports.
+The Telerik UI for .NET MAUI PDF Viewer provides localization support. Localization refers to the translation of application resources into localized versions for the specific languages that the application supports.
>important For more details about the localization process of Telerik UI for .NET MAUI components, refer to the topic about [common globalization and localization support by Telerik UI for .NET MAUI]({%slug globalization-localization%}).
diff --git a/controls/pdfviewer/overview.md b/controls/pdfviewer/overview.md
index 01c21cec2..79c7c1042 100644
--- a/controls/pdfviewer/overview.md
+++ b/controls/pdfviewer/overview.md
@@ -12,7 +12,7 @@ The Telerik UI for .NET MAUI. PDF Viewer enables you to easily load and display
-## Key Features
+## Key Features of the .NET MAUI PDF Viewer
* Visualization PDF documents—The component displays PDF documents that include images, geometric shapes, different colors (solid, linear, and radial gradients), ordered and unordered lists, and many more.
* [Support for various document sources]({%slug pdfviewer-display-documents%})—You can load a PDF document from a stream, from a file added as embedded resource, or a file located on the device, and so on.
diff --git a/controls/pdfviewer/password.md b/controls/pdfviewer/password.md
index 80ba7a712..6d79e0d32 100644
--- a/controls/pdfviewer/password.md
+++ b/controls/pdfviewer/password.md
@@ -8,7 +8,7 @@ slug: pdfviewer-password
# Password-Protected PDF Document
-To allow the users to open password-protected documents in the PDF Viewer, you must handle the `SourcePasswordNeeded` event.
+To allow the users to open password-protected documents in the .NET MAUI PDF Viewer, you must handle the `SourcePasswordNeeded` event.
* `SourcePasswordNeeded`—Occurs when a user password is needed to load the document in the PDF Viewer. The `SourcePasswordNeeded` event handler receives two parameters:
* The sender argument, which is of type `object`, but can be cast to the `RadPdfViewer` type.
diff --git a/controls/pdfviewer/search/commands.md b/controls/pdfviewer/search/commands.md
index f581aaf5f..a438ada68 100644
--- a/controls/pdfviewer/search/commands.md
+++ b/controls/pdfviewer/search/commands.md
@@ -8,7 +8,7 @@ slug: pdfviewer-search-commands
# .NET MAUI PDF Viewer Search Commands
-The PDF Viewer for .NET MAUI provides the following commands related to Search feature:
+The .NET MAUI PDF Viewer provides the following commands related to Search feature:
* `OpenSearchViewCommand` (`ICommand`)—Opens the search view UI for entering the search text. This command is intended for desktop.
* `CloseSearchViewCommand` (`ICommand`)—Closes the search view UI for entering the search text. This command is intended for desktop.
diff --git a/controls/pdfviewer/search/configuration.md b/controls/pdfviewer/search/configuration.md
index 097a26f7c..af628b5d3 100644
--- a/controls/pdfviewer/search/configuration.md
+++ b/controls/pdfviewer/search/configuration.md
@@ -8,7 +8,7 @@ slug: pdfviewer-search-configuration
# .NET MAUI PDF Viewer Search Configuration
-The Telerik UI for .NET MAUI PDF Viewer exposes `SearchSettings` property which you can use to configure the search functionality options, such as search criteria, commands, highlight colors, and so on.
+The Telerik UI for .NET MAUI PDF Viewer exposes `SearchSettings` property which you can use to configure the search functionality options, such as search criteria, commands, highlight colors, and so on.
This article lists the `SearchSettings` properties that allow you to customize the search.
diff --git a/controls/pdfviewer/search/overview.md b/controls/pdfviewer/search/overview.md
index 53750d309..b2513b601 100644
--- a/controls/pdfviewer/search/overview.md
+++ b/controls/pdfviewer/search/overview.md
@@ -8,7 +8,7 @@ slug: pdfviewer-search-overview
# .NET MAUI PDF Viewer Search Overview
-The Telerik UI for .NET MAUI PdfViewer has a support for text search functionality which allows users to find and highlight text inside a PDF document.
+The Telerik UI for .NET MAUI PDF Viewer has a support for text search functionality which allows users to find and highlight text inside a PDF document.
You can take advantage of the built-in search toolbar items or search programmatically through the provided methods.
With the built-in search UI users can enter text and browse through the search results. In addition, a small toast message on mobile showing the count of the search results or a localizable message in case no results are found.
diff --git a/controls/pdfviewer/search/programmatic.md b/controls/pdfviewer/search/programmatic.md
index 71e6a3188..13f012c18 100644
--- a/controls/pdfviewer/search/programmatic.md
+++ b/controls/pdfviewer/search/programmatic.md
@@ -8,7 +8,7 @@ slug: pdfviewer-search-programmatic
# .NET MAUI PDF Viewer Search Programmatically
-The PDF Viewer for .NET MAUI allows you to programmatically search in the document.
+The .NET MAUI PDF Viewer allows you to programmatically search in the document.
## Manual Searching
diff --git a/controls/pdfviewer/search/styling.md b/controls/pdfviewer/search/styling.md
index 44d129924..40ef71947 100644
--- a/controls/pdfviewer/search/styling.md
+++ b/controls/pdfviewer/search/styling.md
@@ -8,7 +8,7 @@ slug: pdfviewer-search-styling
# .NET MAUI PDF Viewer Search Styling
-The PDF Viewer for .NET MAUI provides a flexible styling API for its search toolbar items.
+The .NET MAUI PDF Viewer provides a flexible styling API for its search toolbar items.
As the `PDFViewerToolbar` is based on the `RadToolbar` control, all toolbar items in the PDF Viewer inherit from `ButtonToolbarItem`. All styling properties available for the `ButtonToolbarItem` are also applicable for the PDF toolbar items.
diff --git a/controls/pdfviewer/search/toolbar.md b/controls/pdfviewer/search/toolbar.md
index 28b58f421..b7695da4b 100644
--- a/controls/pdfviewer/search/toolbar.md
+++ b/controls/pdfviewer/search/toolbar.md
@@ -8,7 +8,7 @@ slug: pdfviewer-search-toolbar
# .NET MAUI PDF Viewer Search Toolbar Items
-The .NET MAUI PDF Viewer provides built-in support for text searching. Through the exposed commands related to the search operation, namely `OpenSearchViewCommand`, `CloseSearchViewCommand`, `NavigateToNextSearchResultCommand`, and `NavigateToPreviousSearchResultCommand` users can manipulate the search toolbar behavior.
+The .NET MAUI PDF Viewer provides built-in support for text searching. Through the exposed commands related to the search operation, namely `OpenSearchViewCommand`, `CloseSearchViewCommand`, `NavigateToNextSearchResultCommand`, and `NavigateToPreviousSearchResultCommand` users can manipulate the search toolbar behavior.
In addition, `RadPdfViewerToolbar` exposes predefined toolbar items wired to the search.
diff --git a/controls/pdfviewer/selection/configuration.md b/controls/pdfviewer/selection/configuration.md
index 71148f6e8..9284ee2ed 100644
--- a/controls/pdfviewer/selection/configuration.md
+++ b/controls/pdfviewer/selection/configuration.md
@@ -35,7 +35,7 @@ When the user selects some text, this opens a default selection menu (context me
## Example: PDF Viewer Custom Selection Menu
-The following steps demonstrate how to use the PDF Viewer properties to customize the selection menu:
+The following steps demonstrate how to use the .NET MAUI PDF Viewer properties to customize the selection menu:
**1.** Add the PDF Viewer definition with the event:
diff --git a/controls/pdfviewer/selection/overview.md b/controls/pdfviewer/selection/overview.md
index 4b58c3f19..03c8bb08a 100644
--- a/controls/pdfviewer/selection/overview.md
+++ b/controls/pdfviewer/selection/overview.md
@@ -8,7 +8,7 @@ slug: pdfviewer-selection-overview
# .NET MAUI PDF Viewer Selection Overview
-By providing text selection functionality, the Telerik UI for .NET MAUI PDF Viewer enables users to mark and highlight a portion of the text.
+By providing text selection functionality, the Telerik UI for .NET MAUI PDF Viewer enables users to mark and highlight a portion of the text.
To initiate the text selection on mobile devices, the user must press and hold the target text. Two drag handles let the user modify the current selection.
diff --git a/controls/pdfviewer/toolbar/overview.md b/controls/pdfviewer/toolbar/overview.md
index 32520bf41..cd8eb167f 100644
--- a/controls/pdfviewer/toolbar/overview.md
+++ b/controls/pdfviewer/toolbar/overview.md
@@ -8,7 +8,7 @@ slug: pdfviewer-toolbar
# PDF Viewer Toolbar
-The PDF Viewer Toolbar includes the commands that the PDF Viewer provides. You also have the option to include additional toolbar items in the `PdfViewerToolbar` through a custom command.
+The .NET MAUI PDF Viewer Toolbar includes the commands that the PDF Viewer provides. You also have the option to include additional toolbar items in the `PdfViewerToolbar` through a custom command.
## Predefined Toolbar Items
diff --git a/controls/pdfviewer/toolbar/styling.md b/controls/pdfviewer/toolbar/styling.md
index a738a1578..4dff1f5d2 100644
--- a/controls/pdfviewer/toolbar/styling.md
+++ b/controls/pdfviewer/toolbar/styling.md
@@ -8,7 +8,7 @@ slug: pdfviewer-toolbar-styling
# .NET MAUI PDF Viewer Toolbar Styling
-The PDF Viewer for .NET MAUI provides a flexible styling API for its toolbar items.
+The .NET MAUI PDF Viewer provides a flexible styling API for its toolbar items.
As the `PDFViewerToolbar` is based on the `RadToolbar` control, all toolbar items in the PDF Viewer inherit from `ButtonToolbarItem`. All styling properties available for the `ButtonToolbarItem` are also applicable for the PDF toolbar items.
diff --git a/controls/pdfviewer/toolbar/visual-structure.md b/controls/pdfviewer/toolbar/visual-structure.md
index cf96067e4..2050c1cc6 100644
--- a/controls/pdfviewer/toolbar/visual-structure.md
+++ b/controls/pdfviewer/toolbar/visual-structure.md
@@ -8,7 +8,7 @@ slug: pdfviewer-toolbar-visual-structure
# .NET MAUI PDF Viewer Toolbar Visual Structure
-The visual structure of the .NET MAUI PDF Viewer represents the anatomy of the UI component. Being familiar with the visual elements of the PDF Viewer allows you to quickly find the information required to configure them.
+The visual structure of the .NET MAUI PDF Viewer represents the anatomy of the UI component. Being familiar with the visual elements of the PDF Viewer allows you to quickly find the information required to configure them.
The images in this article show the anatomy of the and its building blocks.
diff --git a/controls/pdfviewer/viewport.md b/controls/pdfviewer/viewport.md
index c5cdfdfd9..299d0dd3f 100644
--- a/controls/pdfviewer/viewport.md
+++ b/controls/pdfviewer/viewport.md
@@ -10,7 +10,7 @@ slug: pdfviewer-viewport
The Telerik UI for .NET MAUI PDF Viewer provides an API for getting and manipulating its viewport through the `Viewport` property and `ChangeViewport()` method.
-The viewport is the window where the PDF Viewer displays its content and users can change the viewport through zooming, panning, and scrolling:
+The viewport is the window where the .NET MAUI PDF Viewer displays its content and users can change the viewport through zooming, panning, and scrolling:
diff --git a/controls/pdfviewer/visual-structure.md b/controls/pdfviewer/visual-structure.md
index 133412503..c29e12e95 100644
--- a/controls/pdfviewer/visual-structure.md
+++ b/controls/pdfviewer/visual-structure.md
@@ -8,7 +8,7 @@ slug: pdfviewer-visual-structure
# .NET MAUI PDF Viewer Visual Structure
-The visual structure of the .NET MAUI PDF Viewer represents the anatomy of the UI component. Being familiar with the visual elements of the PDF Viewer allows you to quickly find the information required to configure them.
+The visual structure of the .NET MAUI PDF Viewer represents the anatomy of the UI component. Being familiar with the visual elements of the PDF Viewer allows you to quickly find the information required to configure them.
diff --git a/controls/popup/overview.md b/controls/popup/overview.md
index 641c3ecbd..de58cc613 100644
--- a/controls/popup/overview.md
+++ b/controls/popup/overview.md
@@ -15,7 +15,7 @@ The Popup lets you display content of your choice on top of an existing view. Th
-## Key Features
+## Key Features of the .NET MAUI Popup
* [Modal popups]({% slug popup-modal %})—You can define whether the popup will be modal or not. In both cases, the UI behind the MAUI popup gets inactive and cannot be used until the popup is closed. When you have a modal popup, it will not be automatically closed when the user clicks outside its viewport.
diff --git a/controls/progressbar/overview.md b/controls/progressbar/overview.md
index 45e9a1b07..0b9e826de 100644
--- a/controls/progressbar/overview.md
+++ b/controls/progressbar/overview.md
@@ -12,7 +12,7 @@ The Telerik .NET MAUI ProgressBar is designed to display progress information to
-## Key Features
+## Key Features of the .NET MAUI ProgressBar
* [Value and Progress]({%slug progressbar-configuration%}#value-and-progress)—Features are used to set and report the progress of a task inside the ProgressBar control.
* [Value range]({%slug progressbar-configuration%}#value-range)—Define value ranges by setting the minimum and maximum values.
diff --git a/controls/rangeslider/overview.md b/controls/rangeslider/overview.md
index ba9cadd9b..e8ab73ae4 100644
--- a/controls/rangeslider/overview.md
+++ b/controls/rangeslider/overview.md
@@ -12,7 +12,7 @@ slug: rangeslider-overview
-## Key Features
+## Key Features of the .NET MAUI RangeSlider
* [Range Thumb]({% slug rangeslider-range-thumb%})—Through the draggable range thumb users can quickly update the range start and end values.
* [Ticks]({% slug rangeslider-ticks%})—Add ticks to the range slider's track in order to enable users to easily identify the range start and end.
diff --git a/controls/rating/overview.md b/controls/rating/overview.md
index ce6a5a8b1..5afee017f 100644
--- a/controls/rating/overview.md
+++ b/controls/rating/overview.md
@@ -13,7 +13,7 @@ The Telerik UI for .NET MAUI Rating is an intuitive UI component that allows use
-## Key Features
+## Key Features of the .NET MAUI Rating
* [Configuration options]({%slug rating-configuration%})—Configure the Rating by setting the number ot items that will be displayed, the spacing between them and the predefined value.
* [Predefined rating shapes]({%slug rating-shape-rating%})—The Rating provides simple shapes such as star, circle, diamond and heart that can be used for rating items out of the box.
diff --git a/controls/richtexteditor/commands.md b/controls/richtexteditor/commands.md
index 79ca50c12..ae87fab42 100644
--- a/controls/richtexteditor/commands.md
+++ b/controls/richtexteditor/commands.md
@@ -8,7 +8,7 @@ slug: richtexteditor-commands
# Commands
-RichTextEditor provides the a long list of commands (of type `ICommand`) that allow you to perform various operations on the text.
+The [.NET MAUI RichTextEditor]({%slug richtexteditor-overview%}) provides the a long list of commands (of type `ICommand`) that allow you to perform various operations on the text.
| Commands | Description |
| ------------- | --------------- |
diff --git a/controls/richtexteditor/configuration.md b/controls/richtexteditor/configuration.md
index 4eaa708be..f529c2ff7 100644
--- a/controls/richtexteditor/configuration.md
+++ b/controls/richtexteditor/configuration.md
@@ -8,7 +8,7 @@ slug: richtexteditor-configuration
# Configuration
-By using the exposed configuration options of the .NET MAUI RichTextEditor, you can configure the component features, such as the HTML source, text formatting options, text selections, and the read-only mode.
+By using the exposed configuration options of the [.NET MAUI RichTextEditor]({%slug richtexteditor-overview%}), you can configure the component features, such as the HTML source, text formatting options, text selections, and the read-only mode.
## HTML Source Options
diff --git a/controls/richtexteditor/context-menu.md b/controls/richtexteditor/context-menu.md
index 2fe72672c..7ebfeb3ce 100644
--- a/controls/richtexteditor/context-menu.md
+++ b/controls/richtexteditor/context-menu.md
@@ -8,7 +8,7 @@ slug: richtexteditor-context-menu
# Context Menu
-The .NET MAUI RichTextEditor comes with a built-in context menu, which provides access to common operations, such as **Copy** and **Paste**, and enables the user to move content between apps or within an app.
+The [.NET MAUI RichTextEditor]({%slug richtexteditor-overview%}) comes with a built-in context menu, which provides access to common operations, such as **Copy** and **Paste**, and enables the user to move content between apps or within an app.
On WinUI and MacCatalyst, the context menu opens on a right-button click over the editor's content. On Android and iOS, it appears as soon as the user performs selection.
diff --git a/controls/richtexteditor/events.md b/controls/richtexteditor/events.md
index a35602b58..efc3d2460 100644
--- a/controls/richtexteditor/events.md
+++ b/controls/richtexteditor/events.md
@@ -8,7 +8,7 @@ slug: richtexteditor-events
# Events
-The .NET MAUI RichTextEditor emits a set of events that allow you to configure the component's behavior in response to specific user actions.
+The [.NET MAUI RichTextEditor]({%slug richtexteditor-overview%}) emits a set of events that allow you to configure the component's behavior in response to specific user actions.
The RichTextEditor component exposes the following events:
diff --git a/controls/richtexteditor/hyperlink-support.md b/controls/richtexteditor/hyperlink-support.md
index d0a4dae42..b1534bd3c 100644
--- a/controls/richtexteditor/hyperlink-support.md
+++ b/controls/richtexteditor/hyperlink-support.md
@@ -8,7 +8,7 @@ slug: richtexteditor-hyperlink-support
# Hyperlink Support
-RichTextEditor provides built-in support for creating and managing hyperlinks. Through the exposed commands related to hyperlinks, namely `ApplyHyperlinkCommand`, `RemoveHyperlinkCommand`, and `OpenHyperlinkCommand`, users can manipulate the hyperlinks inside the RichTextEditor content.
+The [.NET MAUI RichTextEditor]({%slug richtexteditor-overview%}) provides built-in support for creating and managing hyperlinks. Through the exposed commands related to hyperlinks, namely `ApplyHyperlinkCommand`, `RemoveHyperlinkCommand`, and `OpenHyperlinkCommand`, users can manipulate the hyperlinks inside the RichTextEditor content.
In addition, `RichTextEditorToolbar` exposes predefined toolbar items wired to the hyperlink commands.
diff --git a/controls/richtexteditor/localization.md b/controls/richtexteditor/localization.md
index 0bbc3a655..29dbf55d5 100644
--- a/controls/richtexteditor/localization.md
+++ b/controls/richtexteditor/localization.md
@@ -9,7 +9,7 @@ published: False
# Localization
-The .NET MAUI RichTextEditor provides language localization allowing you to translate the text of the RichTextEditor Toolbar items to other languages. This allows you to adapt your app to different regions.
+The [.NET MAUI RichTextEditor]({%slug richtexteditor-overview%}) provides language localization allowing you to translate the text of the RichTextEditor Toolbar items to other languages. This allows you to adapt your app to different regions.
> To learn more about the localization process of the Telerik UI for .NET MAUI components, see the [Localization and Globalization]({%slug common-localization-and-globalization%}) topic.
diff --git a/controls/richtexteditor/overview.md b/controls/richtexteditor/overview.md
index 5908649b5..2d3589655 100644
--- a/controls/richtexteditor/overview.md
+++ b/controls/richtexteditor/overview.md
@@ -1,8 +1,9 @@
---
title: Overview
-page_title: .NET MAUI RichTextEditor Documentation - Overview
-description: Try now the RichTextEditor for .NET MAUI and enable the users of your app to display and edit HTML content through a What-You-See-Is-What-You-Get (WYSIWYG) interface.
+page_title: NET MAUI Rich Text Editor | Telerik UI for .NET MAUI
+description: NET MAUI Rich Text Editor enables formatted text editing with support for styling, links, and images in mobile and desktop apps.
position: 0
+tags: dotnet maui editor, rich text editor
slug: richtexteditor-overview
---
@@ -10,13 +11,13 @@ slug: richtexteditor-overview
The Telerik UI for .NET MAUI RichTextEditor enables users to create rich textual content through a What-You-See-Is-What-You-Get (WYSIWYG) interface. It delivers a set of tools for creating, editing, and formatting of text, paragraphs, lists, hyperlinks, and more, and outputs the modified content as standard HTML.
-
+
-## Key Features
+## Key Features of the .NET MAUI RichTextEditor
* Visualize HTML content—`RadRichTextEditor` can display HTML content that includes paragraphs, formatted text, images, tables, ordered and unordered lists, and more.
-* Rich text editing features—The control comes with various editing capabilities:
+* Rich text editing features—The .NET MAUI RichTextEditor control comes with various editing capabilities:
* Text formatting such as bold, italic, underline, and strike through;
* Font manipulations such as size, family, text color, and text background color;
* Bulleted and numbered lists;
@@ -26,10 +27,10 @@ The Telerik UI for .NET MAUI RichTextEditor enables users to create rich textual
* Indentation and content alignment;
* Undo/Redo editing actions.
-* [Various HTML source options]({%slug richtexteditor-configuration%})—You can load the HTML source from a string as well as from a stream.
+* [Various HTML source options]({%slug richtexteditor-configuration%})—You can load the HTML source in the editor from a string as well as from a stream.
* [Commands support]({%slug richtexteditor-commands%})—RichTextEditor exposes commands, such as `ToggleBoldCommand`, `ToggleBulletingCommand`, `AlignRightCommand`, and others that allow you to execute rich text editing actions over the content loaded into the editor.
* [Insert and edit images]({%slug richtexteditor-images-overview%})—You can insert images and use the built-in edit images operations like resize, cut, copy, paste, remove.
-* [Create and manage hyperlinks]({%slug richtexteditor-hyperlink-support%})—RichTextEditor provides built-in support for creating and managing hyperlinks with the predefined toolbar items or using the exposed commands.
+* [Create and manage hyperlinks]({%slug richtexteditor-hyperlink-support%})—.NET MAUI RichTextEditor provides built-in support for creating and managing hyperlinks with the predefined toolbar items or using the exposed commands.
* [RichTextEditor Toolbar]({%slug richtexteditor-toolbar%})—Take advantage of a pre-defined UI automatically wired with all the commands provided by the control through built-in functionality.
* [Custom Toolbar]({%slug richtexteditor-custom-toolbar%})—The `RadRichTextEditor` Toolbar can be customized. You can populate the toolbar with the `ToolbarItems` needed for editing the HTML content.
* Flexible Styling API—You can modify the visual appearance of [RichTextEditor]({%slug richtexteditor-styling%}) as well as the [toolbar items]({%slug richtexteditor-toolbar-styling%}) through various styling properties such as background color, border color, thickness, corner radius, and more.
diff --git a/controls/richtexteditor/styling/editor-styling.md b/controls/richtexteditor/styling/editor-styling.md
index dd39bc8c8..898c2da0e 100644
--- a/controls/richtexteditor/styling/editor-styling.md
+++ b/controls/richtexteditor/styling/editor-styling.md
@@ -8,7 +8,7 @@ slug: richtexteditor-styling
# RichTextEditor Styling
-The Telerik .NET MAUI RichTextEditor provides means for modifying its visual appearance, so that it matches the style of the app.
+The Telerik [.NET MAUI RichTextEditor]({%slug richtexteditor-overview%}) provides means for modifying its visual appearance, so that it matches the style of the app.
You can take advantage of the following styling properties:
diff --git a/controls/richtexteditor/styling/toolbar-styling.md b/controls/richtexteditor/styling/toolbar-styling.md
index b0ebcc357..51123d099 100644
--- a/controls/richtexteditor/styling/toolbar-styling.md
+++ b/controls/richtexteditor/styling/toolbar-styling.md
@@ -8,7 +8,7 @@ slug: richtexteditor-toolbar-styling
## RichTextEditor Toolbar Styling
-RichTextEditor for .NET MAUI provides a flexible styling API for its toolbar items.
+The [.NET MAUI RichTextEditor]({%slug richtexteditor-overview%}) provides a flexible styling API for its toolbar items.
The `RichTextEditorToolbar` is based on the `RadToolbar` control. All toolbar items in the RichTextEditor inherit from `ButtonToolbarItem`.
diff --git a/controls/richtexteditor/toolbar/custom-toolbar.md b/controls/richtexteditor/toolbar/custom-toolbar.md
index e31980002..516296662 100644
--- a/controls/richtexteditor/toolbar/custom-toolbar.md
+++ b/controls/richtexteditor/toolbar/custom-toolbar.md
@@ -8,7 +8,7 @@ slug: richtexteditor-custom-toolbar
# RichTextEditor Custom Toolbar
-You can customize the toolbar by setting the `AutoGenerateItems` to `False`. Then decide which toolbar items to include.
+You can customize the toolbar of the [.NET MAUI RichTextEditor]({%slug richtexteditor-overview%}) by setting the `AutoGenerateItems` to `False`. Then decide which toolbar items to include.
Here is an example with custom toolbar items:
diff --git a/controls/richtexteditor/toolbar/overview.md b/controls/richtexteditor/toolbar/overview.md
index 51c8fce4c..dfacb9c79 100644
--- a/controls/richtexteditor/toolbar/overview.md
+++ b/controls/richtexteditor/toolbar/overview.md
@@ -8,7 +8,7 @@ slug: richtexteditor-toolbar
# RichTextEditor Toolbar
-The RichTextEditor control comes with various editing capabilities. With the help of the `RadRichTextEditorToolbar`, you can enable the users to effortlessly edit HTML content. The default toolbar includes items for all the available text formatting options. Alternatively, you can customize the shown editing options according to your needs.
+The [.NET MAUI RichTextEditor]({%slug richtexteditor-overview%}) control comes with various editing capabilities. With the help of the `RadRichTextEditorToolbar`, you can enable the users to effortlessly edit HTML content. The default toolbar includes items for all the available text formatting options. Alternatively, you can customize the shown editing options according to your needs.
By default, the `RadRichTextEditorToolbar` Items are auto-populated. You can change this by setting the `RadRichTextEditorToolbar` boolean `AutoGenerateItems` property to `False`. In this case, you will need to manually define the available editing options. For more details, check [Custom Toolbar]({%slug richtexteditor-custom-toolbar%}) article.
diff --git a/controls/richtexteditor/working-with-images/insert-images.md b/controls/richtexteditor/working-with-images/insert-images.md
index 083574173..0a88380a6 100644
--- a/controls/richtexteditor/working-with-images/insert-images.md
+++ b/controls/richtexteditor/working-with-images/insert-images.md
@@ -8,7 +8,7 @@ slug: richtexteditor-insert-images
# Toolbar Items for Working With Images
-This article describes the built-in toolbar items for insert and edit images.
+This article describes the built-in toolbar items for insert and edit images in the [.NET MAUI RichTextEditor]({%slug richtexteditor-overview%}) control.
## Insert Images
diff --git a/controls/richtexteditor/working-with-images/overview.md b/controls/richtexteditor/working-with-images/overview.md
index c1e4ae853..b8dfee0f0 100644
--- a/controls/richtexteditor/working-with-images/overview.md
+++ b/controls/richtexteditor/working-with-images/overview.md
@@ -9,7 +9,7 @@ slug: richtexteditor-images-overview
# Overview
-RichTextEditor control allows you to add (insert), cut, copy, paste, resize, and delete images by using built-in toolbar items.
+The [.NET MAUI RichTextEditor]({%slug richtexteditor-overview%}) control allows you to add (insert), cut, copy, paste, resize, and delete images by using built-in toolbar items.
You can add images in the RichTextEditor by using the predefined toolbar items:
diff --git a/controls/scheduler/overview.md b/controls/scheduler/overview.md
index 3a3b122cd..ee3d33b1e 100644
--- a/controls/scheduler/overview.md
+++ b/controls/scheduler/overview.md
@@ -12,7 +12,7 @@ The Telerik UI for .NET MAUI Scheduler allows you to easily implement various sc
-## Key Features
+## Key Features of the .NET MAUI Scheduler
* [Built-in Views]({% slug scheduler-views-overview %})—The Scheduler control comes with a few customizable predefined views: month, week, multiday and day views.
* [Appointments]({% slug appointments-overview %})—Through the `AppointmentsSource` property you can populate the Scheduler with appointments. In addition, you can define a custom template as well as apply various styling options to the appointments to achieve the desired look & feel.
diff --git a/controls/segmentedcontrol/overview.md b/controls/segmentedcontrol/overview.md
index 301d2cdad..71244c40f 100644
--- a/controls/segmentedcontrol/overview.md
+++ b/controls/segmentedcontrol/overview.md
@@ -14,7 +14,7 @@ The Telerik UI for .NET MAUI SegmentedControl allows you to display a list of ho
-## Key Features
+## Key Features of the .NET MAUI SegmentedControl
* [Selection]({% slug segmentedcontrol-selection %})—The SegmentedControl exposes properties for working with its items selection.
diff --git a/controls/sidedrawer/overview.md b/controls/sidedrawer/overview.md
index d78442d18..e4488a511 100644
--- a/controls/sidedrawer/overview.md
+++ b/controls/sidedrawer/overview.md
@@ -12,7 +12,7 @@ Telerik UI for .NET MAUI SideDrawer is designed to enable users to visualize a h
-## Key Features
+## Key Features of the .NET MAUI SideDrawer
* [Drawer positions]({%slug sidedrawer-features-configuration%})—Display the drawer from any of the four edges of the screen. You can define its position through the `DrawerLocation` property.
diff --git a/controls/signaturepad/overview.md b/controls/signaturepad/overview.md
index 4460b51b2..850ad19fc 100644
--- a/controls/signaturepad/overview.md
+++ b/controls/signaturepad/overview.md
@@ -12,7 +12,7 @@ The Telerik UI for .NET MAUI SignaturePad control gives you the option to captur
-## Key Features
+## Key Features of the .NET MAUI SignaturePad
* Display signature in your mobile and desktop application.
diff --git a/controls/slider/overview.md b/controls/slider/overview.md
index 660a2be47..79c63db28 100644
--- a/controls/slider/overview.md
+++ b/controls/slider/overview.md
@@ -14,7 +14,7 @@ The Slider supports ticks, labels, and tooltips. With them, your end users can q
-## Key Features
+## Key Features of the .NET MAUI Slider
* [Value thumb]({%slug slider-value-thumb%})—The slider's value thumb is drawn corresponding to its `Value` property. Users can modify the `Value` by dragging the thumb along the backtrack.
* [Range track]({%slug slider-range-track%})—The Slider provides a customizable range track for better representation of the selected value. You can modify the range track's initial position with the `OriginValue` property.
diff --git a/controls/slideview/overview.md b/controls/slideview/overview.md
index 26cc5989a..29b8a65be 100644
--- a/controls/slideview/overview.md
+++ b/controls/slideview/overview.md
@@ -12,7 +12,7 @@ The Telerik UI for .NET MAUI SlideView is a flexible navigation control that all
-## Key Features
+## Key Features of the .NET MAUI SlideView
* [Navigation]({%slug slideview-interaction%})—The SlideView control provides a variety of ways for navigation through its items—navigation buttons, indicators (Desktop), and pan gestures.
diff --git a/controls/tabview/overview.md b/controls/tabview/overview.md
index 75c5ee143..5c7afe557 100644
--- a/controls/tabview/overview.md
+++ b/controls/tabview/overview.md
@@ -13,7 +13,7 @@ The Telerik TabView for .NET MAUI is a flexible navigation control that allows y
-## Key Features
+## Key Features of the .NET MAUI TabView
* [Item Selection]({%slug tabview-selection%})—TabView exposes selection API which allows you as a developer to extend the navigation per application needs.
* [Header Customization]({%slug tabview-configuration%})—TabView provides means for customizing the header area containing the tabs—through the `HeaderStyle` property you can change its position, orientation, and spacing between the tabs; through the `HeaderTemplate` property you can modify its look and feel.
diff --git a/controls/templatedpicker/overview.md b/controls/templatedpicker/overview.md
index 2c090845f..aa480158c 100644
--- a/controls/templatedpicker/overview.md
+++ b/controls/templatedpicker/overview.md
@@ -13,7 +13,7 @@ The Telerik UI for .NET MAUI TemplatedPicker is a fully customizable picker cont
-## Key Features
+## Key Features of the .NET MAUI TemplatedPicker
* [Selector template]({%slug templatedpicker-templates%})—The custom picker control allows you to define a template for the items.
diff --git a/controls/timepicker/overview.md b/controls/timepicker/overview.md
index c85075b6d..c7c1ba6b6 100644
--- a/controls/timepicker/overview.md
+++ b/controls/timepicker/overview.md
@@ -15,7 +15,7 @@ The TimePicker provides a number of features which allow you to set a time range
-## Key Features
+## Key Features of the .NET MAUI TimePicker
* [Time ranges]({%slug timepicker-time-range%})—The TimePicker allows you to define a time range by setting minimum and maximum time values and enables users to choose a time within that range.
diff --git a/controls/timespanpicker/overview.md b/controls/timespanpicker/overview.md
index 18b1d1d75..4b564b11f 100644
--- a/controls/timespanpicker/overview.md
+++ b/controls/timespanpicker/overview.md
@@ -13,7 +13,7 @@ The Telerik UI for .NET MAUI TimeSpanPicker provides an easy way to select a tim
-## Key Features
+## Key Features of the .NET MAUI TimeSpanPicker
* [Spinner Format]({%slug timespanpicker-formatting%})—The TimeSpanPicker for .NET MAUI allows you to use standard or custom time span format string through its `TimeSpanPicker.SpinnerFormat` property. Depending on what format is set, the picker visualizes spinner controls with pre-populated values that can be picked.
diff --git a/controls/toolbar/overview.md b/controls/toolbar/overview.md
index 2b45a0e10..fe703d6c4 100644
--- a/controls/toolbar/overview.md
+++ b/controls/toolbar/overview.md
@@ -12,7 +12,7 @@ The Telerik .NET MAUI Toolbar is a flexible component for implementation of tool
-## Key features
+## Key Features of the .NET MAUI Toolbar
* [Rich collection of toolbar items]({%slug toolbar-items%})—Like navigation button, split button, slider, listpicker, radio buttons and more
* Adding text and image to the toolbar item.
diff --git a/controls/treeview/overview.md b/controls/treeview/overview.md
index 12ed1d36e..4115454da 100644
--- a/controls/treeview/overview.md
+++ b/controls/treeview/overview.md
@@ -14,7 +14,7 @@ To populate the TreeView, you can use any data source that is hierarchical in na
-## Key Features
+## Key Features of the .NET MAUI TreeView
* Hierarchical Navigation—TreeView improves the navigation and performance of your application where navigation over hierarchical structure is required.
* [Expand/Collapse items]({%slug treeview-expand-collapse%})—The control introduces methods which can be used to programmatically expand/collapse item or all items.
diff --git a/controls/wraplayout/overview.md b/controls/wraplayout/overview.md
index f8932a90a..2858fd7a0 100644
--- a/controls/wraplayout/overview.md
+++ b/controls/wraplayout/overview.md
@@ -13,7 +13,7 @@ The Telerik UI for .NET MAUI WrapLayout provides a mechanism for arranging child
-## Key Features
+## Key Features of the .NET MAUI WrapLayout
* [Wrap orientation]({% slug wraplayout-wrap-feature %})—Through the `Orientation` property you can control whether the child items of the WrapLayout will be wrapped in rows (horizontal orientation) or in columns (vertical orientation).
diff --git a/demos-and-sample-apps/overview.md b/demos-and-sample-apps/overview.md
index d9eb95aec..66bc74b9c 100644
--- a/demos-and-sample-apps/overview.md
+++ b/demos-and-sample-apps/overview.md
@@ -3,13 +3,19 @@ title: Overview
page_title: .NET MAUI Examples & Sample Apps
description: "Explore a variety of Telerik .NET MAUI examples that demonstrate its flexibility in cross-platform app development. Try sample applications!"
slug: sampleapps-overview
-tags: .net maui, ui for .net maui, .net maui controls, sample applications, demos
+tags: .net maui, ui for .net maui, .net maui controls, sample applications, demos, .net maui samples
position: 0
---
# .NET MAUI Examples, Demos, and Sample Apps Overview
-The Telerik .NET MAUI library has a few fully-featured [demo applications](https://www.telerik.com/maui-ui/demo-apps/controls) demonstrating our [.NET MAUI](https://www.telerik.com/maui-ui)) controls. You can review the source code of each app and get familiar with the way various Telerik .NET MAUI controls are utilized.
+The Telerik UI for .NET MAUI library offers an extensive set of fully featured examples and [demo applications](https://www.telerik.com/maui-ui/demo-apps/controls) demonstrating the [.NET MAUI](https://www.telerik.com/maui-ui)) controls. You can review each app's source code and get familiar with how various controls are utilized.
+
+{% if site.has_cta_panels == true %}
+{% include cta-panel-maui-overview.html %}
+{% endif %}
+
+The following demo apps deliver a rich collection of .NET MAUI examples:
* [Controls Samples App](#controls-samples-app)
* [SDKBrowser App](#sdkbrowser-app)
@@ -18,7 +24,7 @@ The Telerik .NET MAUI library has a few fully-featured [demo applications](https
> Telerik UI for .NET MAUI version 7.1.0 adds support for .NET 9.0. You can easily switch the .NET version to .NET 8.0 or .NET 9.0 to build the apps.
> Inside the Examples folder of the installation/.zip file there are `.ps1` files - `SwitchToNet8.ps1` and `SwitchToNet9.ps1`. You can use them to switch the .NET version.
-## Controls Samples App
+## .NET MAUI Controls Samples App
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.
@@ -26,7 +32,7 @@ The Telerik UI for .NET MAUI Controls Samples is a highly polished application o
For more information on it, refer to [Controls Samples App]({%slug controls-samples-app%}).
-## SDKBrowser App
+## .NET MAUI SDKBrowser App
The SDKBrowser is a set of .NET MAUI examples in C# and XAML 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).
@@ -34,10 +40,10 @@ The SDKBrowser is a set of .NET MAUI examples in C# and XAML that explain how to
For more information on it, refer to [SDKBrowser App]({%slug sdkbrowser-app%}).
-## Crypto Tracker App
+## .NET MAUI Crypto Tracker App
Crypto Tracker demo is a real-case crypto application that shows changes in cryptocurrency prices, offering practical .NET MAUI app examples built with the Telerik UI for .NET MAUI controls. In this demo, you can see in action many of the .NET MAUI controls in the library, including the ListView, Charts and TabView.
-For more information on it, refer to [Crypro Tracker App]({%slug maui-crypto-app%}).
+For more information on it, refer to [Crypto Tracker App]({%slug maui-crypto-app%}).
diff --git a/get-started/first-steps-vs-code.md b/get-started/first-steps-vs-code.md
index e116166ee..631291bf9 100644
--- a/get-started/first-steps-vs-code.md
+++ b/get-started/first-steps-vs-code.md
@@ -109,3 +109,4 @@ After configuring the Telerik NuGet source, install Telerik UI for .NET MAUI:
* [System Requirements]({% slug system-requirements %})
* [Telerik UI for .NET MAUI Product Page](https://www.telerik.com/maui-ui)
+* [Using a Telerik Theme]({%slug themes-overview%})
diff --git a/get-started/first-steps-vs.md b/get-started/first-steps-vs.md
index 77d1106eb..569592139 100644
--- a/get-started/first-steps-vs.md
+++ b/get-started/first-steps-vs.md
@@ -106,3 +106,4 @@ To add the Telerik NuGet source to Visual Studio:
* [System Requirements]({% slug system-requirements %})
* [Telerik UI for .NET MAUI Product Page](https://www.telerik.com/maui-ui)
+* [Using a Telerik Theme]({%slug themes-overview%})
diff --git a/get-started/quickstart.md b/get-started/quickstart.md
index 4230cd00e..9f21d5c03 100644
--- a/get-started/quickstart.md
+++ b/get-started/quickstart.md
@@ -42,3 +42,4 @@ If your .NET MAUI project uses the default project template provided by Microsof
* [First Steps with UI for .NET MAUI in Visual Studio (Tutorial)]({%slug maui-getting-started%})
* [First Steps with UI for .NET MAUI in Visual Studio Code (Tutorial)]({%slug maui-getting-started-vs-code%})
+* [Using a Telerik Theme]({%slug themes-overview%})
diff --git a/installation/licensing/license-errors-warnings.md b/installation/licensing/license-errors-warnings.md
index 28ca4beef..6c95b6b2a 100644
--- a/installation/licensing/license-errors-warnings.md
+++ b/installation/licensing/license-errors-warnings.md
@@ -26,16 +26,16 @@ An invalid license can be caused by any of the following:
When using Telerik UI for .NET MAUI in a project with an expired or missing license, the `Telerik.Licensing` build task will indicate the following errors:
-| Error or Condition | Solution |
-|----------------------------------------|-----------------------------------------------------------------------------------------------|
-| `No license key is detected` | [Set up a license key]({%slug set-up-your-license%}) to activate the UI controls and remove the error message. |
-| `Invalid license key` | [Download a new license key]({%slug set-up-your-license%}#downloading-the-license-key) and use it to activate the UI controls and remove the error message. |
-| `Your subscription license has expired.` | Renew your subscription and [download a new license key]({%slug set-up-your-license%}#downloading-the-license-key). |
-| `Your perpetual license is invalid.` | You are using a product version released outside the validity period of your perpetual license. To remove the error message, do either of the following: |
-| | - Renew your license, then download a new license key and use it to activate the controls. |
-| | - Downgrade to a product version included in your perpetual license as indicated in the message. |
-| `Your trial license has expired.` | Purchase a commercial license to continue using the product. |
-| `Your license is not valid for the detected product(s).` | Review the purchase options for the listed products. Alternatively, remove the references to the listed packages from `package.json`. |
+| Error or Condition | Message Code | Solution |
+|-------------------------------------------------|--------------|-----------------------------------------------------------------------|
+| `No license key is detected` | TKL002 | [Set up a license key]({%slug set-up-your-license%}) to activate the UI controls and remove the error message. |
+| `Invalid license key` | TKL003 | [Download a new license key]({%slug set-up-your-license%}#downloading-the-license-key) and use it to activate the UI controls and remove the error message. |
+| `Your subscription license has expired.` | TKL103; TKL104 | Renew your subscription and [download a new license key]({%slug set-up-your-license%}#downloading-the-license-key). |
+| `Your perpetual license is invalid.` | TKL102 | You are using a product version released outside the validity period of your perpetual license. To remove the error message, do either of the following: |
+| | | - Renew your license, then download a new license key and use it to activate the controls. |
+| | | - Downgrade to a product version included in your perpetual license as indicated in the message. |
+| `Your trial license has expired.` | TKL105 | Purchase a commercial license to continue using the product. |
+| `Your license is not valid for the detected product(s).` | TKL101 | Review the purchase options for the listed products. Alternatively, remove the references to the listed packages from `package.json`. |
## See Also
diff --git a/installation/licensing/set-up-your-license.md b/installation/licensing/set-up-your-license.md
index 14de09e5e..a4c03271c 100644
--- a/installation/licensing/set-up-your-license.md
+++ b/installation/licensing/set-up-your-license.md
@@ -17,7 +17,7 @@ An invalid license results in [errors and warnings]({%slug license-errors-warnin
To download a license key for Telerik UI for .NET MAUI, you must have either a developer license or a trial license. If you are new to Telerik UI for .NET MAUI, sign up for a [free trial](https://www.telerik.com/try/ui-for-maui) first, and then follow the steps below.
-1. Go to the [License Keys](https://www.telerik.com/account/your-licenses/license-keys/new) page in your Telerik account.
+1. Go to the [License Keys](https://www.telerik.com/account/your-licenses/license-keys) page in your Telerik account.
1. Click the **Download License Key** button.
@@ -31,9 +31,9 @@ To activate the Telerik UI for .NET MAUI controls:
* Copy the [downloaded](#downloading-the-license-key) `telerik-license.txt` license key file to your home directory. This makes the license key available to all projects that you develop on your computer:
- * For Windows: `%AppData%\Telerik\telerik-icense.txt`
- * For Mac/Linux: `~/.telerik/telerik-license.txt`
-
+ * For Windows: `%AppData%\Roaming\Telerik\telerik-license.txt`. An example of a full path to the `telerik-license.txt` file location: `C:\Users\your-username\AppData\Roaming\Telerik\telerik-license.txt`
+ * For Mac/Linux: `~/.telerik/telerik-license.txt`. If `.telerik` folder does not exist, create such, and paste the `telerik-license.txt` file in it.
+
* Alternatively, copy the `telerik-license.txt` license key file to the root folder of your project. This makes the license key available only to this project. Do not commit the file to source control as this is your personal license key.
When you build the project, the `Telerik.Licensing` NuGet package automatically locates the license file and uses it to activate the MAUI controls.
@@ -46,7 +46,7 @@ Telerik strongly recommends the use of NuGet packages whenever possible. Only in
If you cannot use NuGet packages in your project, add the license as a code snippet:
-1. Go to the [License Keys page](https://www.telerik.com/account/your-licenses/license-keys/new) in your Telerik account.
+1. Go to the [License Keys page](https://www.telerik.com/account/your-licenses/license-keys) in your Telerik account.
1. On the Telerik UI for .NET MAUI row, click the **View key** link in the **SCRIPT KEY** column.
diff --git a/installation/vs-code-integration/images/MauiTemplateWizard.gif b/installation/vs-code-integration/images/MauiTemplateWizard.gif
index 8538cc9f9..dccced69c 100644
Binary files a/installation/vs-code-integration/images/MauiTemplateWizard.gif and b/installation/vs-code-integration/images/MauiTemplateWizard.gif differ
diff --git a/installation/vs-code-integration/images/telerik-vs-code-extension.png b/installation/vs-code-integration/images/telerik-vs-code-extension.png
index 5c81333ed..0a19826c5 100644
Binary files a/installation/vs-code-integration/images/telerik-vs-code-extension.png and b/installation/vs-code-integration/images/telerik-vs-code-extension.png differ
diff --git a/installation/vs-code-integration/new-project-wizard.md b/installation/vs-code-integration/new-project-wizard.md
index e0b04fbf7..47af51313 100644
--- a/installation/vs-code-integration/new-project-wizard.md
+++ b/installation/vs-code-integration/new-project-wizard.md
@@ -44,13 +44,6 @@ You can start the Telerik UI for .NET MAUI Template Wizard in either of the foll
-## Set Up the Telerik NuGet Server
-
-By using the Telerik NuGet server, you can install the packages with the Telerik UI for .NET MAUI controls. As the server requires authentication, you can use one of the following options to configure the required credentials for your Telerik license (trial or commercial):
-
-* [Using the .NET CI]({%slug nuget-keys%})
-* [Editing the `NuGet.Config` File]({%slug nuget-config%})
-
## Select a Project
The Create New Project wizard provides two options to start you project:
@@ -58,6 +51,13 @@ The Create New Project wizard provides two options to start you project:
- Blank App—Allows you to create a blank project that is pre-configured for the Progress® Telerik® UI for .NET MAUI components.
- Blank Shell App—Allows you to create a blank shell project that is pre-configured for the Progress® Telerik® UI for .NET MAUI components.
+
+## Add a Theme to the Project
+
+You can add a [theme]({%slug themes-overview%}) to the project by enabling the **USE TELERIK THEMING** option from the Wizard.
+
+Choose between two themes—the `Platform` and the `Telerik`, and the available swatches for each.
+
## Configure the Project
The wizard allows you to configure the following options:
diff --git a/installation/vs-integration/images/enabled_toolbox.png b/installation/vs-integration/images/enabled_toolbox.png
index 146c91190..98210f136 100644
Binary files a/installation/vs-integration/images/enabled_toolbox.png and b/installation/vs-integration/images/enabled_toolbox.png differ
diff --git a/installation/vs-integration/images/license-info-project-template.png b/installation/vs-integration/images/license-info-project-template.png
new file mode 100644
index 000000000..7da722e53
Binary files /dev/null and b/installation/vs-integration/images/license-info-project-template.png differ
diff --git a/installation/vs-integration/images/maui-select-theme.png b/installation/vs-integration/images/maui-select-theme.png
new file mode 100644
index 000000000..8c806f56f
Binary files /dev/null and b/installation/vs-integration/images/maui-select-theme.png differ
diff --git a/installation/vs-integration/images/open-vs-extensions.png b/installation/vs-integration/images/open-vs-extensions.png
index c4746ed47..2e24aeb96 100644
Binary files a/installation/vs-integration/images/open-vs-extensions.png and b/installation/vs-integration/images/open-vs-extensions.png differ
diff --git a/installation/vs-integration/images/scaffolding-vs-options.png b/installation/vs-integration/images/scaffolding-vs-options.png
index c4bd6c7c9..a60a4c3f6 100644
Binary files a/installation/vs-integration/images/scaffolding-vs-options.png and b/installation/vs-integration/images/scaffolding-vs-options.png differ
diff --git a/installation/vs-integration/images/vsextensions_projecttemplate.png b/installation/vs-integration/images/vsextensions_projecttemplate.png
index c3f73bae5..9c47fbb15 100644
Binary files a/installation/vs-integration/images/vsextensions_projecttemplate.png and b/installation/vs-integration/images/vsextensions_projecttemplate.png differ
diff --git a/installation/vs-integration/images/vsx-create-new-project-entry.png b/installation/vs-integration/images/vsx-create-new-project-entry.png
index a11903e62..be99f3120 100644
Binary files a/installation/vs-integration/images/vsx-create-new-project-entry.png and b/installation/vs-integration/images/vsx-create-new-project-entry.png differ
diff --git a/installation/vs-integration/new-project.md b/installation/vs-integration/new-project.md
index 0a0a404d7..e3f04da29 100644
--- a/installation/vs-integration/new-project.md
+++ b/installation/vs-integration/new-project.md
@@ -59,13 +59,19 @@ To start the wizard, use either the [Extensions](#extensions-menu) or the [Proje
* The **Telerik .NET MAUI Blank Shell App** option creates a blank .NET MAUI Shell application.
+1. Choose whether to add a [theme swatch]({%slug themes-overview%}) to the project. When selecting a theme swatch, the theme configuration is automatically added to the project.
+
+ 
+
1. The wizard validates your Telerik UI for .NET MAUI license and lets you download a new [license key file]({%slug set-up-your-license%}).
+ 
+
Finally, Visual Studio opens the solution, which is pre-configured to use the Telerik UI for .NET MAUI controls and has the `Telerik.UI.for.Maui` NuGet package installed.
If this is the first time Visual Studio connects to the [Telerik NuGet Server]({%slug telerik-nuget-overview %}), you will see a request to enter your Telerik credentials. Then, the Telerik NuGet Server will be automatically configured as a NuGet source in Visual Studio:
- 
+
The following image shows the end result after running the application.
diff --git a/introduction.md b/introduction.md
index b066f766d..ebeebec8b 100644
--- a/introduction.md
+++ b/introduction.md
@@ -1,6 +1,6 @@
---
title: Introduction
-page_title: Introduction and Documentation
+page_title: .NET MAUI Documentation - Telerik UI for .NET MAUI
description: "Learn how to build native applications for Windows, macOS, Android, and iOS by reading the Telerik UI for .NET MAUI documentation."
tags: .net maui, .net maui documentation, maui, .net, ui for .net maui, microsoft .net maui, telerik ui for .net maui
previous_url: /license
@@ -23,7 +23,7 @@ This brand-new UI library comes with [sample demo applications]({%slug sampleapp
>tip This online MAUI documentation covers the latest version of Telerik UI for MAUI. If needed, download the [offline PDF MAUI documentation](#learning-resources) for the required product version.
-## List of Controls
+## List of .NET MAUI UI Controls
Telerik UI for .NET MAUI features the following controls for cross-platform development with .NET MAUI:
@@ -35,7 +35,7 @@ By clicking on each control you will navigate to the detailed .NET MAUI document
Telerik UI for .NET MAUI library is a commercial UI library. You are welcome to explore its full functionality and get technical support from the team when you register for a free 30-day trial. To use it commercially, you need to [purchase a license](https://www.telerik.com/purchase/maui-ui). Feel free to review the Telerik UI for .NET MAUI [License Agreement](https://www.telerik.com/purchase/license-agreement/maui-ui) to get acquainted with the full terms of use.
-## Support Options
+## .NET MAUI Support Options
For any issues you might encounter while working with Telerik UI for .NET MAUI, you can use a number of available support channels:
@@ -53,7 +53,7 @@ For any issues you might encounter while working with Telerik UI for .NET MAUI,
* [Telerik UI for .NET MAUI YouTube Channel](https://www.youtube.com/playlist?list=PLvmaC-XMqeBZnCAEuEcW9LsUnfQm65B1N)—Allows you in-depth surfing through the .NET MAUI videos that cover a variety of topics—from the why of transitioning to MAUI to DevOps in MAUI and more!
* [Offline PDF documentation](https://www.telerik.com/account/downloads/product-download?product=MAUI)—Download the offline PDF documentations for the **Telerik UI for MAUI** and **Telerik Document Processing** under the **Documentation** section of your Telerik account.
-## Next Steps
+## Next Steps with .NET MAUI UI
* [Getting Started with Telerik UI for .NET MAUI (Online Guide)]({%slug maui-getting-started%})
diff --git a/knowledge-base/add-license-as-snippet-ci-cd.md b/knowledge-base/add-license-as-snippet-ci-cd.md
index a9ac697d5..c0923affa 100644
--- a/knowledge-base/add-license-as-snippet-ci-cd.md
+++ b/knowledge-base/add-license-as-snippet-ci-cd.md
@@ -22,7 +22,7 @@ I work in a CI/CD environment and need to activate my Telerik UI for .NET MAUI l
Telerik strongly recommends the use of NuGet packages whenever possible. If NuGet is not an option, configure your CI/CD tools to create a C# license file during build:
-1. Go to the [License Keys page](https://www.telerik.com/account/your-licenses/license-keys/new) in your Telerik account.
+1. Go to the [License Keys page](https://www.telerik.com/account/your-licenses/license-keys) in your Telerik account.
1. On the Telerik UI for .NET MAUI row, click the **View key** link in the **SCRIPT KEY** column.
diff --git a/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md b/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md
new file mode 100644
index 000000000..ca30f2228
--- /dev/null
+++ b/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md
@@ -0,0 +1,216 @@
+---
+title: Binding SortDescriptors in CollectionView for .NET MAUI
+description: Learn how to use data binding with CollectionView SortDescriptors in .NET MAUI applications.
+type: how-to
+page_title: How to Bind SortDescriptors in .NET MAUI CollectionView
+slug: bind-sortdescriptors-collectionview-net-maui
+tags: collectionview, sortdescriptors, databinding, .net maui, observablecollection
+res_type: kb
+ticketid: 1677846
+---
+
+## Environment
+
+| Version | Product | Author |
+| --- | --- | ---- |
+| 9.0.0 | Telerik UI for .NET MAUI CollectionView | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) |
+
+## Description
+
+In my application, I want to use data binding to bind to an `ObservableCollection` of sort descriptors.
+
+This knowledge base article also answers the following questions:
+- How to dynamically sort items in a CollectionView using `SortDescriptors` in .NET MAUI?
+- How to bind `SortDescriptors` to a view model property in .NET MAUI?
+- How to update CollectionView sorting based on user input in .NET MAUI?
+
+## Solution
+
+To bind the `SortDescriptors` collection in a CollectionView to a property in the view model, follow these steps:
+
+1. Define the CollectionView in XAML and bind the `SortDescriptors` and `ItemsSource` to the `ViewModel` properties.
+
+```xml
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+2. In the `ViewModel`, create properties for sorting and managing data. Implement logic to update the sort descriptors based on the user input.
+
+```csharp
+public class ViewModel : NotifyPropertyChangedBase
+{
+ private bool isSortByName;
+ private bool isSortByAge;
+
+ private ObservableCollection sortDescriptors;
+
+ public ViewModel()
+ {
+ this.Items = GetData();
+ }
+
+ private static ObservableCollection GetData()
+ {
+ var items = new ObservableCollection();
+
+ items.Add(new Person { Name = "Tom", Age = 41 });
+ items.Add(new Person { Name = "Anna", Age = 32 });
+ items.Add(new Person { Name = "Peter", Age = 28 });
+ items.Add(new Person { Name = "Teodor", Age = 39 });
+ items.Add(new Person { Name = "Lorenzo", Age = 25 });
+ items.Add(new Person { Name = "Andrea", Age = 33 });
+ items.Add(new Person { Name = "Martin", Age = 36 });
+ items.Add(new Person { Name = "Alexander", Age = 29 });
+ items.Add(new Person { Name = "Maria", Age = 22 });
+ items.Add(new Person { Name = "Elena", Age = 27 });
+ items.Add(new Person { Name = "Stefano", Age = 44 });
+ items.Add(new Person { Name = "Jake", Age = 31 });
+ items.Add(new Person { Name = "Leon", Age = 28 });
+
+ return items;
+ }
+ public bool IsSortByName
+ {
+ get => this.isSortByName;
+ set => this.UpdateValue(ref this.isSortByName, value);
+ }
+
+ public bool IsSortByAge
+ {
+ get => this.isSortByAge;
+ set => this.UpdateValue(ref this.isSortByAge, value);
+ }
+
+ public ObservableCollection Items { get; set; }
+
+ public ObservableCollection SortDescriptors
+ {
+ get
+ {
+ return this.sortDescriptors;
+ }
+ set
+ {
+ ObservableCollection oldValue = this.sortDescriptors;
+
+ if (this.UpdateValue(ref this.sortDescriptors, value))
+ {
+ this.OnSortDescriptorsChanged(oldValue);
+ }
+ }
+ }
+
+
+ protected override void OnPropertyChanged([CallerMemberName] string propertyName = null)
+ {
+ base.OnPropertyChanged(propertyName);
+
+ this.UpdateCorrespondingDescriptor(propertyName);
+ }
+
+ private void OnSortDescriptorsChanged(ObservableCollection oldValue)
+ {
+ if (oldValue != null)
+ {
+ oldValue.CollectionChanged -= this.SortDescriptors_CollectionChanged;
+ }
+
+ if (this.sortDescriptors != null)
+ {
+ this.sortDescriptors.CollectionChanged += SortDescriptors_CollectionChanged;
+ }
+
+ this.UpdateFlags();
+ }
+
+ private void SortDescriptors_CollectionChanged(object? sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
+ {
+ this.UpdateFlags();
+ }
+
+ private void UpdateCorrespondingDescriptor(string propertyName)
+ {
+ if (propertyName == nameof(this.IsSortByName))
+ {
+ this.EnsureDescriptor(nameof(Person.Name), this.IsSortByName);
+ }
+ else if (propertyName == nameof(this.IsSortByAge))
+ {
+ this.EnsureDescriptor(nameof(Person.Age), this.IsSortByAge);
+ }
+ }
+
+ private void EnsureDescriptor(string propertyName, bool include)
+ {
+ ObservableCollection descriptors = this.SortDescriptors;
+
+ if (descriptors == null)
+ {
+ return;
+ }
+
+ SortDescriptorBase descriptor = this.TryGetDescriptor(propertyName);
+
+ if (include)
+ {
+ if (descriptor == null)
+ {
+ descriptors.Add(new PropertySortDescriptor { PropertyName = propertyName });
+ }
+ }
+ else
+ {
+ if (descriptor != null)
+ {
+ descriptors.Remove(descriptor);
+ }
+ }
+ }
+
+ private void UpdateFlags()
+ {
+ this.IsSortByName = this.TryGetDescriptor(nameof(Person.Name)) != null;
+ this.IsSortByAge = this.TryGetDescriptor(nameof(Person.Age)) != null;
+ }
+
+ private SortDescriptorBase TryGetDescriptor(string propertyName)
+ {
+ SortDescriptorBase descriptor = this.sortDescriptors?.FirstOrDefault(d => (d as PropertySortDescriptor)?.PropertyName == propertyName);
+ return descriptor;
+ }
+}
+public class Person
+{
+ public string Name { get; set; }
+ public int Age { get; set; }
+}
+
+```
+
+3. Ensure that property change notifications are properly propagated, and the `SortDescriptors` collection is updated accordingly when switches are toggled.
+
+This approach allows for dynamic sorting of items in the CollectionView based on user input, by binding `SortDescriptors` to a collection managed in the view model.
+
+## See Also
+
+- [CollectionView Overview in .NET MAUI]({%slug collectionview-overview%})
+- [Data Binding in .NET MAUI](https://learn.microsoft.com/en-us/dotnet/maui/xaml/fundamentals/mvvm?view=net-maui-9.0)
+- [Implementing Model-View-ViewModel (MVVM) in .NET MAUI](https://learn.microsoft.com/en-us/dotnet/architecture/maui/mvvm)
diff --git a/knowledge-base/centering-popup-dotnet-maui.md b/knowledge-base/centering-popup-dotnet-maui.md
new file mode 100644
index 000000000..2042ceca2
--- /dev/null
+++ b/knowledge-base/centering-popup-dotnet-maui.md
@@ -0,0 +1,66 @@
+---
+title: Centering the Popup in .NET MAUI Applications
+description: Learn how to ensure a Popup is always displayed in the center of the screen in .NET MAUI applications using the Telerik UI for MAUI Popup control.
+type: how-to
+page_title: How to Ensure a Popup is Centered in .NET MAUI
+slug: centering-popup-dotnet-maui
+tags: popup, .net maui, center, placement, ui, telerik
+res_type: kb
+---
+
+## Environment
+
+| Version | Product | Author |
+| --- | --- | ---- |
+| 9.0.0 | Telerik UI for .NET MAUI Popup | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova)|
+
+## Description
+
+When using the Telerik UI for MAUI [Popup](https://docs.telerik.com/devtools/maui/controls/popup/overview) control to display content, such as a calendar, it's essential to ensure the Popup is always centered on the screen, regardless of device or orientation.
+
+This knowledge base article also answers the following questions:
+- How can I center a Popup in my .NET MAUI application?
+- What are the steps to always display a Popup in the center of the screen?
+- Can I position a Telerik MAUI Popup in the center of the page?
+
+## Solution
+
+To center the Popup on the screen in a .NET MAUI application using the Telerik UI for MAUI Popup control, follow these steps:
+
+1. Attach the Popup to the page.
+2. Set the Popup's `Placement` property to `Center`. This ensures the Popup is displayed in the center of the page/screen.
+3. Optionally, open the Popup on a button click or any other event as required.
+
+Below is an example of how to implement this in a .NET MAUI application using XAML:
+
+```XAML
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+In this example, replace `YourNamespace` with your actual namespace, and `PopupContentView` with the content you want to display in the Popup.
+
+## See Also
+
+- [Popup Overview](https://docs.telerik.com/devtools/maui/controls/popup/overview)
+- [Popup Placement Documentation](https://docs.telerik.com/devtools/maui/controls/popup/placement)
diff --git a/knowledge-base/chart-create-custom-palette.md b/knowledge-base/chart-create-custom-palette.md
index 87cfb5716..bcd9e18a4 100644
--- a/knowledge-base/chart-create-custom-palette.md
+++ b/knowledge-base/chart-create-custom-palette.md
@@ -12,12 +12,16 @@ res_type: kb
| Version | Product | Author |
| --- | --- | ---- |
-| 6.6.0 | Chart for .NET MAUI | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova)|
+| 10.0.0 | Chart for .NET MAUI | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova)|
## Description
-How can I use custom colors in the Telerik UI for .NET MAUI Chart?
+I want to change the default colors of the bar series in the CartesianChart. How can I achieve this?
+
+This knowledge base article also answers the following questions:
+- How can I use custom colors in the Telerik UI for .NET MAUI CartesianChart?
+- How can I change the color on the CartesianChart `BarSeries`?
## Solution
@@ -34,11 +38,11 @@ The Chart supports the following default set of colors for displaying its data p
To modify the default built-in colors, implement a custom palette, as demonstrated in the following scenario:
-**1.** Create the needed business model:
+**1.** Create a sample `DataModel`:
-**2.** Use the sample data for the binding context:
+**2.** Define the `ViewModel` class:
```C#
public class ViewModel
@@ -94,7 +98,7 @@ public class ViewModel
}
```
-**3.** Declare the `RadCartesianChart` in XAML:
+**3.** Define the `RadCartesianChart` in XAML:
```XAML
@@ -146,7 +150,7 @@ public class ViewModel
```
-And the namespace used:
+**4.** Add the `telerik` namespace:
```XAML
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
@@ -154,5 +158,5 @@ xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
The following image shows the end result of the suggested implementation.
-
+
diff --git a/knowledge-base/data-binding-qrcode-net-maui.md b/knowledge-base/data-binding-qrcode-net-maui.md
new file mode 100644
index 000000000..efa06550f
--- /dev/null
+++ b/knowledge-base/data-binding-qrcode-net-maui.md
@@ -0,0 +1,105 @@
+---
+title: Data Binding with QRCode in .NET MAUI Applications
+description: Learn how to bind a QRCode to a property in the ViewModel in a .NET MAUI application using the Telerik Barcode component.
+type: how-to
+page_title: How to Implement Data Binding for QRCode in .NET MAUI
+slug: data-binding-qrcode-net-maui
+tags: barcode, qrcode, databinding, .net maui, viewmodel, bindingcontext
+res_type: kb
+ticketid: 1680174
+---
+
+## Environment
+
+
+
+
+
Product
+
Barcode for .NET MAUI
+
+
+
Version
+
9.0.0
+
+
+
+
+## Description
+
+As with any other bindable property, you can bind the `Value` property of the [`RadBarcode`](https://docs.telerik.com/devtools/maui/controls/barcode/2d-barcodes/qrcode-overview) to a property in the view model, allowing dynamic updates of the QR code in the UI.
+
+## Solution
+
+To achieve dynamic updates of a QRCode in a .NET MAUI application, follow these steps:
+
+1. Ensure the `RadBarcode` is properly configured in your XAML with the correct binding to the view model property. Use the `Value` attribute to bind to the view model property.
+
+```xml
+
+
+
+
+
+```
+
+2. In your view model, implement the property to which the Barcode's `Value` is bound. Ensure this property notifies the UI of changes, typically by implementing the `INotifyPropertyChanged` interface.
+
+```csharp
+public class MainPageViewModel : Telerik.Maui.Controls.NotifyPropertyChangedBase
+{
+ private string selectedCity;
+
+ public ObservableCollection Cities { get; set; }
+
+ public string SelectedCity
+ {
+ get => selectedCity;
+ set => UpdateValue(ref selectedCity, value);
+ }
+
+ public MainPageViewModel()
+ {
+ Cities = new ObservableCollection
+ {
+ "Madrid", "Los Angeles", "Paris", "Beijing",
+ "Singapore", "New Delhi", "Bangkok", "Berlin"
+ };
+
+ SelectedCity = Cities.FirstOrDefault();
+ }
+}
+```
+
+3. Bind the view model to the View's `BindingContext` to establish the data binding.
+
+```csharp
+public partial class MainPage : ContentPage
+{
+ public MainPage()
+ {
+ InitializeComponent();
+ BindingContext = new MainPageViewModel();
+ }
+}
+```
+
+4. Optionally, use a control like `RadComboBox` to change the selected city and see the QRCode update in real-time.
+
+```xml
+
+```
+
+## See Also
+
+- [Barcode Overview](https://docs.telerik.com/devtools/maui/controls/barcode/overview)
+- [QRCode Symbology](https://docs.telerik.com/devtools/maui/controls/barcode/2d-barcodes/qrcode-overview)
+- [Binding in .NET MAUI](https://docs.microsoft.com/en-us/dotnet/maui/fundamentals/data-binding)
+
+---
diff --git a/knowledge-base/dataform-net-maui-validation.md b/knowledge-base/dataform-net-maui-validation.md
new file mode 100644
index 000000000..4474fdf38
--- /dev/null
+++ b/knowledge-base/dataform-net-maui-validation.md
@@ -0,0 +1,71 @@
+---
+title: Implementing Validation in DataForm for .NET MAUI
+description: Learn how to add validation rules to your DataForm fields in .NET MAUI by using Data Annotations.
+type: how-to
+page_title: How to Add Validation to DataForm in .NET MAUI Using Data Annotations
+slug: dataform-net-maui-validation
+tags: dataform, .net maui, validation, data annotations, regex
+res_type: kb
+---
+
+## Environment
+
+| Versions | Product | Author |
+| --- | --- | ---- |
+| 9.0.0 | Telerik UI for .NET MAUI DataForm | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) |
+
+## Description
+
+When working with DataForm in .NET MAUI, there might be requirements to validate the input data, such as checking if an entry is a valid email address or phone number. The question arises on how to implement these validations without manually coding standard inputs for each field type.
+
+This knowledge base article also answers the following questions:
+- How to validate phone numbers in DataForm?
+- How to validate email addresses in DataForm?
+- How to use regular expressions for validation in DataForm?
+
+## Solution
+
+To enable validation in the DataForm for .NET MAUI, utilize the data annotations provided by the `System.ComponentModel.DataAnnotations` namespace. These annotations can trigger validation on various events such as lost focus, property changed, or manually.
+
+The examples in this article show how to apply different validation rules.
+
+### Validating a Phone Number
+
+To validate a phone number, use the `[Phone]` attribute along with a `[RegularExpression]` attribute for more specific patterns.
+
+```csharp
+[Required]
+[Phone]
+[RegularExpression(pattern: "(?:(?:\\+?1\\s*(?:[.-]\\s*)?)?(?:(\\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\\s*)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\\s*(?:[.-]\\s*)?)([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\\s*(?:[.-]\\s*)?([0-9]{4})(?:\\s*(?:#|x\\.?|ext\\.?|extension)\\s*(\\d+))?$", ErrorMessage = "Invalid phone format")]
+[Display(Name = "Phone", Prompt = "Enter Phone")]
+public string Phone
+{
+ get => this.phone;
+ set => this.UpdateValue(ref this.phone, value);
+}
+```
+
+### Validating an Email Address
+
+For email address validation, the `[EmailAddress]` attribute is sufficient. This ensures the input matches a basic email pattern.
+
+```csharp
+[Required]
+[EmailAddress]
+[Display(Name = "Email", Prompt = "Enter Email")]
+public string Email
+{
+ get => this.email;
+ set => this.UpdateValue(ref this.email, value);
+}
+```
+
+### Note on Regular Expressions
+
+Regular expressions (regex) offer a powerful way to specify validation patterns. In the example above, the regex is used to validate a phone number format. Be mindful that complex patterns can be difficult to read and maintain, so test extensively.
+
+## See Also
+
+- [Data Annotations in .NET MAUI DataForm](https://docs.telerik.com/devtools/maui/controls/dataform/data-annotations)
+- [System.ComponentModel.DataAnnotations Namespace](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations?view=net-9.0)
+- [Regular Expression Language - Quick Reference](https://learn.microsoft.com/en-us/dotnet/standard/base-types/regular-expression-language-quick-reference)
diff --git a/knowledge-base/datagrid-maui-cell-content-template-selector.md b/knowledge-base/datagrid-maui-cell-content-template-selector.md
new file mode 100644
index 000000000..b962ce9c9
--- /dev/null
+++ b/knowledge-base/datagrid-maui-cell-content-template-selector.md
@@ -0,0 +1,122 @@
+---
+title: Implementing Cell Content Template Selector in DataGrid for MAUI
+description: Learn how to use a DataTemplateSelector for cell content in DataGrid for MAUI to display different templates based on data conditions.
+type: how-to
+page_title: Using DataTemplateSelector in DataGrid for MAUI Cells
+slug: datagrid-maui-cell-content-template-selector
+tags: datagrid, maui, cell, template, selector, datatemplateselector
+res_type: kb
+---
+
+## Environment
+
+| Version | Product | Author |
+| --- | --- | ---- |
+| 9.0.0 | Telerik UI for .NET MAUI DataGrid | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova)|
+
+## Description
+
+Customizing the appearance of cell content in the DataGrid based on specific data conditions is a common requirement. This knowledge base article demonstrates how to implement a [`DataTemplateSelector`](https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/datatemplate?view=net-maui-9.0#create-a-datatemplateselector) for cell content in DataGrid for MAUI.
+
+This knowledge base article also answers the following questions:
+- How do I use a `DataTemplateSelector` with DataGrid in MAUI?
+- Can I display different cell templates in DataGrid based on the data?
+- What is the way to customize DataGrid cells dynamically in MAUI?
+
+## Solution
+
+To customize cell content dynamically in the DataGrid, use a `DataTemplateSelector`. This requires defining multiple `DataTemplate` instances and a selector class that decides which template to apply based on the data.
+
+### Step 1: Define the Data Templates
+
+Define the data templates in the XAML resources. Each template specifies how the cell content should appear for different data conditions.
+
+```xml
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### Step 2: Implement the DataTemplateSelector
+
+Create a `DataTemplateSelector` subclass that overrides the `OnSelectTemplate` method. This method determines which template to use based on the data condition.
+
+```csharp
+public class PersonDataTemplateSelector : DataTemplateSelector
+{
+ public DataTemplate ValidTemplate { get; set; }
+ public DataTemplate InvalidTemplate { get; set; }
+
+ protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
+ {
+ return ((Data)item).Country == "India" ? ValidTemplate : InvalidTemplate;
+ }
+}
+```
+
+### Step 3: Define Sample Model and ViewModel:
+
+```csharp
+public class ViewModel
+{
+ public ObservableCollection Items { get; set; }
+ public ViewModel()
+ {
+
+ this.Items = new ObservableCollection()
+ {
+ new Data { Country = "India", Capital = "New Delhi"},
+ new Data { Country = "South", Capital = "Cape Town"},
+ new Data { Country = "Nigeria", Capital = "Abuja"},
+ new Data { Country = "Singapore", Capital = "Singapore"}
+ };
+ }
+}
+public class Data
+{
+ public string Country { get; set; }
+ public string Capital { get; set; }
+}
+```
+
+### Step 4: Apply the Template Selector to the DataGrid
+
+Assign the template selector to the `CellContentTemplateSelector` property of the relevant DataGrid column.
+
+```xml
+
+
+
+
+
+
+```
+
+This setup allows the DataGrid to dynamically display different cell templates based on the condition defined in the `PersonDataTemplateSelector`.
+
+## See Also
+
+- [Data Templates in .NET MAUI](https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/datatemplate)
+- [DataGrid Overview in Telerik UI for MAUI](https://docs.telerik.com/devtools/maui/controls/datagrid/overview)
diff --git a/knowledge-base/datagrid-maui-change-background-color.md b/knowledge-base/datagrid-maui-change-background-color.md
new file mode 100644
index 000000000..61c43101e
--- /dev/null
+++ b/knowledge-base/datagrid-maui-change-background-color.md
@@ -0,0 +1,58 @@
+---
+title: Changing Background Color of Rows and Columns in DataGrid for MAUI
+description: Learn how to customize the background color of rows and columns in the DataGrid for MAUI component.
+type: how-to
+page_title: How to Customize Background Color in DataGrid Rows and Columns for MAUI
+slug: datagrid-maui-change-background-color
+tags: datagrid, maui, background, color, row, column
+res_type: kb
+---
+
+## Environment
+
+| Version | Product | Author |
+| --- | --- | ---- |
+| 10.0.0 | Telerik UI for .NET MAUI DataGrid | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova)|
+
+## Description
+Changing the background color of DataGrid rows or columns is essential for enhancing the visual appearance of the grid or highlighting specific data.
+
+This knowledge base article also answers the following questions:
+- How can I style the rows in a DataGrid for MAUI?
+- What property allows changing the column background color in DataGrid for MAUI?
+- How do I apply custom styling to DataGrid cells in MAUI?
+
+## Solution
+
+To customize the background color of columns in the DataGrid for MAUI, utilize the `CellDecorationStyle` property available at the column level. For rows, set the `RowBackgroundStyle` property at the DataGrid level.
+
+### Changing Column Background Color
+
+The `CellDecorationStyle` property allows you to define custom styles for cells within a column. Refer to the [Columns Styling documentation](https://docs.telerik.com/devtools/maui/controls/datagrid/theming-and-styles/columns-styling#celldecorationstyle) for detailed information on column styling.
+
+```xaml
+
+
+
+```
+
+### Changing Row Background Color
+
+To modify the background color of rows, set the `RowBackgroundStyle` property at the DataGrid level. This property applies a background color to all rows in the DataGrid. Detailed information on styling cells and rows can be found in the [Styling documentation](https://docs.telerik.com/devtools/maui/controls/datagrid/theming-and-styles/styling#cells-and-rows).
+
+```xaml
+
+
+
+```
+
+By setting these properties, you can achieve a customized appearance for your DataGrid, making it easier to visually distinguish between different rows or columns based on your application's requirements.
+
+## See Also
+
+- [Styling the DataGrid for MAUI](https://docs.telerik.com/devtools/maui/controls/datagrid/theming-and-styles/styling)
+- [DataGrid Columns Overview](https://docs.telerik.com/devtools/maui/controls/datagrid/columns/overview)
diff --git a/knowledge-base/datagrid-maui-conditional-cell-editing.md b/knowledge-base/datagrid-maui-conditional-cell-editing.md
new file mode 100644
index 000000000..3daf3ef77
--- /dev/null
+++ b/knowledge-base/datagrid-maui-conditional-cell-editing.md
@@ -0,0 +1,112 @@
+---
+title: Enabling and Disabling Cell Editing in DataGrid for MAUI Based on Conditions
+description: Learn how to control cell editing in the DataGrid for MAUI by applying conditions to specific cells or rows.
+type: how-to
+page_title: How to Conditionally Enable or Disable Cell Editing in DataGrid for MAUI
+slug: datagrid-maui-conditional-cell-editing
+tags: datagrid, maui, cell, edit, condition, enable, disable
+res_type: kb
+---
+
+## Environment
+
+| Version | Product | Author |
+| --- | --- | ---- |
+| 10.0.0 | DataGrid for .NET MAUI | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova)|
+
+## Description
+
+In scenarios where editing needs to be enabled or disabled for specific cells or rows in a DataGrid, the framework does not provide direct properties to accomplish this at the row level. This knowledge base article demonstrates how to selectively enable or disable cell editing in the [DataGrid for MAUI](https://docs.telerik.com/devtools/maui/controls/datagrid/commands/editing) by implementing a custom command. This solution is useful when the editability of a cell depends on certain conditions.
+
+
+This knowledge base article also answers the following questions:
+- How can I disable editing for specific cells in a DataGrid?
+- Is it possible to control editing at the cell level in the DataGrid for MAUI?
+- How do I implement conditional editing in the DataGrid based on the row data?
+
+## Solution
+
+To control the editability of specific cells or rows, create a custom `BeginEditCommand` and use a property in your data model to determine whether a cell should be editable:
+
+**1.** Define your `RadDataGrid` in XAML and set up the columns accordingly. Use the `UserEditMode` property to enable cell editing and define a custom command for initiating edits.
+
+```xml
+
+
+
+
+
+
+
+
+
+
+
+ ...
+
+```
+
+**2.** Implement the data model class with an `IsEnabled` property to control the editability.
+
+ ```csharp
+ public class Data : NotifyPropertyChangedBase
+ {
+ private bool isEnabled;
+ public string Value { get; set; }
+ public bool IsEnabled
+ {
+ get { return this.isEnabled; }
+ set { UpdateValue(ref this.isEnabled, value); }
+ }
+
+ public DateTime Date { get; set; }
+ public string Text { get; set; }
+ }
+```
+
+**3.** Create a ViewModel that includes a collection of data items.
+
+ ```csharp
+ public class ViewModel
+ {
+ public List Source { get; set; } = new List
+ {
+ new Data {Value ="One", IsEnabled=true, Date=new DateTime(2021,12,12), Text="Text 1"},
+ new Data {Value ="Two", IsEnabled=false, Date=new DateTime(2021,12,13), Text="Text 2"},
+ ...
+ };
+ }
+```
+
+**4.** Define the `BeginEditCommand` with custom logic to enable or disable editing based on the `IsEnabled` property.
+
+```csharp
+ public class BeginEditCommand : DataGridCommand
+ {
+ public BeginEditCommand()
+ {
+ this.Id = DataGridCommandId.BeginEdit;
+ }
+ public override bool CanExecute(object parameter)
+ {
+ return base.CanExecute(parameter);
+ }
+ public override void Execute(object parameter)
+ {
+ var context = (EditContext)parameter;
+ var cellEdit = context.CellInfo as DataGridCellInfo;
+
+ if (cellEdit != null && cellEdit.Column is DataGridTextColumn && cellEdit.Column.HeaderText == "Text" && (cellEdit.Item as Data).IsEnabled == true)
+ {
+ this.Owner.CommandService.ExecuteDefaultCommand(DataGridCommandId.BeginEdit, parameter);
+ }
+ }
+ }
+```
+
+The provided solution allows for fine-grained control over cell editing in the DataGrid, enabling or disabling editing based on model properties or other conditions.
+
+## See Also
+
+- [DataGrid Commands Documentation](https://docs.telerik.com/devtools/maui/controls/datagrid/commands/overview)
+- [Editing in DataGrid for MAUI](https://docs.telerik.com/devtools/maui/controls/datagrid/editing)
diff --git a/knowledge-base/entry-vs-textinput.md b/knowledge-base/entry-vs-textinput.md
new file mode 100644
index 000000000..e378389c4
--- /dev/null
+++ b/knowledge-base/entry-vs-textinput.md
@@ -0,0 +1,33 @@
+---
+title: Comparison Between Entry and TextInput
+page_title: Review the differences between the Entry and TextInput controls and their usage - .NET MAUI Knowledge Base
+description: Learn what are the differences and the usage of the .NET MAUI Entry and TextInput controls.
+type: how-to
+slug: entry-vs-textinput
+tags: maui, entry, textinput, .net maui entry
+res_type: kb
+---
+
+## Environment
+
+| Versions | Product | Author |
+| --- | --- | ---- |
+| Telerik UI for .NET MAUI 8.0.0 and above | Entry and TextInput | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) |
+
+## Description
+
+This kb article answers the following questions:
+- What are the differences between .NET MAUI Entry and TextInput controls?
+- What is the usage of the Entry and the TextInput MAUI controls from Telerik MAUI 8.0.0 version and above?
+
+## Entry and TextInput Differences
+
+The `RadEntry` control is a templated control that is wrapped in a border, uses the [`RadTextInput`]({%slug entry-textinput%}) for entering text, and has a clear button and a validation styling mechanism.
+
+The `RadTextInput` control is a control for entering text. The control does not have a border and a clear button.
+
+## Entry and TextInput Usage
+
+The `RadEntry` is used internally in the `RadChat` and in the different masked entry controls.
+
+The `RadTextInput` control is part of the `RadAutoComplete`, `RadComboBox`, and `RadNumericInput` control templates.
diff --git a/knowledge-base/group-collectionview-display-another-property-net-maui.md b/knowledge-base/group-collectionview-display-another-property-net-maui.md
new file mode 100644
index 000000000..dbfc46899
--- /dev/null
+++ b/knowledge-base/group-collectionview-display-another-property-net-maui.md
@@ -0,0 +1,137 @@
+---
+title: Grouping CollectionView by One Property and Displaying Another in .NET MAUI
+description: Learn how to group items in a CollectionView by one property and display a different property in the group header in .NET MAUI.
+type: how-to
+page_title: How to Group CollectionView by One Property and Display Another in .NET MAUI
+slug: group-collectionview-display-another-property-net-maui
+tags: collectionview, grouping, .net maui, displaymemberpath, groupheader, converter
+res_type: kb
+---
+
+## Environment
+
+| Versions | Product | Author |
+| --- | --- | ---- |
+| 9.0.0 | Telerik UI for .NET MAUI CollectionView | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) |
+
+## Description
+
+In a .NET MAUI application, I need to group items in a CollectionView based on one property but display another property in the group header. How can I achieve this customization?
+
+This knowledge base article also answers the following questions:
+- How to use a converter in a CollectionView group header template in .NET MAUI?
+- How to customize the display of grouped items in CollectionView?
+- How to bind to a different property in the CollectionView group header?
+
+## Solution
+
+To group items in a CollectionView by one property and display a different property in the group header, follow these steps:
+
+1. Define a converter that will map the property used for grouping to the property you wish to display. This converter will be used in the group header template.
+
+2. Apply the converter to the binding in the group header template to display the desired property.
+
+### Define the Converter
+
+Create a converter that maps the grouping property to the desired display property. Here's an example of a `CountryNameToFlagConverter` that maps country names to their corresponding flag images.
+
+```csharp
+public class CountryNameToFlagConverter : IValueConverter
+{
+ public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+ {
+ var countriesAndFlags = new Dictionary();
+ for (int i = 1; i <= 5; i++)
+ {
+ countriesAndFlags.Add($"Country {i}", $"flag_{i}.png");
+ }
+
+ if (value == null || !countriesAndFlags.ContainsKey((string)value))
+ {
+ return countriesAndFlags.First().Value;
+ }
+
+ var countryName = (string)value;
+ return countriesAndFlags[countryName];
+ }
+
+ public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+ {
+ throw new NotImplementedException();
+ }
+}
+```
+
+### Customize the Group Header Template
+
+Use the converter within the `GroupHeaderTemplate` of the CollectionView to display the desired property instead of the default grouping property.
+
+```xml
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### Add Sample Data to the CollectionView
+
+Finally, populate the CollectionView with sample data that includes the properties you are grouping by and the properties you wish to display.
+
+```csharp
+public partial class MainPage : ContentPage
+{
+ public MainPage()
+ {
+ InitializeComponent();
+
+ var items = new ObservableCollection();
+
+ for (int group = 1; group <= 5; group++)
+ {
+ for (int index = 1; index <= 5; index++)
+ {
+ var city = new City($"Country {group}", $"City {index}", $"Data {index}");
+ items.Add(city);
+ }
+ }
+
+ this.grid.ItemsSource = items;
+ }
+}
+
+public class City
+{
+ public City(string country, string name, string data)
+ {
+ Country = country;
+ Name = name;
+ Data = data;
+ }
+
+ public string Country { get; }
+ public string Name { get; }
+ public string Data { get; }
+}
+```
+
+By following these steps, you can group items in a CollectionView by one property and display a different property in the group header.
+
+## See Also
+
+- [Grouping in CollectionView](https://docs.telerik.com/devtools/maui/controls/collectionview/grouping/header)
+- [Data Binding in .NET MAUI](https://docs.microsoft.com/en-us/dotnet/maui/fundamentals/data-binding/)
+- [IValueConverter Interface](https://docs.microsoft.com/en-us/dotnet/api/system.windows.data.ivalueconverter)
diff --git a/knowledge-base/images/chart-how-to-create-custom-palette.png b/knowledge-base/images/chart-how-to-create-custom-palette.png
index 962580bd4..33e96264b 100644
Binary files a/knowledge-base/images/chart-how-to-create-custom-palette.png and b/knowledge-base/images/chart-how-to-create-custom-palette.png differ
diff --git a/knowledge-base/images/localization-segment-result.png b/knowledge-base/images/localization-segment-result.png
new file mode 100644
index 000000000..f1a5dd3a7
Binary files /dev/null and b/knowledge-base/images/localization-segment-result.png differ
diff --git a/knowledge-base/images/myresource-file.png b/knowledge-base/images/myresource-file.png
new file mode 100644
index 000000000..b6355c420
Binary files /dev/null and b/knowledge-base/images/myresource-file.png differ
diff --git a/knowledge-base/images/pie-chart-palette.png b/knowledge-base/images/pie-chart-palette.png
new file mode 100644
index 000000000..52fa8121f
Binary files /dev/null and b/knowledge-base/images/pie-chart-palette.png differ
diff --git a/knowledge-base/implicit-style-input-controls.md b/knowledge-base/implicit-style-input-controls.md
new file mode 100644
index 000000000..8f3e9ac7c
--- /dev/null
+++ b/knowledge-base/implicit-style-input-controls.md
@@ -0,0 +1,170 @@
+---
+title: Styling ComboBox, AutoComplete and Entry in Telerik MAUI After Upgrading to Version 8.0.0 or Later
+description: Learn how to apply implicit and explicit styles to ComboBox, AutoComplete and Entry controls in Telerik MAUI version 8.0.0 or later.
+type: how-to
+page_title: How to Style ComboBox, AutoComplete and Entry in Telerik MAUI Version 8.0.0+
+slug: style-combobox-autocomplete-entry-implicit-explicit
+tags: combobox, styling, telerik, maui, implicit style, explicit style
+res_type: kb
+---
+
+## Environment
+
+| Versions | Product | Author |
+| --- | --- | ---- |
+| 8.0.0 or Later | Telerik UI for .NET MAUI ComboBox, AutoComplete, Entry | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) |
+
+## Description
+
+This knowledge base article answers the following questions:
+- How can I apply an implicit style to the `RadComboBox`, `RadAutoComplete`, and `RadEntry` in Telerik MAUI after an update to 8.0.0 or a later version?
+- How do I style the inner input control (`RadTextInput`) used in the `RadComboBox`, `RadAutoComplete` and `RadEntry` in Telerik MAUI version 8.0.0 or later?
+
+## Solution
+
+This example shows how to apply an implicit style to the AutoComplete, ComboBox, and Entry, and apply an explicit style to the inner input control—TextInput.
+
+**1.** Define the `RadComboBox`, `RadAutoComplete` and `RadEntry` in XAML:
+
+```XAML
+
+
+
+
+
+
+
+```
+
+**2.** Define the implicit styles to the page's resources or in a global resource dictionary file:
+
+```XAML
+
+
+
+
+
+
+
+
+```
+
+For the `RadTextInput` control—Define the explicit style through the `TextInputStyle` property of the `RadAutoComplete` and the `RadComboBox` controls.
+
+## See Also
+
+- [Telerik UI for MAUI ComboBox Documentation]({%slug combobox-overview%})
+- [Telerik UI for MAUI AutoComplete Documentation]({%slug autocomplete-overview%})
+- [Telerik UI for MAUI Entry Documentation]({%slug entry-overview%})
+- [Telerik UI for MAUI TextInput Documentation]({%slug entry-textinput%})
+
diff --git a/knowledge-base/integrating-navigationview-with-maui-navigation.md b/knowledge-base/integrating-navigationview-with-maui-navigation.md
new file mode 100644
index 000000000..b1c9de2a6
--- /dev/null
+++ b/knowledge-base/integrating-navigationview-with-maui-navigation.md
@@ -0,0 +1,104 @@
+---
+title: Integrating NavigationView with MAUI Navigation
+description: Learn how to integrate Telerik UI for .NET MAUI NavigationView with MAUI's navigation system.
+type: how-to
+page_title: How to Use NavigationView with MAUI's Navigation System
+slug: integrating-navigationview-with-maui-navigation
+tags: navigationview, .net maui, navigation, ui for .net maui
+res_type: kb
+---
+
+## Environment
+
+| Versions | Product | Author |
+| --- | --- | ---- |
+| 9.0.0 | Telerik UI for .NET MAUI NavigationView | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) |
+
+## Description
+
+Understanding how Telerik UI for .NET MAUI [NavigationView](https://docs.telerik.com/devtools/maui/controls/navigationview/overview) integrates with the .NET MAUI Navigation system is crucial for developing seamless navigation within your application.
+
+This knowledge base article also answers the following questions:
+
+- How do I navigate between pages using NavigationView in a .NET MAUI application?
+- Can NavigationView work with MAUI NavigationPage for navigating through pages?
+- How to handle selection changes in NavigationView for page navigation?
+
+## Solution
+
+To integrate Telerik UI for .NET MAUI NavigationView with MAUI navigation, first consider the difference between the two: Telerik MAUI `RadNavigationView` is a control for displaying navigation items (views, control, etc.) and does not inherently manage page navigation. In contrast, MAUI `NavigationPage` manages a stack of pages, facilitating navigation and user experience.
+
+Then, once you know the difference between them, you can implement the [navigation logic](#navigationview-implementation).
+
+### NavigationView Implementation
+
+Use the `SelectionChanged` event of the `NavigationView` to implement custom navigation logic. When a navigation item is selected, navigate to the corresponding page using the `Navigation.PushAsync` method.
+
+**1.** Define the `RadNavigationView` in XAML with the navigation items:
+
+```xaml
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+**2.** Handle the `SelectionChanged` event to navigate to different pages based on the selected item:
+
+```csharp
+private void navigationView_SelectionChanged(object sender, EventArgs e)
+{
+ var control = sender as RadNavigationView;
+ var selItem = control.SelectedItem as NavigationViewItem;
+ var selectedItemText = selItem == null ? "null" : selItem.Text;
+
+ if(selectedItemText == "Item 1")
+ {
+ Navigation.PushAsync(new NewPage1());
+ }
+ else if(selectedItemText == "Item 2")
+ {
+ Navigation.PushAsync(new NewPage2());
+ }
+}
+```
+
+### Using .NET MAUI NavigationPage
+
+For managing a stack of pages and enhancing user experience, utilize the MAUI `NavigationPage`. Review the official [NavigationPage documentation](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/pages/navigationpage?view=net-maui-9.0) for detailed information.
+
+### Using .NET MAUI Shell Navigation
+
+If your application requires shell-like navigation with hosting pages, consider using the .NET MAUI Shell navigation structure. For more details, refer to the official documentation on [Shell navigation](https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/shell/navigation?view=net-maui-8.0) and [Shell pages](https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/shell/pages?view=net-maui-8.0).
+
+## See Also
+
+- [Telerik UI for .NET MAUI NavigationView Documentation](https://docs.telerik.com/devtools/maui/controls/navigationview/overview)
+- [MAUI NavigationPage Documentation](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/pages/navigationpage?view=net-maui-9.0)
+- [.NET MAUI Shell Navigation Documentation](https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/shell/navigation?view=net-maui-8.0)
diff --git a/knowledge-base/listview-gridlayout-spancount-binding.md b/knowledge-base/listview-gridlayout-spancount-binding.md
index e55107d36..bce606e75 100644
--- a/knowledge-base/listview-gridlayout-spancount-binding.md
+++ b/knowledge-base/listview-gridlayout-spancount-binding.md
@@ -121,4 +121,4 @@ public partial class MainPage : ContentPage
## See Also
--[ListView Layouts]({%slug listview-features-layouts%}})
+-[ListView Layouts]({%slug listview-features-layouts%})
diff --git a/knowledge-base/listview-horizontal-orientation--gridlayout.md b/knowledge-base/listview-horizontal-orientation--gridlayout.md
index a4aaf0df0..8f5fcf648 100644
--- a/knowledge-base/listview-horizontal-orientation--gridlayout.md
+++ b/knowledge-base/listview-horizontal-orientation--gridlayout.md
@@ -53,4 +53,4 @@ The default value of Orientation property is `Vertical`. If you want to apply ho
## See Also
--[ListView Layouts]({%slug listview-features-layouts%}})
\ No newline at end of file
+-[ListView Layouts]({%slug listview-features-layouts%})
\ No newline at end of file
diff --git a/knowledge-base/pie-chart-custom-colors.md b/knowledge-base/pie-chart-custom-colors.md
new file mode 100644
index 000000000..57e8bd155
--- /dev/null
+++ b/knowledge-base/pie-chart-custom-colors.md
@@ -0,0 +1,118 @@
+---
+title: Creating Custom PieChart Palettes
+page_title: Adding Custom Colors to the PieChart - .NET MAUI Knowledge Base
+description: Learn how to customize the colors of the Telerik UI for .NET MAUI PieChart component.
+type: how-to
+slug: pie-chart-custom-colors
+tags: maui, chart, color, custom, palette, pie chart, donut chart
+res_type: kb
+---
+
+## Environment
+
+| Version | Product | Author |
+| --- | --- | ---- |
+| 10.0.0 | PieChart for .NET MAUI | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova)|
+
+
+## Description
+
+I want to change the default colors of the PieChart for donut or pie series.
+
+This knowledge base article also answers the following questions:
+- How can I use custom colors in the Telerik UI for .NET MAUI PieChart?
+- How can I change the color on the Telerik `DonutSeries` or `PieSeries`?
+
+## Solution
+
+The PieChart supports the following default set of colors for displaying its data points:
+
+* `#0078D4`
+* `#EA005E`
+* `#60CCFE`
+* `#0093F9`
+* `#00B7C3`
+* `#FFB900`
+* `#C239B3`
+* `#6B69D6`
+
+To modify the default built-in colors, implement a custom palette, as demonstrated in the following scenario:
+
+**1.** Create a sample `DataModel`:
+
+
+
+**2.** Define the `ViewModel` class:
+
+```C#
+public class ViewModel
+{
+ public ObservableCollection Data { get; set; }
+
+ public ViewModel()
+ {
+ this.Data = GetCategoricalData();
+ }
+
+ private static ObservableCollection GetCategoricalData()
+ {
+ var data = new ObservableCollection
+ {
+ new CategoricalData { Category = "Greenings", Value = 52 },
+ new CategoricalData { Category = "Perfecto", Value = 19 },
+ new CategoricalData { Category = "NearBy", Value = 82 },
+ new CategoricalData { Category = "Family", Value = 23 },
+ new CategoricalData { Category = "Fresh", Value = 56 },
+ };
+ return data;
+ }
+}
+```
+
+**3.** Define the `RadPieChart` with `DonutSeries` in XAML:
+
+```XAML
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+**4.** Add the `telerik` namespace:
+
+```XAML
+xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
+```
+
+The following image shows the end result of the suggested implementation.
+
+
+
diff --git a/knowledge-base/segmentedcontrol-localization.md b/knowledge-base/segmentedcontrol-localization.md
new file mode 100644
index 000000000..fe08f79ac
--- /dev/null
+++ b/knowledge-base/segmentedcontrol-localization.md
@@ -0,0 +1,71 @@
+---
+title: Implementing Localization in .NET MAUI SegmentedControl
+description: Learn how to apply localization values for the .NET MAUI SegmentedControl component to customize the strings in the ItemsSource.
+type: how-to
+page_title: Setting Localization for the Segments in the .NET MAUI SegmentedControl
+slug: localization-dotnet-maui-segmentedcontrol
+tags: segmentedcontrol, .net maui, localization, strings
+res_type: kb
+---
+
+## Environment
+
+| Version | Product |
+| ------- | ------- |
+| 9.0.0 | Telerik UI for .NET MAUI SegmentedControl |
+
+## Description
+
+When working with the [SegmentedControl]({%slug segmentedcontrol-overview%}) for .NET MAUI, you might need to localize the text displayed in each segment.
+
+This knowledge base article also answers the following questions:
+
+* How to localize the text when the control's `ItemsSource` is an `Array` of `strings`?
+* How to use a resource (`.resx`) file for localization?
+* How to localize strings in an array?
+
+## Solution
+
+To localize the text inside the segments of the SegmentedControl:
+
+**1.** [Create a `.resx` file](https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/localization?view=net-maui-9.0#create-resource-files-to-store-strings) to store the strings. In the example below, the `.resx` file is named `MyResource`.
+
+
+
+The resource file contains the following information for each item:
+
+* `Name`—Specifies the key used to access the text in code.
+* `NeturalValue`—Specifies the translated text.
+
+**2.** In XAML, access the generic static properties in the `SegmentedControl.ItemsSource` by using the `x:Static` markup extension:
+
+```XAML
+
+
+
+
+
+
+
+
+
+
+```
+
+**3.** Add the following namespaces:
+
+```XAML
+xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
+xmlns:local="clr-namespace:YourNamespace"
+```
+
+This is the result when applying localization for segments:
+
+
+
+## See Also
+
+- [SegmentedControl Overview]({%slug segmentedcontrol-overview%}
+- [.NET MAUI Localization](https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/localization?view=net-maui-9.0)
diff --git a/knowledge-base/style-autocomplete-visual-state.md b/knowledge-base/style-autocomplete-visual-state.md
new file mode 100644
index 000000000..ddeb47967
--- /dev/null
+++ b/knowledge-base/style-autocomplete-visual-state.md
@@ -0,0 +1,56 @@
+---
+title: Styling AutoComplete in Telerik MAUI After Upgrading to Version 8.0.0 or Later
+description: Learn how to apply styles to RadAutoComplete, including border color and thickness, and background color when the control is focused, after upgrading to Telerik MAUI version 8.0.0 or later.
+type: how-to
+page_title: How to Style AutoComplete with Focused State in Telerik MAUI Version 8.0.0+
+slug: style-autocomplete-visual-state-border-telerik-maui
+tags: autocomplete, styling, visual states, telerik, maui, upgrade, focused state
+res_type: kb
+---
+
+## Environment
+
+| Versions | Product | Author |
+| --- | --- | ---- |
+| 7.1.0 vs. latest | Telerik UI for .NET MAUI AutoComplete | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) |
+
+## Description
+
+After updating my application from Telerik MAUI 7.1.0 to 8.0.0 or a later version, the styles set on `RadAutoComplete` controls, such as colored borders and backgrounds, disappear when the controls are focused. How can I apply these styles again?
+
+This knowledge base article also answers the following questions:
+- How can I apply border color and thickness to `RadAutoComplete` in Telerik MAUI after an update to 8.0.0 or a later version?
+- How do I maintain the `RadAutoComplete` background color when it's focused in Telerik MAUI version 8.0.0 or later?
+- What changes are necessary for styling `RadAutoComplete` upon focusing after migrating to Telerik MAUI 8.0.0 or later?
+
+## Solution
+
+To style the `RadAutoComplete` control, including maintaining or altering the border color, thickness, and background color when the control is focused, you need to apply specific styles to the `Focused` visual state of the control. This approach is necessary due to changes in the `RadAutoComplete` API and the introduction of a new theming mechanism in Telerik MAUI version 8.0.0 and later.
+
+### Set the Focused Visual State
+
+First, familiarize yourself with the [`RadAutoComplete` Styling]({%slug autocomplete-styling%}) documentation and the [Visual States]({%slug autocomplete-visual-states%}) guide. These resources provide essential information on how to style the `RadAutoComplete` control effectively.
+
+### API Changes from Telerik MAUI 7.1.0 to 8.0.0 and Later
+
+The `RadAutoComplete` control has changes in the transition from version 7.1.0 to 8.0.0.
+
+The table below summarizes the key changes relevant to styling:
+
+| Telerik.UI.for.MAUI <= 7.1.0 | Telerik.UI.for.MAUI >= 8.0.0 |
+| ------------ | ----------- |
+| `ClearButtonColor` | Set the `TextColor` in the `ClearButtonStyle` (`Style` with target type `RadTemplatedButton`). |
+| `HoveredClearButtonColor` | Use `PointerOver` `VisualState` in the `ClearButtonStyle` (`Style` with target type `RadTemplatedButton`) and set `TextColor`. |
+| `PressedClearButtonColor` | Use `Pressed` `VisualState` in the `ClearButtonStyle` (`Style` with target type `RadTemplatedButton`) and set `TextColor`. |
+| NA | [`VisualStates`]({%slug autocomplete-visual-states%}). |
+| Automation Id—`RadAutoCompleteEntry`. | Automation Id—`RadAutoCompleteTextInput`. |
+| NA | `TextInputStyle`—Allows you to style the inner input control. |
+
+Ensure you review the full list of breaking changes and adapt your application accordingly: [Telerik MAUI 8.0.0 version breaking changes](https://docs.telerik.com/devtools/maui/upgrade/breaking-changes/8-0-0).
+
+By addressing the changes in the API and properly setting the `Focused` visual state, you can maintain or customize the styling of `RadAutoComplete` controls when they are focused, ensuring a consistent look and feel across your application.
+
+## See Also
+
+- [Telerik UI for MAUI AutoComplete Documentation]({%slug autocomplete-overview%})
+
diff --git a/knowledge-base/style-combobox-visual-state.md b/knowledge-base/style-combobox-visual-state.md
new file mode 100644
index 000000000..814440ee1
--- /dev/null
+++ b/knowledge-base/style-combobox-visual-state.md
@@ -0,0 +1,55 @@
+---
+title: Styling ComboBox in Telerik MAUI After Upgrading to Version 8.0.0 or Later
+description: Learn how to apply styles to RadComboBox, including border color and thickness, and background color when the control is focused, after upgrading to Telerik MAUI version 8.0.0 or later.
+type: how-to
+page_title: How to Style ComboBox with Focused State in Telerik MAUI Version 8.0.0+
+slug: style-combobox-visual-state-border-telerik-maui
+tags: combobox, styling, visual states, telerik, maui, upgrade, focused state
+res_type: kb
+---
+
+## Environment
+
+| Versions | Product | Author |
+| --- | --- | ---- |
+| 7.1.0 vs. latest | Telerik UI for .NET MAUI ComboBox | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) |
+
+## Description
+
+After updating my application from Telerik MAUI 7.1.0 to 8.0.0 or a later version, the styles set on `RadComboBox` controls, such as colored borders and backgrounds, disappear when the controls are focused. How can I apply these styles again?
+
+This knowledge base article also answers the following questions:
+- How can I apply border color and thickness to `RadComboBox` in Telerik MAUI after an update to 8.0.0 or a later version?
+- How do I maintain the `RadComboBox` background color when it's focused in Telerik MAUI version 8.0.0 or later?
+- What changes are necessary for styling `RadComboBox` upon focusing after migrating to Telerik MAUI 8.0.0 or later?
+
+## Solution
+
+To style the `RadComboBox` control, including maintaining or altering the border color, thickness, and background color when the control is focused, you need to apply specific styles to the `Focused` visual state of the control. This approach is necessary due to changes in the `RadComboBox` API and the introduction of a new theming mechanism in Telerik MAUI version 8.0.0 and later.
+
+### Set the Focused Visual State
+
+First, familiarize yourself with the [`RadComboBox` Styling]({%slug combobox-styling%}) documentation and the [Visual States]({%slug combobox-visual-states%}) guide. These resources provide essential information on how to style the `RadComboBox` control effectively.
+
+### API Changes from Telerik MAUI 7.1.0 to 8.0.0 and Later
+
+The `RadComboBox` control has changes in the transition from version 7.1.0 to 8.0.0.
+
+The table below summarizes the key changes relevant to styling:
+
+| Telerik.UI.for.MAUI <= 7.1.0 | Telerik.UI.for.MAUI >= 8.0.0 |
+| ------------ | ----------- |
+| `DropDownButtonStyle` (`Style` with tagtet type `RadButton`) | `DropDownButtonStyle` (`Style` with target type `RadTemplatedButton`). |
+| `ClearButtonStyle` (`Style` with tagtet type `RadButton`) | `ClearButtonStyle` (`Style` with target type `RadTemplatedButton`) and set `TextColor`. |
+| NA | [`VisualStates`]({%slug combobox-visual-states%}). |
+| Automation Id—`RadComboBoxEntry`. | Automation Id—`RadComboBoxTextInput`. |
+| NA | `TextInputStyle`—Allows you to style the inner input control. |
+
+Ensure you review the full list of breaking changes and adapt your application accordingly: [Telerik MAUI 8.0.0 version breaking changes](https://docs.telerik.com/devtools/maui/upgrade/breaking-changes/8-0-0).
+
+By addressing the changes in the API and properly setting the `Focused` visual state, you can maintain or customize the styling of `RadComboBox` controls when they are focused, ensuring a consistent look and feel across your application.
+
+## See Also
+
+- [Telerik UI for MAUI ComboBox Documentation]({%slug combobox-overview%})
+
diff --git a/knowledge-base/style-entry-visual-state-border-telerik-maui.md b/knowledge-base/style-entry-visual-state-border-telerik-maui.md
new file mode 100644
index 000000000..5abf6481b
--- /dev/null
+++ b/knowledge-base/style-entry-visual-state-border-telerik-maui.md
@@ -0,0 +1,64 @@
+---
+title: Styling Entry in Telerik MAUI After Upgrading to Version 8.0.0 or Later
+description: Learn how to apply styles to RadEntry, including border color and thickness, and background color when the control is focused, after upgrading to Telerik MAUI version 8.0.0 or later.
+type: how-to
+page_title: How to Style RadEntry with Focused State in Telerik MAUI Version 8.0.0+
+slug: style-entry-visual-state-border-telerik-maui
+tags: entry, styling, visual states, telerik, maui, upgrade, focused state
+res_type: kb
+---
+
+## Environment
+
+| Versions | Product | Author |
+| --- | --- | ---- |
+| 7.1.0 vs. latest | Telerik UI for .NET MAUI Entry | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) |
+
+## Description
+
+After updating my application from Telerik MAUI 7.1.0 to 8.0.0 or a later version, the styles set on `RadEntry` controls, such as colored borders and backgrounds, disappear when the controls are focused. How can I apply these styles again?
+
+This knowledge base article also answers the following questions:
+- How can I apply border color and thickness to `RadEntry` in Telerik MAUI after an update to 8.0.0 or a later version?
+- How do I maintain the `RadEntry` background color when it's focused in Telerik MAUI version 8.0.0 or later?
+- What changes are necessary for styling `RadEntry` upon focusing after migrating to Telerik MAUI 8.0.0 or later?
+
+## Solution
+
+To style the `RadEntry` control, including maintaining or altering the border color, thickness, and background color when the control is focused, you need to apply specific styles to the `Focused` visual state of the control. This approach is necessary due to changes in the `RadEntry` API and the introduction of a new theming mechanism in Telerik MAUI version 8.0.0 and later.
+
+### Set the Focused Visual State
+
+First, familiarize yourself with the [`RadEntry` Styling](https://docs.telerik.com/devtools/maui/controls/entry/styling) documentation and the [Visual States](https://docs.telerik.com/devtools/maui/controls/entry/visual-states) guide. These resources provide essential information on how to style the `RadEntry` control effectively.
+
+### API Changes from Telerik MAUI 7.1.0 to 8.0.0 and Later
+
+The `RadEntry` control underwent significant changes in the transition from version 7.1.0 to 8.0.0.
+
+> Prior to version 8.0.0, `RadEntry` inherited directly from Microsoft's MAUI Entry. In version 8.0.0 and later, `RadEntry` is a composite control using the [`RadTextInput`]({%slug entry-textinput%}) control internally for text input.
+
+The table below summarizes the key changes relevant to styling:
+
+| Telerik.UI.for.MAUI <= 7.1.0 | Telerik.UI.for.MAUI >= 8.0.0 |
+| ------------ | ----------- |
+| `ClearButtonColor` | Set the `TextColor` in the `ClearButtonStyle` (`Style` with target type `RadTemplatedButton`). |
+| `HoveredClearButtonColor` | Use `PointerOver` `VisualState` in the `ClearButtonStyle` (`Style` with target type `RadTemplatedButton`) and set `TextColor`. |
+| `PressedClearButtonColor` | Use `Pressed` `VisualState` in the `ClearButtonStyle` (`Style` with target type `RadTemplatedButton`) and set `TextColor`. |
+| NA | [`VisualStates`]({%slug entry-visual-states%}). |
+| `FocusedBorderBrush` | Use the `Focused` `VisualState` and set `BorderBrush`. |
+| `FocusedBorderThickness` | Use the `Focused` `VisualState` and set `BorderThickness`. |
+| Automation Id—`RadEntryEditor`. | Automation Id—`RadEntryTextInput`. |
+| NA | `ValidationErrorColor` |
+| NA | `ValidationErrorImageStyle` |
+| NA | `ValidationErrorLabelStyle` |
+
+To style the `RadEntry` input area, set the styling properties directly to the `RadEntry`. This approach applies to properties like `Padding`, `MinimumHeightRequest`, `TextColor`, etc.
+
+Ensure you review the full list of breaking changes and adapt your application accordingly: [Telerik MAUI 8.0.0 version breaking changes](https://docs.telerik.com/devtools/maui/upgrade/breaking-changes/8-0-0).
+
+By addressing the changes in the API and properly setting the `Focused` visual state, you can maintain or customize the styling of `RadEntry` controls when they are focused, ensuring a consistent look and feel across your application.
+
+## See Also
+
+- [Telerik UI for MAUI Entry Documentation]({%slug entry-overview%})
+
diff --git a/knowledge-base/sync-scrolling-datagrid-maui.md b/knowledge-base/sync-scrolling-datagrid-maui.md
new file mode 100644
index 000000000..24e558feb
--- /dev/null
+++ b/knowledge-base/sync-scrolling-datagrid-maui.md
@@ -0,0 +1,96 @@
+---
+title: Synchronizing Scrolling Between Two DataGrid Controls in MAUI
+description: Learn how to synchronize horizontal and vertical scrolling between two DataGrid controls in a MAUI application.
+type: how-to
+page_title: How to Sync Scrolling for Two DataGrids in MAUI
+slug: sync-scrolling-datagrid-maui
+tags: datagrid, maui, scroll, synchronize, radscrollview
+res_type: kb
+---
+
+## Environment
+
+| Version | Product | Author |
+| --- | --- | ---- |
+| 9.0.0 | Telerik UI for .NET MAUI DataGrid | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) |
+
+## Description
+
+In a scenario where two DataGrid controls are placed side by side, the requirement is to synchronize their scrolling. When one DataGrid is scrolled either horizontally or vertically, the second DataGrid should scroll in sync with the first one.
+
+This knowledge base article also answers the following questions:
+- How can I link the scroll position of two DataGrids in MAUI?
+- Is it possible to synchronize horizontal scrolling between two DataGrid controls?
+- Can vertical scrolling be synced between DataGrids in a MAUI application?
+
+## Solution
+
+To achieve synchronized scrolling between two DataGrid controls, utilize the `RadScrollView` within each DataGrid. By handling the `Scrolled` event of the first DataGrid's `RadScrollView`, you can programmatically scroll the second DataGrid to match the scroll position of the first DataGrid. Follow the steps below to implement this solution:
+
+1. Identify the `RadScrollView` within each DataGrid. This can be done by iterating through the children of the DataGrid and checking for the `RadScrollView` type.
+
+2. Attach a handler to the `Scrolled` event of the first DataGrid's `RadScrollView`.
+
+3. In the event handler, get the scroll position (`ScrollX` and `ScrollY`) from the event args.
+
+4. Scroll the second DataGrid's `RadScrollView` to the same position using the `ScrollToAsync` method.
+
+Here is a code snippet demonstrating these steps:
+
+```csharp
+public partial class MainPage : ContentPage
+{
+ public MainPage()
+ {
+ InitializeComponent();
+
+ var data = new ObservableCollection();
+ for (int i = 0; i < 30; i++)
+ {
+ data.Add(new Data { Address = "Address" + i, Capital = "Capital" + i, Country = "Country " + i, MyData = "My Data" + i, Name = "Name " + i });
+ }
+ this.grid1.ItemsSource = data;
+
+
+ var data2 = new ObservableCollection();
+ for (int i = 0; i < 30; i++)
+ {
+ data2.Add(new Data { Address = "Address" + i, Capital = "Capital" + i, Country = "Country " + i, MyData = "My Data" + i, Name = "Name " + i });
+ }
+ this.grid2.ItemsSource = data2;
+
+ RadScrollView sv1 = FindRadScrollView(this.grid1);
+ if (sv1 != null)
+ {
+ sv1.Scrolled += Sv_Scrolled;
+ }
+ }
+
+ private void Sv_Scrolled(object? sender, ScrolledEventArgs e)
+ {
+ var x = e.ScrollX;
+ var y = e.ScrollY;
+
+ RadScrollView sv2 = FindRadScrollView(this.grid2);
+ sv2?.ScrollToAsync(x, y, true);
+ }
+
+ private RadScrollView? FindRadScrollView(RadDataGrid grid)
+ {
+ foreach (var child in grid)
+ {
+ if (child is RadScrollView sv)
+ {
+ return sv;
+ }
+ }
+ return null;
+ }
+}
+```
+
+In this solution, `FindRadScrollView` is a helper method that iterates through the children of a DataGrid to find the `RadScrollView`. Once the `RadScrollView` is found and its `Scrolled` event is hooked, any scroll action on the first DataGrid triggers the `Sv_Scrolled` event handler, which then scrolls the second DataGrid accordingly.
+
+## See Also
+
+- [DataGrid Overview]({%slug datagrid-overview%})
diff --git a/spell-ignore.txt b/spell-ignore.txt
index cbcc58814..ef1fee42a 100644
--- a/spell-ignore.txt
+++ b/spell-ignore.txt
@@ -78,4 +78,9 @@ Scaffoldings
scaffolding
scaffoldings
GridSplitter
-DataPager
\ No newline at end of file
+DataPager
+TextInput
+CartesianChart
+PieChart
+TextInput
+telerik
\ No newline at end of file
diff --git a/styling-and-themes/customize-the-component-styles.md b/styling-and-themes/customize-the-component-styles.md
new file mode 100644
index 000000000..c40b7cc6d
--- /dev/null
+++ b/styling-and-themes/customize-the-component-styles.md
@@ -0,0 +1,159 @@
+---
+title: Customizing the Controls' Styles
+page_title: Customizing the Controls' Styles
+description: Learn how to customize the styles and appearance of the Telerik UI for .NET MAUI components by using the resource dictionary files provided by the Telerik UI theme.
+slug: theme-component-styles-customization
+tags: telerik,.net maui,theme,custom
+position: 5
+---
+
+# Customizing the Controls' Styles
+
+The Telerik UI for .NET MAUI themes let you apply custom styles not only by [changing the colors in the theme swatches]({%slug themes-customization %}), but also by selectively customizing individual controls. You can achieve this by using the control-specific resource dictionaries with styles and templates provided by the Telerik and Platform themes.
+
+The Telerik theming mechanism lets you customize individual controls like the DataGrid in two ways:
+
+* By using the provided styles and data templates and applying them directly in the XAML file where you define the control.
+* By creating a dedicated resource dictionary where you paste and modify the desired styles and data templates.
+
+> Before proceeding with the next steps, make sure that the [Telerik theming is enabled]({%slug themes-overview%}#using-the-maui-theming).
+
+## Customizing the Control in Its Declaration
+
+A quick way to change the appearance of a control is to directly copy styles and control templates from the `\TelerikTheming\Styles` folder and use them in the XAML file where you define the control, for example, `MainPage.xaml`. This approach, however, doesn't scale well if you intend to apply your company's distinctive colors and styles to multiple applications.
+
+```XAML
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+>Some control-specific styles and templates depend on the content of the `\TelerikTheming\Styles\Core.xaml` file. In such cases, also copy the content of the `Core.xaml` file.
+
+## Customizing the Control in a Dedicated Dictionary
+
+The Telerik theme lets you customize and at the same time unify the styles of your applications. You can do this at scale by using the styles that come with the Telerik theme and placing them in a dedicated resource dictionary.
+
+A common scenario is to apply your company's colors by [modifying the theme swatch]({%slug themes-customization %}) and then to additionally adjust the styles of a specific control by using your custom colors. This allows you to address specific design or accessibility requirements. As the colors and styles live in dedicated resource dictionaries, you can copy them to other applications, achieving consistent styles.
+
+To customize the desired control-specific theme styles:
+
+1. [Customize the theme colors]({%slug themes-customization %}).
+1. Copy the theme resources that target the desired control and apply your changes.
+1. Handle any style dependencies.
+
+### Copy and Modify the Theme Resources
+
+To modify the Telerik theme styles of a certain control, use the available resource dictionaries in the `\TelerikTheming\Styles` folder as a starting point. These files are generated when you enable the Telerik theming and serve as a reference for your customizations.
+
+The next steps illustrate how to customize the theme styles of the DataGrid control and assume that you've already [customized the colors]({%slug themes-customization %}) of the theme:
+
+**1.** Go to the `Resources\Styles` folder and create a resource dictionary file, for example, `CustomGridStyles.xaml`.
+
+**2.** Add the `telerik` namespace:
+
+```XAML
+xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
+```
+
+**3.** Open the `\TelerikTheming\Styles\DataGrid.xaml` resource dictionary and copy the styles and control templates that you intend to modify.
+
+**4.** Paste the copied styles and control templates into the file that you created in the `Resources\Styles` folder, for example, into the `Resources\Styles\CustomGridStyles.xaml` file.
+
+**5.** Apply the desired changes to the theme styles of the control in the `CustomGridStyles.xaml`file, for example:
+
+```XAML
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+**6.** In the `MainPage.xaml`, add the `CustomRadDataGridStyle` to the declaration of the Grid:
+
+```XAML
+
+
+
+
+
+```
+
+**7.** In the `App.xaml.cs` code behind, merge the `CustomGridStyles` resource dictionary after the Telerik theme. This allows the application to load the theme resources first.
+
+```C#
+ public App()
+ {
+ InitializeComponent();
+
+ var telerikTheming = Application.Current
+ .Resources
+ .MergedDictionaries
+ .OfType()
+ .Single();
+ telerikTheming.Theme = TelerikTheming.Themes
+ .Single(t => t.Theme == "Telerik" && t.Swatch == "Purple");
+ //Merge the custom Grid styles resource dictionary.
+ this.Resources.MergedDictionaries.Add(new CustomGridStyles());
+ this.MainPage = new MainPage();
+ }
+```
+
+### Handle Any Dependencies
+
+Some of the styles and control templates that you can copy from `\TelerikTheming\Styles` have dependencies on other XAML files. To identify these dependencies, look for the comments in the XAML files under `\TelerikTheming\Styles`.
+
+For example, the styles and control templates in the `\TelerikTheming\Styles\DataGrid.xaml` file depend on `\TelerikTheming\Styles\Core.xaml` as indicated by the following comment:
+
+```XAML
+
+```
+
+The comment above shows that using any of the resources in the `\TelerikTheming\Styles\DataGrid.xaml` reference file also requires you to copy the content of the `\TelerikTheming\Styles\Core.xaml` into your custom resource dictionary that you created in the `Resources\Styles` folder.
+
+## See Also
+
+* [Customizing the Telerik Theme Colors]({%slug themes-customization %})
+* [Themes Overview]({%slug themes-overview%})
diff --git a/styling-and-themes/customize-the-theme.md b/styling-and-themes/customize-the-theme.md
index 6bc91ad0f..35fdd48a9 100644
--- a/styling-and-themes/customize-the-theme.md
+++ b/styling-and-themes/customize-the-theme.md
@@ -1,40 +1,36 @@
---
-title: Customizing a Theme
-page_title: Customize a Theme
-description: Learn how to customize the Telerik Theme for your .NET MAUI application and alter the default appearance of the UI for .NET MAUI components.
+title: Customizing the Theme Colors
+page_title: Customizing the Theme Colors
+description: Learn how to customize the colors of the Telerik theme for your .NET MAUI application and alter the default appearance of the UI for .NET MAUI components.
slug: themes-customization
tags: telerik,.net maui,theme,custom
position: 1
---
-# Customizing a Theme
+# Customizing the Theme Colors (Swatches)
The Telerik UI for .NET MAUI themes are flexible and allow you to customize and adjust them to meet the specific application requirements.
-Depending on the changes that you want to apply, you can customize the appearance of the Telerik UI for .NET MAUI controls in a couple of ways:
-* You can modify only the colors in a certain color variation (swatch)—this will affect all the Telerik UI controls.
-* You can change the styles and templates for a specific Telerik UI control.
+When it comes to implementing your brand colors, modifying the swatches (the color variations) of the themes allows you to apply the desired tones to all Telerik UI for .NET MAUI controls.
-Both customization approaches require the following steps:
+> If you need to customize the styles only of a specific control or collection of controls, you can also [modify the control-specific theme resources]({%slug theme-component-styles-customization %}).
-1. Copying the needed resources in a separate resource dictionary and modifying them.
-2. Merging the modified resource dictionary after the Telerik theme resources.
+To customize the Telerik UI for .NET MAUI theme colors:
-Before proceeding with the next steps, make sure the [Telerik Theming is enabled]({%slug themes-overview%}#using-the-maui-theming).
+1. Copy the desired theme resources to a new resource dictionary and apply your changes.
+1. Merge the new resource dictionary after the built-in Telerik theme resources.
-## Copying and Modifying the Theme Resources
+> Before proceeding with the next steps, make sure the [Telerik theming is enabled]({%slug themes-overview%}#using-the-maui-theming).
-All available theme styles are in the `TelerikTheming` folder:
-* The color variations are in the `Swatches` folder.
-* The styles and templates for the Telerik UI for .NET MAUI controls are in the `Styles` folder.
+## Copy and Modify the Theme Resources
-To modify the theme resources:
+To customize the colors of the Telerik or the Platform theme, use the available color swatch resource dictionaries in the `\TelerikTheming\Colors\Telerik\Swatches\` or `\TelerikTheming\Colors\Platform\Swatches\` folder as a starting point. These files are generated when you enable the Telerik theming and serve as a reference for your customizations.
-**1.** Go to the `Resources/Styles` folder and create a `ResourceDictionary` file without a code-behind file, similar to the default `Styles.xaml` and `Colors.xaml`:
+1. Go to the `Resources\Styles` folder and create a resource dictionary file called `CustomTelerikSwatch.xaml`.
-
+1. Choose the [color swatch]({%slug themes-overview%}#swatch) of the theme that you will use as a starting point for your color customizations, for example, the Telerik Main swatch represented by the `\TelerikTheming\Colors\Telerik\Swatches\Main.xaml` resource dictionary.
-**2.** Copy the needed colors or styles from the swatch that you need to modify and paste them into the newly created `ResourceDictionary` file. Apply the required changes based on your design requirements. For example, you can modify the primary colors of a swatch:
+1. Copy the colors that you want to modify from the color swatch and paste them into the newly created `Resources\Styles\CustomTelerikSwatch.xaml` file. Apply the required changes based on your design requirements. For example, you can modify the primary colors of a swatch:
```XAML
@@ -63,9 +59,9 @@ To modify the theme resources:
```
-## Merging the New Resource Dictionary in App.xaml
+## Merge the New Resource Dictionary
-Once you customize the colors and styles, add the new resource dictionary to the `App.xaml` and make sure you merge `CustomTelerikSwatch.xaml` after the `TelerikTheming` file:
+Once you customize the colors in the newly created `Resources\Styles\CustomTelerikSwatch.xaml` resource dictionary, configure the application to use them: add the new resource dictionary to the `App.xaml` and make sure you merge your customized `CustomTelerikSwatch.xaml` resource dictionary after the `TelerikTheming`:
```XAML
@@ -75,40 +71,18 @@ Once you customize the colors and styles, add the new resource dictionary to the
-
+
```
-Here is the result:
+The next image illustrates the effects of customizing the primary color of the theme swatch:
-## Customizing a Specific Control
-
-To modify the Style or ControlTemplate of a certain control, for example `RadComboBox`:
-
-1. Copy the styles and templates from the `ComboBox.xaml` file and paste them into a newly created `ResourceDictionary` file inside `Resources/Styles` folder as in [Copying and Modifying the Theme Resources](#copying-and-modifying-the-theme-resources). Make the needed changes of the ComboBox in that resource dictionary.
-
-1. Merge the new `ResourceDictionary` inside `App.xaml` after the `TelerikTheming` file - the changes will affect all the `RadComboBox` instances across the app.
-
-Some of the controls' XAML files have dependencies on other XAML files, you can check this inside the constructor of that file, for example, the `ComboBox.xaml` has a dependency on `Core.xaml`:
-
-```C#
-public partial class ComboBox : ResourceDictionary
-{
- public ComboBox(ResourceDictionary core)
- {
- this.MergedDictionaries.Add(core);
- InitializeComponent();
- }
-}
-```
-
-In this case, to modify the ComboBox, you'd need to copy and merge the content of both `Core.xaml` and `ComboBox.xaml` files.
-
## See Also
+- [Customizing the Control-Specific Theme Resources]({%slug theme-component-styles-customization %})
- [Themes Overview]({%slug themes-overview%})
diff --git a/styling-and-themes/images/platform-dark.png b/styling-and-themes/images/platform-dark.png
new file mode 100644
index 000000000..db6c9a637
Binary files /dev/null and b/styling-and-themes/images/platform-dark.png differ
diff --git a/styling-and-themes/images/platform-light.png b/styling-and-themes/images/platform-light.png
new file mode 100644
index 000000000..5849aff1c
Binary files /dev/null and b/styling-and-themes/images/platform-light.png differ
diff --git a/styling-and-themes/images/telerik-theming-styles-folder-v10.png b/styling-and-themes/images/telerik-theming-styles-folder-v10.png
new file mode 100644
index 000000000..f90d1f524
Binary files /dev/null and b/styling-and-themes/images/telerik-theming-styles-folder-v10.png differ
diff --git a/styling-and-themes/images/telerik-theming-styles-folder.png b/styling-and-themes/images/telerik-theming-styles-folder.png
deleted file mode 100644
index 634494f06..000000000
Binary files a/styling-and-themes/images/telerik-theming-styles-folder.png and /dev/null differ
diff --git a/styling-and-themes/images/theming-folder-v10.png b/styling-and-themes/images/theming-folder-v10.png
new file mode 100644
index 000000000..a8a023394
Binary files /dev/null and b/styling-and-themes/images/theming-folder-v10.png differ
diff --git a/styling-and-themes/images/theming-folder.png b/styling-and-themes/images/theming-folder.png
deleted file mode 100644
index 942840eaa..000000000
Binary files a/styling-and-themes/images/theming-folder.png and /dev/null differ
diff --git a/styling-and-themes/overview.md b/styling-and-themes/overview.md
index 0af3adb26..69c5389f2 100644
--- a/styling-and-themes/overview.md
+++ b/styling-and-themes/overview.md
@@ -1,16 +1,18 @@
---
-title: Theming Support
-page_title: Theming Support
+title: Theming Overview
+page_title: Theming Overview
description: The Telerik UI for .NET MAUI suite comes with a built-in theme with a set of predefined color variations.
slug: themes-overview
tags: telerik,.net maui,theme,built-in
position: 0
---
-# Theming Support
+# Theming Overview
Telerik UI for .NET MAUI comes with a built-in theme that controls the visual appearance of the components, including colors, borders, backgrounds, size, layout, position, and font size. The theme also offers multiple color variations to choose from.
+In addition to the Telerik theme, Telerik UI for .NET MAUI also provides a Platform theme with light and dark variants. The platform theme closely resembles the light and dark modes of the device that runs your MAUI application.
+
>The built-in Telerik UI for .NET MAUI theme and its swatches were introduced in version 8.0.0 (2024 Q4) and are currently in preview.
@@ -23,18 +25,20 @@ A *theme* is a collection of styles and templates in XAML files, which determine
A *theme swatch* is a color variation of a theme. All swatches of a given theme use the same fonts, sizes, and layouts. On the other hand, the text colors, background colors, and border colors are different.
-The Telerik .NET MAUI theme comes with a set of eight predefined swatches for both dark and light modes:
-
-| Swatch | Color |
-| ------ | ----- |
-| Main |  |
-| Main Dark |  |
-| Ocean Blue |  |
-| Ocean Blue Dark |  |
-| Purple |  |
-| Purple Dark |  |
-| Turquoise |  |
-| Turquoise Dark |  |
+The Telerik .NET MAUI theme comes with a set of eight predefined swatches for both dark and light modes while the Platform theme offers a light and dark swatch.
+
+| Theme | Swatch | Color |
+| ----- | ------ | ----- |
+| Platform | Light |  |
+| Platform | Dark |  |
+| Telerik | Main |  |
+| Telerik | Main Dark |  |
+| Telerik | Ocean Blue |  |
+| Telerik | Ocean Blue Dark |  |
+| Telerik | Purple |  |
+| Telerik | Purple Dark |  |
+| Telerik | Turquoise |  |
+| Telerik | Turquoise Dark |  |
The next image shows the differences and similarities between the Purple and Purple Dark swatches when applied to the AutoComplete control.
@@ -54,21 +58,22 @@ Before you can add Telerik Theming to your app, make sure that it is configured
```
-**2.** Rebuild the solution—this will generate a new `TelerikTheming` folder inside the project containing all the styles and resources needed for the Telerik .NET MAUI controls:
+**2.** Rebuild the solution—this will generate a new `TelerikTheming` folder containing all styles and resources needed for the Telerik .NET MAUI controls.
- 
+ 
-* The `Colors` folder contains the resources needed for each theme swatch in separate resource dictionaries. Note that the colors are referenced through dynamic resources, so you can update them at runtime.
+* The `Colors` folder contains the `Platform` and `Telerik` subfolders, each holding the resource dictionaries required for the theme swatches. Note that the colors are referenced through dynamic resources, so you can update them at runtime.
-* The `Styles` folder contains the styles and templates of the Telerik UI for .NET MAUI controls.
+* The `Styles` folder contains the `Platform` and `Telerik` subfolders, each holding the styles and templates of the Telerik UI for .NET MAUI controls for the corresponding theme.
* The styles are implemented through control-specific XAML files (see the next image).
* The styles for all base controls that are used to build complex controls like the DataGrid are in the `Core.xaml` file.
- * The control templates in the XAML files are specific to the Telerik theme and differ from the default control templates of the Telerik UI for .NET MAUI controls.
+ * The control templates in the XAML files are specific to the Telerik theme and the Platform theme. They differ from the default control templates of the Telerik UI for .NET MAUI controls.
+ * The number of files in the `Platform` and `Telerik` subfolders is different because both themes support a different number of controls.
- 
+ 
>important The files in the `TelerikTheming` folder are auto-generated. Use them only as a reference and do not modify them. See [Customizing the Telerik Theme]({%slug themes-customization %}) for information on how to use these files to apply your own styles.
@@ -115,7 +120,7 @@ After applying the Purple swatch, the ToggleButton looks like this:
## Applying Theme Colors throughout the App
-You can use the colors provided by the Telerik theme and its swatches Each theme swatch provides a set of colors that you can use in parts of your app that aren't Telerik components. This allows you to achieve a consistent look & feel.
+You can use the colors provided by the Telerik theming mechanism and apply them everywhere in your application. Each theme swatch provides a set of colors that you can use in parts of your app that aren't Telerik components. This allows you to achieve a consistent look and feel.
For example, you can use the `RadAppSurfaceColor` and `RadOnAppSurfaceColor` colors for background/text color respectively, and `RadPrimaryColor` for the accent color to match the appearance of the Telerik controls:
@@ -146,4 +151,5 @@ You can take advantage of the available theme swatches and change them at runtim
## Next Steps
-* [Customizing the Telerik Theme]({%slug themes-customization %})
+* [Customizing the Telerik Theme Colors]({%slug themes-customization %})
+* [Customizing the Control-Specific Theme Resources]({%slug theme-component-styles-customization %})
diff --git a/upgrade/breaking-changes/10-0-0.md b/upgrade/breaking-changes/10-0-0.md
new file mode 100644
index 000000000..ec5e864f2
--- /dev/null
+++ b/upgrade/breaking-changes/10-0-0.md
@@ -0,0 +1,20 @@
+---
+title: 10.0.0
+description: Handle the changes in the 10.0.0 release version of the Telerik UI for .NET MAUI components.
+page_title: Breaking Changes in 10.0.0
+slug: changes-in-10-0-0
+position: 8
+---
+
+# Breaking Changes in Version 10.0.0
+
+This article lists the breaking changes introduced with the Telerik UI for .NET MAUI 10.0.0 release version.
+
+## Common Changes
+
+Starting with Telerik UI for .NET MAUI 10.0.0 version you have to apply a valid license key file for new and current projects. For more details review the [Setting Up Your Telerik UI for .NET MAUI License Key]({%slug set-up-your-license%}) article.
+
+## DataPager
+
+* The `CurrentPageButtonStyle` (`Style` with target type `DataPagerNumericButtonsView`) property is removed.
+