diff --git a/ai/copilot-extension.md b/ai/copilot-extension.md index 567f242f6..93620f4b3 100644 --- a/ai/copilot-extension.md +++ b/ai/copilot-extension.md @@ -4,7 +4,7 @@ page_title: Telerik MAUI GitHub Copilot Extension description: Learn how to add and use the Telerik MAUI GitHub Copilot extension as a .NET MAUI AI coding assistant and code generator for better developer productivity. The Telerik MAUI GitHub Copilot extension provides proprietary context about Telerik UI for .NET MAUI to AI-powered software. slug: ai-copilot-extension tags: telerik, maui, ai, dotnetmaui, coding assistant, ai server -position: 10 +position: 3 --- # Telerik MAUI GitHub Copilot Extension @@ -54,8 +54,8 @@ To use the Telerik MAUI Copilot extension: The following examples demonstrate useful prompts for the Telerik MAUI extension: -* "`@telerikmaui` Generate a DataGrid with sorting and paging enabled." -* "`@telerikmaui` Create a Telerik ComboBox for MAUI with multiple selection enabled." +* "`@telerikmaui` Generate a DataGrid with 5 columns and 500 records. Enable sorting for the first column and include paging." +* "`@telerikmaui` Create a Telerik ComboBox with sample data for customers. Enable multiple selection and preselect the first two customers." * "`@telerikmaui` Show me how to implement a Chart with line series." * "`@telerikmaui` Generate a CollectionView with grouping and filtering capabilities." diff --git a/ai/mcp-server.md b/ai/mcp-server.md index b8a8f31a1..1624aa6c3 100644 --- a/ai/mcp-server.md +++ b/ai/mcp-server.md @@ -4,7 +4,7 @@ page_title: Telerik MAUI MCP Server description: Learn how to add and use the Telerik MAUI MCP Server as a .NET MAUI AI coding assistant and code generator for better developer productivity. The Telerik MAUI MCP server provides proprietary context about Telerik UI for .NET MAUI to AI-powered software. slug: ai-mcp-server tags: telerik,maui,ai,ai server,dotnetmaui,coding assistant -position: 20 +position: 1 --- # Telerik .NET MAUI MCP Server @@ -40,7 +40,7 @@ Use these settings when configuring the server in your MCP client: | Type | `stdio` (standard input/output transport) | | Command | `npx` | | Arguments | `-y` | -| Server Name | `telerikMauiAssistant` (customizable) | +| Server Name | `telerik-maui-assistant` (customizable) | ### License Configuration @@ -77,7 +77,7 @@ For complete setup instructions, see [Use MCP servers in Visual Studio](https:// ```json { "servers": { - "telerikMauiAssistant": { + "telerik-maui-assistant": { "type": "stdio", "command": "npx", "args": ["-y", "@progress/telerik-maui-mcp@latest"], @@ -92,7 +92,7 @@ For complete setup instructions, see [Use MCP servers in Visual Studio](https:// ``` 2. Restart Visual Studio. -3. Enable the `telerikMauiAssistant` tool in the [Copilot Chat window's tool selection dropdown](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers?view=vs-2022#configuration-example-with-github-mcp-server). +3. Enable the `telerik-maui-assistant` tool in the [Copilot Chat window's tool selection dropdown](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers?view=vs-2022#configuration-example-with-github-mcp-server). ### Global Setup: @@ -145,7 +145,7 @@ Create `.cursor/mcp.json` in your workspace root (or user folder for global setu ```json { "mcpServers": { - "telerikMauiAssistant": { + "telerik-maui-assistant": { "type": "stdio", "command": "npx", "args": ["-y", "@progress/telerik-maui-mcp@latest"], @@ -164,14 +164,14 @@ Create `.cursor/mcp.json` in your workspace root (or user folder for global setu To use the Telerik MCP Server: 1. Start your prompt with one of these triggers: - - `/telerik` / `@telerik` / `#telerik` - - `/telerikmaui` / `@telerikmaui` / `#telerikmaui` + - `#telerik` + - `#telerikmaui` - `#telerik-maui-assistant` 2. Verify server activation by looking for these messages: - - Visual Studio: `Running telerikMauiAssistant` + - Visual Studio: `Running telerik-maui-assistant` - Visual Studio Code: `Running telerik-maui-assistant` - - Cursor: `Calling MCP tool telerikMauiAssistant` + - Cursor: `Calling MCP tool telerik-maui-assistant` 3. Grant permissions when prompted (per session, workspace, or always). @@ -187,9 +187,9 @@ To increase the likelihood of the Telerik MCP server being used, add custom inst The following examples demonstrate useful prompts for the Telerik .NET MAUI MCP Server: -* "`/telerik` Generate a DataGrid with sorting and paging. Bind it to a Person model with sample ViewModel." -* "`/telerikmaui` Create a ComboBox showing a product list. Include Product class and sample data." -* "`/telerik` Build a CollectionView with sorting and filtering capabilities." +* "`#telerik-maui-assistant Create new maui project with Telerik. Add sample usage of the DataGrid component.`" +* "`#telerik-maui-assistant Create a DataGrid with 3 columns - Name, Country, City. Add the corresponding business object in the code behind and populate it with sample data. Add 20 entries to the data.`" +* "`#telerik-maui-assistant Add CollectionView. Enable drag and drop operation in the control.`" ## Number of Requests diff --git a/ai/overview.md b/ai/overview.md index be97fab68..b3751d7d6 100644 --- a/ai/overview.md +++ b/ai/overview.md @@ -36,15 +36,36 @@ To use the Telerik MAUI AI Coding Assistant, you need: @[template](/_contentTemplates/common/ai-coding-assistant.md#getting-started) * @[template](/_contentTemplates/common/ai-coding-assistant.md#number-of-requests) -## Number of Requests +## Recommendations -The Telerik MAUI AI Coding Assistant allows the following maximum number of requests based on your [Telerik license type](https://www.telerik.com/purchase/faq/licensing-purchasing): +Consider the following recommendations when working with the AI Coding Assistant: -| License Type | Request Limit | -|--------------|---------------| -| Perpetual | 50 requests per year | -| Subscription | Virtually unlimited with fair use threshold of 300 requests per day | -| Trial | 300 requests per trial period (does not reset with new trial activations) | +* Add NuGet packages/referenced assemblies for the Telerik UI for WPF product. +* Set the `.sln` as a context. +* When switching between tasks and files, start a new session in a new chat window to avoid polluting the context with irrelevant or outdated information. +* At the time of publishing, Claude Sonnet 4 produces optimal results. + +## Usage Limits + +Access to the AI Coding Assistant depends on your [Telerik license type](https://www.telerik.com/purchase/faq/licensing-purchasing): + +### Subscription License + +* A Subscription is the primary license that grants full access to the AI Coding Assistant. +* Includes a virtually unlimited number of requests, with a fair use threshold of 300 requests per day. +* Best for ongoing and high-volume usage. + +### Perpetual License (Limited Access) + +* Perpetual licenses include limited access of 50 requests per year. +* Intended for exploring and trying out the AI Coding Assistant. +* For continued or higher-volume access, upgrade to a Subscription license. + +### Trial License + +* Trial licenses include 300 requests per trial per year. +* Reactivating the same trial for a new release does not grant additional requests. +* Designed for evaluating the feature before purchasing. > All Telerik AI tools share a single request quota for your Telerik account. Usage from the [Telerik Copilot extension]({%slug ai-copilot-extension%}) and [Telerik MCP server]({%slug ai-mcp-server%}) counts toward the same limit. Complex prompts in the MCP server may consume multiple requests. @@ -68,7 +89,13 @@ Data Storage: > Make sure also to review the terms and privacy policies of your selected AI model and AI client. +## Telerik Document Processing AI Coding Assistant + +You can also use the AI Coding Assistant for Telerik Document Processing to generate high-quality code samples and speed up your development. +Read the full guide in the dedicated [DPL AI Coding Assistant article](https://docs.telerik.com/devtools/document-processing/ai-coding-assistant/overview). + ## Next Steps * Install the [Telerik MAUI GitHub Copilot Extension]({%slug ai-copilot-extension%}) -* Configure the [Telerik MAUI MCP Server]({%slug ai-mcp-server%}) with an MCP-enabled client \ No newline at end of file +* Configure the [Telerik MAUI MCP Server]({%slug ai-mcp-server%}) with an MCP-enabled client +* Review the [Prompt Library]({%slug ai-prompt-library%}) \ No newline at end of file diff --git a/ai/prompt-library.md b/ai/prompt-library.md new file mode 100644 index 000000000..cb7d79382 --- /dev/null +++ b/ai/prompt-library.md @@ -0,0 +1,307 @@ +--- +title: Prompt Library +page_title: Telerik UI for .NET MAUI Prompt Library +description: Explore the extensive collection of prompts that you can use with the Telerik UI for MAUI AI Coding Assistant. +slug: ai-prompt-library +position: 2 +--- + +# Telerik UI for MAUI Prompt Library + +Welcome to the Telerik UI for MAUI Prompt Library. + +The prompts provided here are intended and optimized for use with the Telerik UI for MAUI AI Coding Assistant [MCP Server]({%slug ai-mcp-server%}). They can help you kick start your app development and speed up the component configuration process. + +This collection of prompts is not exhaustive and the Telerik UI for .NET MAUI team is constantly working on adding more prompts to the library. + +>tip [Go straight to the prompts](#general-prompts) + +## How to Use the Prompts + +All prompts in this library target the [MCP Server]({%slug ai-mcp-server%}) via the `#telerik-maui-assistant` handle. Make sure that you have installed and enabled the MCP Server before attempting to run the prompts. + +1. Browse the prompt library to find a prompt that suits your needs. +2. Copy the prompt text (including the `#telerik-maui-assistant` handle). +3. (Optional) Customize the prompt as needed for your specific use case but keep the `#telerik-maui-assistant` handle.
When modifying the prompts, make sure the changes comply with the [recommendations]({%slug ai-overview%}#recommendations) for the AI Coding Assistant. +4. Run the prompt against the [MCP Server]({%slug ai-mcp-server%}). + +>warning Always double-check the code and solutions proposed by any AI-powered tool before applying them to your project. + +>caption Use with the Copilot Extension + +To run the provided prompts in the [Telerik UI for MAUI GitHub Copilot Extension]({%slug ai-copilot-extension%}) (without the MCP Server installed), modify the prompts to use the `@telerikmaui` handle instead. + +## General Prompts + +This section provides examples of general questions related to Telerik UI for MAUI. + + + + + + + + + + +
Set Up New Project and Add DataGrid controlComponent Overview
+

+#telerik-maui-assistant Create new maui project with Telerik. Add sample usage of the DataGrid component.
+
+		 +

+#telerik-maui-assistant What are the main Telerik UI for Maui components and their primary use cases?
+
+
+ + + + + + + + +
Create Project with Telerik Dark Theme
+

+#telerik-maui-assistant Add Theming to my project and set the theme to PlatformDark.
+
+
+ +## Component-Specific Prompts + +This section provides examples of prompts targeting specific Telerik UI for MAUI components. + +### DataGrid + +The [Telerik UI for .NET MAUI DataGrid]({%slug datagrid-overview%}) is a powerful control that allows you to visualize and edit tabular represented data in your .NET MAUI applications. + + + + + + + + + + +
DataGrid with Sample DataDataGrid with Sorting, Grouping and Aggregates
+

+#telerik-maui-assistant Create a DataGrid with 3 columns - Name, Country, City. Add the corresponding business object in the code behind and populate it with sample data. Add 20 entries to the data.
+
+		 +

+#telerik-maui-assistant Create a data grid with 100 records each having Id, Name and Company. Group the data by Company. Sort by name. Add aggregate count function for the company column.
+
+
+ + + + + + + + + + +
DataGrid with ComboBox ColumnDataGrid with Paging
+

+#telerik-maui-assistant Data bind the DataGrid control to a collection of items. Add columns for stock data manually where one of the columns should use a ComboBox.
+
+		 +

+#telerik-maui-assistant Create a DataGrid with 100 employee records with two columns for name and company name. Include paging in the DataGrid with 20 records per page.
+
+
+ + + + + + + + + + +
DataGrid with Frozen Column, Filtering and Disabled Sorting and EditingDataGrid with Load on Demand and Multiple Selection
+

+#telerik-maui-assistant Create a DataGrid with 3 columns - Name, Country, City. Add sample data from ViewModel. I would like the Name column to be frozen, the Country and City should not be editable. Allow filtering only for Name and disable sorting for all columns.
+
+		 +

+#telerik-maui-assistant Add DataGrid with initially 5 items. New 10 items should be loaded on demand. Enable multiple selection of cells.
+
+
+ +### CollectionView + +The [Telerik .NET MAUI CollectionView]({%slug collectionview-overview%}) is a virtualizing view component that provides option to filter, sort and group the items. + + + + + + + + + + +
CollectionView with Drag and DropCollectionView with Grouping and Sorting
+

+#telerik-maui-assistant Add CollectionView. Enable drag and drop operation in the control.
+
+		 +

+#telerik-maui-assistant Add CollectionView for countries bound to 500 items in the view model. Sort the data by date founded property and group the data by continent. Apply styling to the countries.
+
+
+ + + + + + + + + + +
CollectionView with Custom DataTemplate and Preselected ItemCollectionView with Grouping, Sticky Headers, Filtering and Footer
+

+#telerik-maui-assistant Add an example with the control bound to a collection of 200 items. The items should contain name, address, city and id. Preselect the second item and apply custom ui for the items. The UI should also include an image and a checkbox. 
+
+		 +

+#telerik-maui-assistant Add CollectionView with 50 countries, show the country in the collectionview and group by continent. Enable sticky groups and add info in the headers how many items are in each group. Add UI in the header of the collectionview for filtering by country. In the footer add the count of all countries.
+
+
+ +### ComboBox + +The [Telerik UI for .NET MAUI ComboBox]({%slug combobox-overview%}) enables users to select one or more items from a dropdown list. + + + + + + + + + + +
ComboBox with Sample DataComboBox with Multiple Selection and Custom DataTemplate
+

+#telerik-maui-assistant Add ComboBox data bound to a collection of business objects. Each object should have a Name, Address, City and Country property. Use the Name to display the items in the UI.
+
+		 +

+#telerik-maui-assistant Add ComboBox data bound to a collection of business objects. Each object should have a Name, Address, City and Country property. Use the Name to display the items in the UI. Show all of the properties in the drop down and allow multiple selection.
+
+
+ + + + + + + + +
ComboBox with Multiple Selection and Open Dropdown on Selection
+

+#telerik-maui-assistant Add ComboBox with 30 countries. Allow multiple selection and prevent the dropdown from closing on selection. Set the placeholder to "Select Country".
+
+
+ +### Chart + +The [Telerik UI for .NET MAUI Charts]({%slug chart-overview%}) are feature-rich, intuitive, and easy-to-use data-visualization controls with differen series like bar, line, pie, financial, etc. + + + + + + + + + + +
Line Chart with Sample DataChart with Bar and Line Series
+

+#telerik-maui-assistant Create a line chart with 100 records of sample data. Each record should have Value plotted on the vertical axis and Date on the horizontal axis.
+
+		 +

+#telerik-maui-assistant Create a chart with mixed series visualization - bar, line and point. Each item should have a category representing a quarter (Q1, Q2, etc.) and a numeric value representing the sales for the quarter in US dollars.
+
+
+ + + + + + + + +
Chart with Pan, Zoom and Tooltips features
+

+#telerik-maui-assistant Add Bar Chart with sample data. Apply horizontal zooming, enable panning and show tooltips.
+
+
+ +### TabView + +The [Telerik TabView for .NET MAUI]({%slug tabview-overview%}) is a flexible navigation control that allows you to build tabbed interfaces. + + + + + + + + + + +
TabView with 3 Tabs and Preselected Second TabTabView with Custom Header Item Template
+

+#telerik-maui-assistant Create TabView with 3 tabs and preselect the second tab. First tab should have a CollectionView as content, second tab should have a detail view for stocks, third tab should have a pie chart.
+
+		 +

+#telerik-maui-assistant Create a TabView with custom templates for header items. The header item template should have a label for displaying icons, text and a delete button (removing the tab).
+
+
+ + + + + + + + +
Add Tabs Dynamically
+

+#telerik-maui-assistant Add TabView with 2 items. Provide a button at the bottom right corner of the page for adding items. When the button is clicked add new items.
+
+
+ +### Scheduler + +The [Telerik UI for .NET MAUI Scheduler]({%slug scheduler-overview%}) allows you to easily implement various scheduling scenarios in your .NET MAUI apps. + + + + + + + + +
Scheduler with All Views
+

+#telerik-maui-assistant Define a scheduler with all available views. By default show week view. Create sample appointments visible in the current week for Monday and Friday. Use ViewModel for the appointments source.
+
+
+ +## See Also + +* [GitHub Copilot Documentation](https://docs.github.com/en/copilot) +* [GitHub Copilot Tutorials](https://github.com/features/copilot/tutorials) +* [Telerik MAUI MCP Server]({%slug ai-mcp-server%}) +* [Telerik UI for .NET MAUI Documentation](https://docs.telerik.com/devtools/maui/) diff --git a/controls/aiprompt/styling/aipromptbutton-styling.md b/controls/aiprompt/styling/aipromptbutton-styling.md index 0384e608e..eb8fe43c2 100644 --- a/controls/aiprompt/styling/aipromptbutton-styling.md +++ b/controls/aiprompt/styling/aipromptbutton-styling.md @@ -18,7 +18,7 @@ The following example demonstrates how to modify the AIPrompt Button's appearanc **2.** Add the `RadAIPromptButton` control with its `Style` applied: - + Check the result below: diff --git a/controls/autocomplete/configuration.md b/controls/autocomplete/configuration.md index 5726f107e..a69267304 100644 --- a/controls/autocomplete/configuration.md +++ b/controls/autocomplete/configuration.md @@ -15,7 +15,7 @@ The purpose of this help article is to show you the main configuration options o AutoComplete exposes `Placeholder` property which is used to give guidance to the end user on what should be entered in the text input. You can also use the `PlaceholderColor` property to define the placeholder text color of the component. - + ## Display Mode diff --git a/controls/checkbox/getting-started.md b/controls/checkbox/getting-started.md index f7602e0f6..f13e1aac9 100644 --- a/controls/checkbox/getting-started.md +++ b/controls/checkbox/getting-started.md @@ -29,9 +29,7 @@ Before adding the CheckBox, you need to: **1.** When the your .NET MAUI application is set up, you are ready to add a CheckBox control to your page. -```XAML - -``` + **2.** Add the `telerik` namespace: diff --git a/controls/datagrid/aggregates/styling.md b/controls/datagrid/aggregates/styling.md index c75a2abcb..0276175c7 100644 --- a/controls/datagrid/aggregates/styling.md +++ b/controls/datagrid/aggregates/styling.md @@ -95,15 +95,15 @@ The table below describes the available properties for the `GroupAggregateCellSt **1.** Define the DataGrid in XAML: - + **2.** Define the `StyleSelector` class: - + **3.** Define the `GroupAggregateCellStyleSelector` in the page's resources: - + **4.** Define the `DataModel`: diff --git a/controls/datagrid/columns/column-types/boolean-column.md b/controls/datagrid/columns/column-types/boolean-column.md index ec4eae54a..54ad867e6 100644 --- a/controls/datagrid/columns/column-types/boolean-column.md +++ b/controls/datagrid/columns/column-types/boolean-column.md @@ -18,9 +18,9 @@ The `DataGridBooleanColumn` is used to represent boolean values. It uses the Che * `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. * `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. +* `CellContentTemplate`(`DataTemplate`)—Defines the appearance of each cell associated with the concrete column. The `CellContentTemplate` 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. +* `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. @@ -45,7 +45,7 @@ The `DataGridBooleanColumn` is used to represent boolean values. It uses the Che ![DataGrid Boolean Column](images/booleancolumn-overview.png) -**Example with CellContenTemplate and CellEditTemplate** +**Example with CellContentTemplate and CellEditTemplate** ```XAML - + - + diff --git a/controls/datagrid/columns/column-types/picker-column.md b/controls/datagrid/columns/column-types/picker-column.md index cb16230f0..5b5ed3e64 100644 --- a/controls/datagrid/columns/column-types/picker-column.md +++ b/controls/datagrid/columns/column-types/picker-column.md @@ -23,7 +23,7 @@ Here are the specific properties defined for `DataGridPickerColumn`: * `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. * `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. +* `CellContentTemplate` (`DataTemplate`)—Defines the appearance of each cell associated with the concrete column. `CellContentTemplate` 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. diff --git a/controls/datagrid/columns/column-types/text-column.md b/controls/datagrid/columns/column-types/text-column.md index 6cd98e7e1..ebbc91fb9 100644 --- a/controls/datagrid/columns/column-types/text-column.md +++ b/controls/datagrid/columns/column-types/text-column.md @@ -22,7 +22,7 @@ Here are the specific properties for the Text Columns: * `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. * `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. +* `CellContentTemplate` (`DataTemplate`)—Defines the appearance of each cell associated with the concrete column. `CellContentTemplate` 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. diff --git a/controls/datagrid/columns/column-types/time-column.md b/controls/datagrid/columns/column-types/time-column.md index 48efd6936..b0028d50f 100644 --- a/controls/datagrid/columns/column-types/time-column.md +++ b/controls/datagrid/columns/column-types/time-column.md @@ -18,7 +18,7 @@ The `DataGridTimeColumn` is used to represent `TimeSpan` objects. It uses the Te * `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. * `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. +* `CellContentTemplate` (`DataTemplate`)—Defines the appearance of each cell associated with the concrete column. `CellContentTemplate` 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. @@ -47,7 +47,7 @@ The `DataGridTimeColumn` is used to represent `TimeSpan` objects. It uses the Te ![DataGrid Time Column](images/timecolumn-overview.png) -**Example with CellContenTemplate and CellEditTemplate** +**Example with CellContentTemplate and CellEditTemplate** ```XAML +**Define the DropDownViewStyle** + + + **Define the FooterStyle** diff --git a/controls/map/getting-started.md b/controls/map/getting-started.md index 740d25f5d..0187385d1 100644 --- a/controls/map/getting-started.md +++ b/controls/map/getting-started.md @@ -31,7 +31,6 @@ Before adding the Map, you need to: 1. When your .NET MAUI application is set up, you are ready to add a Map control to your page. - 1. Add the following namespace: diff --git a/controls/progressbar/styling.md b/controls/progressbar/styling.md index 866e67d15..61911e12c 100644 --- a/controls/progressbar/styling.md +++ b/controls/progressbar/styling.md @@ -52,7 +52,7 @@ Style the ProgressBar segments using the following properties: For indeterminate mode you can style the ProgressBar using the `ProgressFill`(`Brush`) property. - + ![.NET MAUI ProgressBar Style the indeterminate mode fill](images/progressbar-styling-indeterminate-fill.png) diff --git a/controls/rating/rating-shape-rating.md b/controls/rating/rating-shape-rating.md index 32dd5d849..10aa6d229 100644 --- a/controls/rating/rating-shape-rating.md +++ b/controls/rating/rating-shape-rating.md @@ -50,7 +50,7 @@ The Rating supports the following geometry types: ![.NET MAUI Custom Shape Rating](images/rating-triangle.png) - + ## Shapes Styling diff --git a/controls/scheduler/styling/special-slots-styling.md b/controls/scheduler/styling/special-slots-styling.md index 262428b3e..5dd76f56f 100644 --- a/controls/scheduler/styling/special-slots-styling.md +++ b/controls/scheduler/styling/special-slots-styling.md @@ -24,7 +24,7 @@ In the example special slots are used to distinguish the non-working hours. In a **3.** Add the ViewModel class with the `SpecialSlotsSource` defined: - + **4.** Define the Scheduler with the `SpecialSlotStyleSelector` property applied to the view definitions: diff --git a/controls/signaturepad/commands.md b/controls/signaturepad/commands.md index bbbe049af..a7ce5d55d 100644 --- a/controls/signaturepad/commands.md +++ b/controls/signaturepad/commands.md @@ -13,9 +13,11 @@ SignaturePad exposes a `ClearCommand`(`ICommand`) for clearing the signature. -Add the namespace: +Add the `telerik` namespace: - +```XAML +xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" +``` ## See Also diff --git a/controls/signaturepad/events.md b/controls/signaturepad/events.md index b8407de86..9d0525c9d 100644 --- a/controls/signaturepad/events.md +++ b/controls/signaturepad/events.md @@ -29,9 +29,11 @@ The example contains an **X** Button, two Labels and a `RadSignaturePad`. -**2.** Add the following namespace: +**2.** Add the `telerik` namespace: - +```XAML +xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" +``` **3.** Add the events: diff --git a/controls/tabview/styling/header-itemstyle-selector.md b/controls/tabview/styling/header-itemstyle-selector.md index 51ac2005b..4494e444a 100644 --- a/controls/tabview/styling/header-itemstyle-selector.md +++ b/controls/tabview/styling/header-itemstyle-selector.md @@ -11,7 +11,7 @@ position: 3 The TabView control provides the built-in `HeaderItemStyleSelector` property, which allows you to apply different styles to each TabView header item. The target type of the style must be `TabViewHeaderItem`. -The following example shows how to apply styles to the TabView heare using a style selector. +The following example shows how to apply styles to the TabView by using a style selector. **1.** Define the TabView control: diff --git a/controls/templatedpicker/styling/popup-styling.md b/controls/templatedpicker/styling/popup-styling.md index a92da9398..48a54523b 100644 --- a/controls/templatedpicker/styling/popup-styling.md +++ b/controls/templatedpicker/styling/popup-styling.md @@ -54,7 +54,7 @@ The following example shows how the styling properties are applied. **Define the FooterStyle** - + **Define the AcceptButtonStyle** diff --git a/controls/timepicker/timeonly.md b/controls/timepicker/timeonly.md index d01fb1c62..773f12b51 100644 --- a/controls/timepicker/timeonly.md +++ b/controls/timepicker/timeonly.md @@ -35,7 +35,7 @@ xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" **4.** Add the `ViewModel`: - + > For the TimePicker TimeOnly example, go to the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and navigate to the **TimePicker > TimeOnly** category. diff --git a/controls/timespanpicker/timeonly.md b/controls/timespanpicker/timeonly.md index 1df603121..d94aa5f70 100644 --- a/controls/timespanpicker/timeonly.md +++ b/controls/timespanpicker/timeonly.md @@ -34,7 +34,7 @@ xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" **4.** Add the `ViewModel`: - + > For the TimeSpanPicker TimeOnly example, go to the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and navigate to the **TimeSpanPicker > TimeOnly** category. diff --git a/controls/treedatagrid/editing.md b/controls/treedatagrid/editing.md index a1152aa67..d004a6f9a 100644 --- a/controls/treedatagrid/editing.md +++ b/controls/treedatagrid/editing.md @@ -55,10 +55,6 @@ For detailed information on how to use any of the listed commands, go to the top You can change the visual appearance of each editor through the `CellEditorStyle` property of the `DataGridColumn`. To the `CellEditorStyle`, apply a `Microsoft.Maui.Controls.Style` with a `TargetType` set to the corresponding to each column editor control. -The following snippet shows a `CellEditorStyle` applied to the `TreeDataGridTextColumn`. - - - ## Additional Resources - [.NET MAUI TreeDataGrid Product Page](https://www.telerik.com/maui-ui/TreeDataGrid) diff --git a/controls/treedatagrid/methods.md b/controls/treedatagrid/methods.md index ba9685e2d..ba335f2b1 100644 --- a/controls/treedatagrid/methods.md +++ b/controls/treedatagrid/methods.md @@ -1,20 +1,26 @@ --- -title: Methods -page_title: .NET MAUI TreeDataGrid Documentation - Methods +title: Expand and Collapse Items +page_title: .NET MAUI TreeDataGrid Documentation - Expand Collapse Items description: Learn about the Telerik UI for .NET MAUI TreeDataGrid methods and how to expand or collapse a parent node programatically. position: 20 tags: methods slug: treedatagrid-methods --- -# .NET MAUI TreeDataGrid Methods +# Expand and Collapse Items in .NET MAUI TreeDataGrid -The [Telerik UI for .NET MAUI TreeDataGrid]({%slug datagrid-overview%}) exposes the following methods to expand and collapse the children of an item: +The [Telerik UI for .NET MAUI TreeDataGrid]({%slug treedatagrid-overview%}) lets you expand and collapse item either through the UI-by tapping on the expand/collapse icon or programmatically. + +The TreeDataGrid allows you to collapse all items by setting the `AutoExpandGroups` (`bool`) property. The default value is `false`, which means, all items are expanded. + +## Expand and Collapse Specific Items + +The TreeDataGrid exposes the following methods to expand and collapse the children of an item: * `Expand`(`object item`)—Expands the children of the item. * `Collapse`(`object item`)—Collapses the children of the item. -Use the `IsExpanded` (`bool`) property to get a value whether the item is currently expanded (has its children visible). +Use the `IsExpanded` (`object item`) method to get a value whether the item is currently expanded (has its children visible). Returns `true` if the item is expanded, otherwise `false`. ## Additional Resources diff --git a/demos-and-sample-apps/overview.md b/demos-and-sample-apps/overview.md index 09f188215..671ace3bc 100644 --- a/demos-and-sample-apps/overview.md +++ b/demos-and-sample-apps/overview.md @@ -17,9 +17,9 @@ The Telerik UI for .NET MAUI library offers an extensive set of fully featured e The following demo apps deliver a rich collection of .NET MAUI examples: -* [Controls Samples App](#controls-samples-app) -* [SDKBrowser App](#sdkbrowser-app) -* [Crypto Tracker App](#crypto-tracker-app) +* [Controls Samples App]({%slug controls-samples-app%}) +* [SDKBrowser App]({%slug sdkbrowser-app%}) +* [Crypto Tracker App]({%slug maui-crypto-app%}) > 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 you use to build the .NET MAUI sample apps. diff --git a/knowledge-base/attaching-images-dotnet-maui-chat.md b/knowledge-base/attaching-images-dotnet-maui-chat.md index 5b991e15c..8bc908c8a 100644 --- a/knowledge-base/attaching-images-dotnet-maui-chat.md +++ b/knowledge-base/attaching-images-dotnet-maui-chat.md @@ -21,7 +21,7 @@ I want to know how to attach an image in the .NET MAUI Chat and display the imag This knowledge base article also answers the following questions: - How to upload an image in .NET MAUI Chat? - How to create a custom template for images in .NET MAUI Chat? -- How to use ItemTemplateSelector to manage media content in .NET MAUI Chat? +- How to use `ItemTemplateSelector` to manage media content in .NET MAUI Chat? ## Solution @@ -115,13 +115,13 @@ add additional elements here or Use the following steps to display images in the chat: -1. Implement the logic for uploading images in the button's command. +**1.** Implement the logic for uploading images in the button's command. >note To handle image uploads in .NET MAUI, you need to ensure your application has the necessary permissions to access the device's storage and camera. -2. Create a custom `ItemTemplate` to display image messages. -3. Use the `ItemTemplateSelector` to dynamically choose templates based on message content. +**2.** Create a custom `ItemTemplate` to display image messages. +**3.** Use the `ItemTemplateSelector` to dynamically choose templates based on message content. -Follow the steps outlined in the [ItemTemplateSelector documentation](https://docs.telerik.com/devtools/maui/controls/chat/item-template-selector) to configure this functionality. +Follow the steps outlined in the [`ItemTemplateSelector` documentation](https://docs.telerik.com/devtools/maui/controls/chat/item-template-selector) to configure this functionality. Example of an `ItemTemplate` for rendering messages with images: diff --git a/knowledge-base/collectionview-item-template-adjust-height.md b/knowledge-base/collectionview-item-template-adjust-height.md new file mode 100644 index 000000000..c698c8f8e --- /dev/null +++ b/knowledge-base/collectionview-item-template-adjust-height.md @@ -0,0 +1,59 @@ +--- +title: Adjusting Item Template Height in CollectionView for .NET MAUI +description: Learn how to make the item template in CollectionView for .NET MAUI occupy only the space it uses by removing extra white space. +type: how-to +page_title: Removing Extra Space Below Text in CollectionView Item Template +meta_title: Removing Extra Space Below Text in CollectionView Item Template +slug: collectionview-item-template-adjust-height +tags: collectionview, .net maui, item template, minimumheightrequest, itemlength +res_type: kb +--- + +## Environment + +| Version | Product | Author | +| --- | --- | ---- | +| 11.1.0 | Telerik UI for .NET MAUI CollectionView | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) | + + +## Description + +I want the item template of the CollectionView to only occupy the space it uses. The extra white space below the text in the item needs to be removed. + +This knowledge base article also answers the following questions: +- How can I adjust the height of CollectionView items dynamically? +- How can I remove the default minimum height set for CollectionView items? +- How can I improve performance with fixed item heights in .NET MAUI CollectionView? + +## Solution + +To control the height of the item template in CollectionView for .NET MAUI and remove extra white space, follow one of the solutions below: + + + +### Setting a Fixed Height with `ItemLength` + +Use the `ItemLength` property of the [`CollectionViewLinearLayout`](https://docs.telerik.com/devtools/maui/controls/collectionview/layouts/linear-layout) to explicitly define the height of the items. If the item size is static, this improves the control's virtualization performance. + +```XAML + + + +``` + +### Adjusting `MinimumHeightRequest` for Dynamic Sizing + +To enable dynamic sizing, set the `MinimumHeightRequest` of the `RadCollectionViewItemView` to 0 using the `ItemViewStyle`: + +```XAML + + + +``` + +## See Also + +- [CollectionView Documentation](https://docs.telerik.com/devtools/maui/controls/collectionview/overview) +- [CollectionViewLinearLayout Overview](https://docs.telerik.com/devtools/maui/controls/collectionview/layouts/linear-layout) diff --git a/knowledge-base/datagrid-sorting-grouping-descending-order.md b/knowledge-base/datagrid-sorting-grouping-descending-order.md new file mode 100644 index 000000000..97a921a31 --- /dev/null +++ b/knowledge-base/datagrid-sorting-grouping-descending-order.md @@ -0,0 +1,76 @@ +--- +title: Sorting and Grouping in Descending Order in RadDataGrid +description: Learn how to sort and group items in the RadDataGrid for UI for .NET MAUI in descending order. +type: how-to +page_title: Setting Sort and Group Descriptors to Descending Order in RadDataGrid +meta_title: Setting Sort and Group Descriptors to Descending Order in RadDataGrid +slug: datagrid-sorting-grouping-descending-order +tags: datagrid, ui-for-dotnet-maui, sort-descriptors, group-descriptors, descending-order +res_type: kb +--- + +## Environment + +| Version | Product | Author | +| --- | --- | ---- | +| 11.1.0 | DataGrid for .NET MAUI | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) | + +## Description + +When the user groups the DataGrid through the UI, I need the groups to appear in descending order. Currently, the items are sorted by `FirstContactDate` in descending order, but when grouped, the grouping defaults to ascending order. The goal is to allow users to see the latest entries grouped by `FirstContactDate` in descending order. + +This knowledge base article also answers the following questions: +- How to sort and group items in descending order in DataGrid? +- How to set group descriptors to descending order in Telerik DataGrid for .NET MAUI? +- How to change the group descriptor order dynamically during grouping? + +## Solution + +To achieve sorting and grouping in descending order, follow one of the approaches below. + +### Option 1: Set Sort and Group Descriptors Explicitly + +Define both `SortDescriptors` and `GroupDescriptors` with the desired `SortOrder` in the XAML configuration. + +```xaml + + + + + + + +``` + +### Option 2: Change Group Sort Order at Runtime + +Use the `GroupDescriptors.CollectionChanged` event to dynamically update the `SortOrder` of the group descriptor when a column is grouped. For example: + +```csharp +public partial class MainPage : ContentPage +{ + public MainPage() + { + InitializeComponent(); + BindingContext = new RegistrationViewModel(); + + this.dataGrid.GroupDescriptors.CollectionChanged += GroupDescriptors_CollectionChanged; + } + + private void GroupDescriptors_CollectionChanged(object? sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e) + { + if (e.Action != NotifyCollectionChangedAction.Add) + return; + + var groupDescriptor = e.NewItems[0] as GroupDescriptorBase; + if (groupDescriptor != null) + { + groupDescriptor.SortOrder = SortOrder.Descending; + } + } +} +``` + +## See Also + +- [DataGrid Documentation](https://docs.telerik.com/devtools/maui/controls/datagrid/overview) diff --git a/knowledge-base/disable-mouse-hover-datagrid-dotnet-maui.md b/knowledge-base/disable-mouse-hover-datagrid-dotnet-maui.md new file mode 100644 index 000000000..679320d86 --- /dev/null +++ b/knowledge-base/disable-mouse-hover-datagrid-dotnet-maui.md @@ -0,0 +1,47 @@ +--- +title: Disabling Mouse Hover in Telerik DataGrid for .NET MAUI +description: Learn how to disable mouse hover effects in Telerik DataGrid for .NET MAUI by customizing the MouseHoverStyle property. +type: how-to +page_title: How to Disable Mouse Hover Effects in DataGrid for .NET MAUI +meta_title: Disable Mouse Hover in Telerik DataGrid for .NET MAUI +slug: disable-mouse-hover-datagrid-dotnet-maui +tags: datagrid, telerik, .net maui, mousehoverstyle, styling +res_type: kb +--- + +## Environment + +| Version | Control | Author | +| ------- | ------ | ------ | +| 11.1.0 | DataGrid for .NET MAUI | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) | + +## Description + +I want to fully disable mouse hover effects in Telerik [DataGrid for .NET MAUI](https://docs.telerik.com/devtools/maui/controls/datagrid/overview) on Windows. + +This knowledge base article also answers the following questions: +- How to remove mouse hover effects in Telerik DataGrid for .NET MAUI? +- Can I make the mouse hover appearance transparent in Telerik DataGrid? +- How to customize the hover style in Telerik DataGrid? + +## Solution + +To disable mouse hover effects in Telerik DataGrid for .NET MAUI, customize the `MouseHoverStyle` property by removing the hover appearance. Set the background and border colors to transparent and the border thickness to `0`. Use the following example: + +```xml + + + + + +``` + +## See Also + +- [Mouse Hover Style Documentation](https://docs.telerik.com/devtools/maui/controls/datagrid/cells/mouse-hover-cell) +- [Overview of Telerik DataGrid for .NET MAUI](https://docs.telerik.com/devtools/maui/controls/datagrid/overview) +- [Styling Telerik DataGrid for .NET MAUI](https://docs.telerik.com/devtools/maui/controls/datagrid/theming-and-styles/styling) diff --git a/knowledge-base/display-showmoretemplate-hide-tokentemplate-combobox-net-maui.md b/knowledge-base/display-showmoretemplate-hide-tokentemplate-combobox-net-maui.md index 909a8947f..5ce6fcfc0 100644 --- a/knowledge-base/display-showmoretemplate-hide-tokentemplate-combobox-net-maui.md +++ b/knowledge-base/display-showmoretemplate-hide-tokentemplate-combobox-net-maui.md @@ -10,7 +10,7 @@ res_type: kb | Version | Product | Author | | --- | --- | ---- | -| 6.7.0 | Telerik UI for .NET MAUI ComboBox | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova)| +| 11.1.0 | Telerik UI for .NET MAUI ComboBox | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova)| ## Description @@ -21,53 +21,106 @@ I want to customize the ComboBox control in .NET MAUI to display only the ShowMo To achieve the desired scenario of hiding the tokens and only displaying the ShowMoreTemplate in the ComboBox control, you can follow these steps: -**1.** Create a custom control. +**1.** Create a custom control `MyComboBox` that inherits from the `RadComboBox`. -**2.** Add a label to display the selected items count. +```C# +public class MyComboBox : RadComboBox +{ + +} +``` -**3.** Update the label's text inside the `SelectionChanged` event. +**2.** Add a label to display the selected items count and update the label's text inside the `MyComboBox.SelectionChanged` event. ```C# public class MyComboBox : RadComboBox { private ContentView selectionToken; private RadWrapLayout layout; + private bool isInitialized; + public MyComboBox() { - this.layout = this.Content as RadWrapLayout; - this.SelectionChanged += MyComboBox_SelectionChanged; + this.Loaded += (_, _) => this.Initialize(); + } + + protected override void OnHandlerChanged() + { + base.OnHandlerChanged(); + this.Dispatcher.Dispatch(this.Initialize); } - private void MyComboBox_SelectionChanged(object? sender, ComboBoxSelectionChangedEventArgs e) + private void Initialize() { - if (this.SelectedItems.Count > 0) + if (this.isInitialized) { - if (this.layout.Contains(this.selectionToken)) - { - return; - } + return; + } + this.layout = FindDescendant(this); + if (this.layout == null) + { + return; + } + + this.SelectionChanged += this.MyComboBox_SelectionChanged; + this.isInitialized = true; + } + + private void MyComboBox_SelectionChanged(object sender, ComboBoxSelectionChangedEventArgs e) + { + if (this.layout == null) + { + return; + } + + int count = SelectedItems.Count; + if (count > 0) + { if (this.selectionToken == null) { - this.selectionToken = new ContentView(); - var label = new Label(); //create a new label for every newly added token - label.SetBinding(Label.TextProperty, new Binding() + var label = new Label + { + VerticalOptions = LayoutOptions.Center, + HorizontalOptions = LayoutOptions.Center + }; + label.SetBinding(Label.TextProperty, new Binding("Count") { - Source = this.SelectedItems, - Path = "Count" + Source = SelectedItems, + StringFormat = "{0} selected" }); - this.selectionToken.Content = label; //set label text to selected items' count + + this.selectionToken = new ContentView { Content = label }; } - this.layout.Insert(0, this.selectionToken); + if (!this.layout.Contains(this.selectionToken)) + { + this.layout.Insert(0, this.selectionToken); + } + } + else if (this.layout.Contains(this.selectionToken)) + { + this.layout.Remove(this.selectionToken); } - else + } + + private static T FindDescendant(Element parent) where T : Element + { + if (parent is T match) return match; + + if (parent is IElementController controller) { - if (layout.Contains(this.selectionToken)) + foreach (var child in controller.LogicalChildren) { - layout.Remove(this.selectionToken); + var result = FindDescendant(child); + if (result != null) + { + return result; + } } } + + return null!; } } ``` @@ -75,22 +128,32 @@ public class MyComboBox : RadComboBox **4.** Override the default `TokenTemplate` to hide the tokens. ```xaml - - + + + + + + + + + + ``` diff --git a/knowledge-base/dynamically-update-tabview-headertext-based-on-selection.md b/knowledge-base/dynamically-update-tabview-headertext-based-on-selection.md new file mode 100644 index 000000000..9428d46c4 --- /dev/null +++ b/knowledge-base/dynamically-update-tabview-headertext-based-on-selection.md @@ -0,0 +1,82 @@ +--- +title: Changing HeaderText in TabView When Tab Item Is Selected +description: Learn how to dynamically change the HeaderText of TabView items when a tab is selected in UI for .NET MAUI. +type: how-to +page_title: Dynamically Update TabView HeaderText Based on Selection in UI for .NET MAUI +meta_title: Dynamically Update TabView HeaderText Based on Selection +slug: dynamically-update-tabview-headertext-based-on-selection +tags: tabview,selectionchanged,event,headertext,ui-for-net-maui +res_type: kb +--- + +## Environment + +| Version | Product | Author | +| --- | --- | ---- | +| 11.1.0 | TabView for .NET MAUI | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova)| + +## Description + +I need to change the `HeaderText` of the TabView items when they are selected. For example, when the "Home" tab is selected, its header should change to "Using Home". Similarly, when selecting "Function A", the header should change to "Applying Function A", and so on. + +This knowledge base article also answers the following questions: +- How can I change the header text of TabView dynamically? +- How to update TabView `HeaderText` based on selection in .NET MAUI? +- How to use the `SelectionChanged` event in TabView to modify `HeaderText`? + +## Solution + +Use the [`SelectionChanged`](https://docs.telerik.com/devtools/maui/controls/tabview/selection#events) event of the TabView to dynamically update the header text based on the selected tab item. + +**1.** Subscribe to the `SelectionChanged` event in the TabView. + +```xaml + + + + + + +``` + +**2.** Implement a method to update the `HeaderText` dynamically based on the selected index. Handle the `SelectionChanged` event in the code-behind. + +```csharp +private void TabView_SelectionChanged(object sender, EventArgs e) +{ + var headers = new[] { "Home", "Function A", "Function B", "Function C" }; + for (int i = 0; i < this.tabView.Items.Count; i++) + { + if (this.tabView.Items[i] is TabViewItem item) + { + item.HeaderText = headers[i]; + } + } + + int selectedIndex = this.tabView.SelectedIndex; + if (this.tabView.Items[selectedIndex] is TabViewItem selectedItem) + { + switch (selectedIndex) + { + case 0: + selectedItem.HeaderText = "Using Home"; + break; + case 1: + selectedItem.HeaderText = "Applying Function A"; + break; + case 2: + selectedItem.HeaderText = "Applying Function B"; + break; + case 3: + selectedItem.HeaderText = "Applying Function C"; + break; + } + } +} +``` + +## See Also + +- [TabView Overview](https://docs.telerik.com/devtools/maui/controls/tabview/overview) +- [SelectionChanged Event Documentation](https://docs.telerik.com/devtools/maui/controls/tabview/selection#events) diff --git a/knowledge-base/radtreedatagrid-binding-selecteditems-viewmodel.md b/knowledge-base/radtreedatagrid-binding-selecteditems-viewmodel.md new file mode 100644 index 000000000..3213f7bcc --- /dev/null +++ b/knowledge-base/radtreedatagrid-binding-selecteditems-viewmodel.md @@ -0,0 +1,215 @@ +--- +title: Binding TreeDataGrid SelectedItems Collection to ViewModel +description: Explains why SelectedItems in RadTreeDataGrid cannot be bound directly in XAML and shows how to use it in the ViewModel. +type: how-to +page_title: Using SelectedItems in RadTreeDataGrid with ViewModel Binding +meta_title: Using SelectedItems in RadTreeDataGrid with ViewModel Binding +slug: radtreedatagrid-binding-selecteditems-viewmodel +tags: radtreedatagrid, .net maui, selecteditems, binding, xaml, viewmodel +res_type: kb +--- + +## Environment + +| Version | Product | Author | +| --- | --- | ---- | +| 11.1.0 | Telerik UI for .NET MAUI TreeDataGrid | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) | + +## Description + +I need to bind the `SelectedItems` property of [TreeDataGrid](https://docs.telerik.com/devtools/maui/controls/treedatagrid/overview) to a collection property in my `ViewModel`, but I noticed that it is not available for binding in XAML. However, it seems accessible in the code-behind file. Is there a way to bind this collection to the `ViewModel`? + +This knowledge base article also answers the following questions: + +- Why is `SelectedItems` not available for binding in XAML? +- How can I work with `SelectedItems` in the `ViewModel`? +- How can I use `SelectedItems` with collection updates? + +## Solution + +The `SelectedItems` property of the TreeDataGrid is a read-only collection with a private setter, which means it cannot be directly bound in XAML. IntelliSense does not suggest properties with private setters for XAML binding, and therefore, two-way binding is not supported. + +To use `SelectedItems` in your `ViewModel`, follow these steps: + +**1.** Define the TreeDataGrid control: + +```XAML + + + + + + + + + + +``` + +**2.** Define the `ViewModel` and subscribe to the `CollectionChanged` event of the `SelectedItems` property. This event notifies you when the selection changes. + +```C# +public class MainPageViewModel : NotifyPropertyChangedBase +{ + private ObservableCollection selection; + + public MainPageViewModel() + { + Items = new ObservableCollection(); + Items.Add(new Data("My Projects", 234, "Folder") + { + Children = new ObservableCollection() + { + new Data("Using latest Telerik .NET MAUI controls", 234 ,"Folder") + { + Children = new ObservableCollection() + { + new Data("TreeDataGrid", 6, "File"), + new Data("CollectionView", 6, "File"), + new Data("DataGrid", 54, "File"), + new Data("Scheduler", 12, "File"), + new Data("TreeView", 2, "File"), + new Data("Calendar", 23, "File"), + new Data("RichTextEditor", 0, "File"), + new Data("PdfViewer", 55, "File"), + new Data("ToggleButton", 21, "File"), + new Data("TemplatedButton", 88, "File"), + } + }, + new Data("Blank project", 0, "Folder") + } + }); + Items.Add(new Data("Shared Documents", 643, "Folder") + { + Children = new ObservableCollection() + { + new Data("Reports", 643, "Folder") + { + Children = new ObservableCollection() + { + new Data("October", 234, "File"), + new Data("November", 0, "File"), + new Data("December", 409, "File") + } + } + } + }); + Items.Add(new Data("Pictures", 643, "Folder") + { + Children = new ObservableCollection() + { + new Data("Camera Roll", 231, "Folder") + { + Children = new ObservableCollection() + { + new Data("hello.png", 107, "File"), + new Data("happy_summer.png", 0, "File"), + new Data("avatar.png", 124, "File") + } + }, + new Data("Saved Pictures", 453, "Folder") + { + Children = new ObservableCollection() + { + new Data("vacation.png", 234, "File"), + new Data("november.png", 0, "File"), + new Data("mountains.png", 227, "File") + } + } + } + }); + Items.Add(new Data("Documents", 876, "Folder") + { + Children = new ObservableCollection() + { + new Data("Internal Usage Only", 643, "Folder") + { + Children = new ObservableCollection() + { + new Data("reports.docx", 234, "File"), + new Data("confidential.xlsx", 0, "File"), + new Data("internal_usage.pdf", 409, "File") + } + } + } + }); + } + public ObservableCollection Items { get; set; } + + public ObservableCollection Selection + { + get => this.selection; + set + { + if (this.selection != value) + { + if (this.selection != null) + { + this.selection.CollectionChanged -= SelectedItems_CollectionChanged; + } + + this.selection = value; + Device.StartTimer(TimeSpan.FromMicroseconds(300), () => + { + this.selection.Add(this.Items[0]); + return false; + }); + + this.OnPropertyChanged(); + + if (this.selection != null) + { + this.selection.CollectionChanged += SelectedItems_CollectionChanged; + } + } + } + } + + private void SelectedItems_CollectionChanged(object? sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e) + { + if (e.Action == NotifyCollectionChangedAction.Add) + { + // add your logic here + } + else if (e.Action == NotifyCollectionChangedAction.Remove) + { + // add your logic here + } + } +} +``` + +**3.** Define the data model: + +```C# +public class Data +{ + public Data(string name, int size, string type) + { + this.Name = name; + this.Size = size; + this.Type = type; + this.Children = new ObservableCollection(); + } + + public string Name { get; set; } + public int Size { get; set; } + public string Type { get; set; } + public ObservableCollection Children { get; set; } +} +``` + +**4.** Set the binding context: + +```XAML + + + +``` + +## See Also + +- [TreeDataGrid Overview](https://docs.telerik.com/devtools/maui/controls/treedatagrid/overview) diff --git a/knowledge-base/remembering-restoring-expanded-rows-treedatagrid-dotnet-maui.md b/knowledge-base/remembering-restoring-expanded-rows-treedatagrid-dotnet-maui.md new file mode 100644 index 000000000..1fc85f2c4 --- /dev/null +++ b/knowledge-base/remembering-restoring-expanded-rows-treedatagrid-dotnet-maui.md @@ -0,0 +1,96 @@ +--- +title: Remembering and Restoring Expanded Rows in TreeDataGrid for .NET MAUI +description: Learn how to efficiently remember expanded rows and restore them in TreeDataGrid for .NET MAUI. +type: how-to +page_title: Efficiently Remember and Restore Expanded Rows in TreeDataGrid for .NET MAUI +meta_title: Efficiently Remember and Restore Expanded Rows in TreeDataGrid for .NET MAUI +slug: remembering-restoring-expanded-rows-treedatagrid-dotnet-maui +tags: treedatagrid, .net maui, expand, collapse, isexpanded, isexpandablebinding +res_type: kb +--- + +## Environment + +| Version | Product | Author | +| --- | --- | ---- | +| 11.1.0 | Telerik UI for .NET MAUI TreeDataGrid | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) | + +## Description + +I want to remember the expanded rows in the TreeDataGrid and restore them later. What is the most efficient way to achieve this? + +This knowledge base article also answers the following questions: +- How can I store expanded items in TreeDataGrid for later use? +- How can I restore the expansion state in TreeDataGrid after changes? +- What is the best way to manage expanded rows in TreeDataGrid? + +## Solution + +To achieve the scenario you can use one of the following approaches: +* [Using `Expand` and `Collapse` methods](#using-expand-and-collapse-methods) +* [Using `IsExpandableBinding` property of the `TreeDataGridDescriptor`](#using-isexpandablebinding) + +### Using Expand and Collapse Methods + +To achieve this, follow these steps: + +1. Use `Expand()` and `Collapse()` methods to expand or collapse items. +2. Use the `IsExpanded` method to check whether an item is expanded. +3. Store the expanded items in a collection, such as a `List`. +4. Iterate through the collection to restore the expanded state by calling the `Expand()` method. + +```C# +public partial class MainPage : ContentPage +{ + public MainPage() + { + InitializeComponent(); + this.BindingContext = new ViewModel(); + } + + // Collection for storing expanded items + List expandedItems = new List(); + + private void Button_Clicked(object sender, EventArgs e) + { + var items = (IEnumerable)this.tdg.ItemsSource; + this.expandedItems = new List(); + AddExpandedItems(items, expandedItems); + } + + private void AddExpandedItems(IEnumerable items, List expandedItems) + { + foreach (Data item in items) + { + if (this.tdg.IsExpanded(item)) + { + expandedItems.Add(item); + } + + IEnumerable childrenOfTheItem = item.Children; + AddExpandedItems(childrenOfTheItem, expandedItems); + } + } + + private void Button2_Clicked(object sender, EventArgs e) + { + foreach (Data item in this.expandedItems) + { + this.tdg.Expand(item); + } + } +} +``` + +### Using `IsExpandableBinding` + +As an alternative, use the [`IsExpandableBinding`](https://docs.telerik.com/devtools/maui/controls/treedatagrid/descriptor) property at the descriptor level. This approach provides direct control over the expandability of rows via data binding. + +1. Add a `bool` property in the data model to indicate whether an item is expandable. +2. Bind this property to the `IsExpandableBinding` property of the TreeDataGrid descriptor. +3. Implement the logic in button clicks to get and restore expanded items. + +## See Also + +- [TreeDataGrid Overview](https://docs.telerik.com/devtools/maui/controls/treedatagrid/overview) +- [Expand and Collapse Methods in TreeDataGrid](https://docs.telerik.com/devtools/maui/controls/treedatagrid/methods) diff --git a/knowledge-base/select-first-row-datagrid-mvvm-maui.md b/knowledge-base/select-first-row-datagrid-mvvm-maui.md new file mode 100644 index 000000000..06382db80 --- /dev/null +++ b/knowledge-base/select-first-row-datagrid-mvvm-maui.md @@ -0,0 +1,88 @@ +--- +title: Selecting the First Row in DataGrid by Default Using MVVM in UI for .NET MAUI +description: Learn how to select the first row in a UI for .NET MAUI DataGrid by default using the MVVM approach. +type: how-to +page_title: Automatically Select the First Row in UI for .NET MAUI DataGrid Using MVVM +meta_title: Automatically Select the First Row in UI for .NET MAUI DataGrid Using MVVM +slug: select-first-row-datagrid-mvvm-maui +tags: datagrid, ui-for-net-maui, mvvm, default-selection, selecteditem +res_type: kb +--- + +## Environment + +| Version | Product | Author | +| --- | --- | ---- | +| 11.1.0 | DataGrid for .NET MAUI | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) | + +## Description + +I want to select the first row in the [DataGrid](https://docs.telerik.com/devtools/maui/controls/datagrid/overview) component by default using an MVVM approach. + +This knowledge base article also answers the following questions: +- How to set a default selected row in the UI for .NET MAUI DataGrid? +- How to bind the DataGrid's `SelectedItem` property in MVVM? +- How to programmatically select the first row in a DataGrid? + +## Solution + +To select the first row by default, bind the `SelectedItem` property of the DataGrid to a property in the `ViewModel` and set its value to the first item in the collection. + +1. Define the `ViewModel`: Create a `SelectedItem` property in the `ViewModel` to hold the selected row. + +```csharp +private MyItem selectedItem; + +public ObservableCollection Items { get; set; } + +public MyItem SelectedItem +{ + get => this.selectedItem; + set + { + if (this.selectedItem != value) + { + this.selectedItem = value; + OnPropertyChanged(nameof(this.SelectedItem)); + } + } +} + +public event PropertyChangedEventHandler PropertyChanged; +protected virtual void OnPropertyChanged(string propertyName) => + this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); +``` + +This setup ensures that changes to the `SelectedItem` property automatically notify the UI to refresh. + +2. Set the Default Selection: Assign the first item in the collection to the `SelectedItem` property. + +```csharp +public MainViewModel() +{ + this.Items = new ObservableCollection + { + new MyItem { Name = "Item 1", Description = "First item description" }, + new MyItem { Name = "Item 2", Description = "Second item description" }, + new MyItem { Name = "Item 3", Description = "Third item description" } + }; + + this.SelectedItem = this.Items[0]; // Select the first item. +} +``` + +3. Bind the ViewModel to the DataGrid: In XAML, bind the `SelectedItem` property of the DataGrid to the `ViewModel` and set the binding mode to `TwoWay`. + +```xml + +``` + +This approach ensures that the first row in the DataGrid is selected by default. + +## See Also + +- [DataGrid Overview](https://docs.telerik.com/devtools/maui/controls/datagrid/overview) +- [MVVM Pattern in .NET MAUI](https://learn.microsoft.com/en-us/dotnet/maui/xaml/fundamentals/mvvm) +- [ObservableCollection Class](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1) diff --git a/knowledge-base/speechtotextbutton-language-support.md b/knowledge-base/speechtotextbutton-language-support.md index a04229166..8b32ea76c 100644 --- a/knowledge-base/speechtotextbutton-language-support.md +++ b/knowledge-base/speechtotextbutton-language-support.md @@ -10,9 +10,9 @@ res_type: kb ## Environment -| Version | Control | Author | -| ------- | ------- | ------ | -| SpeechToTextButton for .NET MAUI | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) | +| Control | Author | +| ------- | ------ | +| SpeechToTextButton for .NET MAUI | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) | ## Description @@ -20,12 +20,12 @@ This article explains how to check the supported languages for the SpeechToTextB ## Solution -Here is an example of how to check the supported languages for the SpeechToTextButton in .NET MAUI. For the demo we will use +Here is an example of how to check the supported languages for the SpeechToTextButton in .NET MAUI. For the demo, use: * An Editor for displaying the recognized text. -* Entry for setting the language. -* Label for displaying whether the language is supported or not. +* An Entry for setting the language. +* A Label for displaying whether the language is supported or not. -**1.** Define the `RadSpeechToTextButton` control in XAML. +**1.** Define the `RadSpeechToTextButton` control in XAML: ```XAML @@ -43,7 +43,7 @@ Here is an example of how to check the supported languages for the SpeechToTextB ``` -**2.** In the code-behind, handle the `TextChanged` event of the Entry to check if the entered language is supported. +**2.** In the code-behind, handle the `TextChanged` event of the Entry to check if the entered language is supported: ```C# private void EntryLanguage_TextChanged(object sender, Microsoft.Maui.Controls.TextChangedEventArgs e) @@ -67,10 +67,11 @@ private static bool IsLanguageSupported(string languageTag) try { #if ANDROID - //// There is no programmatic way to check if a language is supported on Android but most languages are. - //// https://cloud.google.com/speech-to-text/docs/speech-to-text-supported-languages + // There is no programmatic way to check if a language is supported on Android, but most languages are. + // For a complete list, see: https://cloud.google.com/speech-to-text/docs/speech-to-text-supported-languages + return true; #elif IOS - var locale = Foundation.NSLocale.FromLocaleIdentifier(languageTag); + var locale = Foundation.NSLocale.FromLocaleIdentifier(languageTag); var localSpeechRecognizer = new Speech.SFSpeechRecognizer(locale); localSpeechRecognizer.Dispose(); #elif WINDOWS @@ -87,7 +88,7 @@ private static bool IsLanguageSupported(string languageTag) } ``` -**3.** Handle the SpeechToTextButton's `SpeechRecognized` event to display the recognized text in the Editor. +**3.** Handle the SpeechToTextButton's `SpeechRecognized` event to display the recognized text in the Editor: ```C# private void SpeechToTextButton_SpeechRecognized(object sender, SpeechRecognizerSpeechRecognizedEventArgs args) diff --git a/styling-and-themes/overview.md b/styling-and-themes/overview.md index c86f68ee2..78a15c50b 100644 --- a/styling-and-themes/overview.md +++ b/styling-and-themes/overview.md @@ -124,7 +124,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 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. +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. 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: