diff --git a/ai/copilot-extension.md b/ai/copilot-extension.md index 93620f4b3..3d2bf5e43 100644 --- a/ai/copilot-extension.md +++ b/ai/copilot-extension.md @@ -11,6 +11,11 @@ position: 3 The Telerik MAUI [GitHub Copilot](https://github.com/features/copilot) extension is an AI-powered coding assistant that provides specialized knowledge about [Telerik UI for .NET MAUI components](https://www.telerik.com/maui-ui). +>caution [Microsoft is sunsetting GitHub Copilot extensions](https://github.blog/changelog/2025-09-24-deprecate-github-copilot-extensions-github-apps/) on November 10th, 2025, in favor of the Model Context Protocol (MCP) standard. +> +> From that date, the Telerik and Kendo UI AI Coding Assistants will be available exclusively through our [MCP server]({%slug ai-mcp-server%}), ensuring you continue to enjoy the same powerful capabilities that are delivered by a modern, open, and officially recommended standard. + + This extension enhances GitHub Copilot with proprietary context about Telerik MAUI controls, helping you: * Generate code snippets using Telerik MAUI components. diff --git a/ai/mcp-server.md b/ai/mcp-server.md index 1624aa6c3..978bf7450 100644 --- a/ai/mcp-server.md +++ b/ai/mcp-server.md @@ -13,6 +13,9 @@ The Telerik MAUI [MCP (Model Context Protocol) Server](https://modelcontextproto This MCP server enables AI-powered IDEs and tools to generate more accurate, tailored code that leverages [Telerik UI for .NET MAUI components](https://www.telerik.com/maui-ui) and APIs. You can ask complex questions about Telerik components, request specific implementations, and generate comprehensive code solutions. +>tip The Telerik .NET MAUI MCP Server works in **Chat**(**Ask**) and **Agent** modes. + + ## Prerequisites To use the Telerik MAUI MCP server, you need: @@ -176,6 +179,7 @@ To use the Telerik MCP Server: 3. Grant permissions when prompted (per session, workspace, or always). 4. Start fresh sessions for unrelated prompts to avoid context pollution. +5. Use in **Chat**(**Ask**) and **Agent** modes. ### Improving Server Usage diff --git a/ai/overview.md b/ai/overview.md index b3751d7d6..cbb3492fa 100644 --- a/ai/overview.md +++ b/ai/overview.md @@ -20,6 +20,11 @@ The Telerik AI Coding Assistant is available through: * [Telerik MAUI GitHub Copilot Extension]({%slug ai-copilot-extension%}) * [Telerik MAUI MCP Server]({%slug ai-mcp-server%}) +>caution [Microsoft is sunsetting GitHub Copilot extensions](https://github.blog/changelog/2025-09-24-deprecate-github-copilot-extensions-github-apps/) on November 10th, 2025, in favor of the Model Context Protocol (MCP) standard. +> +> From that date, the Telerik and Kendo UI AI Coding Assistants will be available exclusively through our [MCP server]({%slug ai-mcp-server%}), ensuring you continue to enjoy the same powerful capabilities that are delivered by a modern, open, and officially recommended standard. + + ### Key Differences | Feature | MCP Server | GitHub Copilot Extension | diff --git a/ai/prompt-library.md b/ai/prompt-library.md index cb7d79382..1a5354f9d 100644 --- a/ai/prompt-library.md +++ b/ai/prompt-library.md @@ -35,37 +35,28 @@ To run the provided prompts in the [Telerik UI for MAUI GitHub Copilot Extension This section provides examples of general questions related to Telerik UI for MAUI. - - - - - - - - - -
Set Up New Project and Add DataGrid controlComponent Overview
-

+
+

+
+```prompt Set Up New Project and Add DataGrid control
 #telerik-maui-assistant Create new maui project with Telerik. Add sample usage of the DataGrid component.
-
-		 -

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

+```
+```ts
+```
+
+```prompt Create Project with Telerik Dark Theme
 #telerik-maui-assistant Add Theming to my project and set the theme to PlatformDark.
-
-
+``` +```ts +``` + + ## Component-Specific Prompts @@ -75,229 +66,169 @@ This section provides examples of prompts targeting specific Telerik UI for MAUI 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
-

+

+
+```prompt DataGrid with Sample Data
 #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.
-
-		 -

+```
+```ts
+```
+
+```prompt DataGrid with Sorting, Grouping and Aggregates
 #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
-

+```
+```ts
+```
+
+```prompt DataGrid with ComboBox Column
 #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.
-
-		 -

+```
+```ts
+```
+
+```prompt DataGrid with Paging
 #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
-

+```
+```ts
+```
+
+```prompt DataGrid with Frozen Column, Filtering and Disabled Sorting and Editing
 #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.
-
-		 -

+```
+```ts
+```
+
+```prompt DataGrid with Load on Demand and Multiple Selection
 #telerik-maui-assistant Add DataGrid with initially 5 items. New 10 items should be loaded on demand. Enable multiple selection of cells.
-
-
+``` +```ts +``` + + ### 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
-

+

+
+```prompt CollectionView with Drag and Drop
 #telerik-maui-assistant Add CollectionView. Enable drag and drop operation in the control.
-
-		 -

+```
+```ts
+```
+
+```prompt CollectionView with Grouping and Sorting
 #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. 
-
-		 -

+```
+```ts
+```
+
+```prompt CollectionView with Custom DataTemplate and Preselected Item
+#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.
+```
+```ts
+```
+
+```prompt CollectionView with Grouping, Sticky Headers, Filtering and Footer
 #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.
-
-
+``` +```ts +``` + + ### ComboBox -The [Telerik UI for .NET MAUI ComboBox]({%slug combobox-overview%}) enables users to select one or more items from a dropdown list. +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
-

+

+
+```prompt ComboBox with Sample Data
 #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.
-
-		 -

+```
+```ts
+```
+
+```prompt ComboBox 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. Show all of the properties in the drop down and allow multiple selection.
-
-
- - - - - - - - -
ComboBox with Multiple Selection and Open Dropdown on Selection
-

+```
+```ts
+```
+
+```prompt 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".
-
-
+``` +```ts +``` + + ### 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
-

+

+
+```prompt Line Chart with Sample Data
 #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.
-
-		 -

+```
+```ts
+```
+
+```prompt Chart with Bar and Line Series
 #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
-

+```
+```ts
+```
+
+```prompt Chart with Pan, Zoom and Tooltips features
 #telerik-maui-assistant Add Bar Chart with sample data. Apply horizontal zooming, enable panning and show tooltips.
-
-
+``` +```ts +``` + + ### TabView -The [Telerik TabView for .NET MAUI]({%slug tabview-overview%}) is a flexible navigation control that allows you to build tabbed interfaces. +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
-

+

+
+```prompt TabView with 3 Tabs and Preselected Second Tab
 #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.
-
-		 -

+```
+```ts
+```
+
+```prompt TabView with Custom Header Item Template
 #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
-

+```
+```ts
+```
+
+```prompt 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.
-
-
+``` +```ts +``` + + ### 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
-

+

+
+```prompt 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.
-
-
+``` +```ts +``` + + ## See Also @@ -305,3 +236,10 @@ The [Telerik UI for .NET MAUI Scheduler]({%slug scheduler-overview%}) allows you * [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/) + + + \ No newline at end of file diff --git a/controls/badgeview/images/badge-badgeview.png b/controls/badgeview/images/badge-badgeview.png index dc3f7e775..9d4b97023 100644 Binary files a/controls/badgeview/images/badge-badgeview.png and b/controls/badgeview/images/badge-badgeview.png differ diff --git a/controls/badgeview/images/badgeview-badge-visibility.png b/controls/badgeview/images/badgeview-badge-visibility.png index 43e19a916..d2d9763e2 100644 Binary files a/controls/badgeview/images/badgeview-badge-visibility.png and b/controls/badgeview/images/badgeview-badge-visibility.png differ diff --git a/controls/badgeview/images/badgeview-content-text.gif b/controls/badgeview/images/badgeview-content-text.gif index 37fb3a397..2aff2089f 100644 Binary files a/controls/badgeview/images/badgeview-content-text.gif and b/controls/badgeview/images/badgeview-content-text.gif differ diff --git a/controls/badgeview/images/badgeview-padding.png b/controls/badgeview/images/badgeview-padding.png index 385c86574..678d41fd3 100644 Binary files a/controls/badgeview/images/badgeview-padding.png and b/controls/badgeview/images/badgeview-padding.png differ diff --git a/controls/chart/axes/images/axes-categorical-axis-example.png b/controls/chart/axes/images/axes-categorical-axis-example.png index 90efc05ff..58a6ea548 100644 Binary files a/controls/chart/axes/images/axes-categorical-axis-example.png and b/controls/chart/axes/images/axes-categorical-axis-example.png differ diff --git a/controls/chart/axes/images/chart-date-time-continuous-axis-example.png b/controls/chart/axes/images/chart-date-time-continuous-axis-example.png index 0ba67f549..7a0629c0d 100644 Binary files a/controls/chart/axes/images/chart-date-time-continuous-axis-example.png and b/controls/chart/axes/images/chart-date-time-continuous-axis-example.png differ diff --git a/controls/chart/behaviors/images/chart-behaviors-panandzoom.png b/controls/chart/behaviors/images/chart-behaviors-panandzoom.png index 2b668f246..02a2197da 100644 Binary files a/controls/chart/behaviors/images/chart-behaviors-panandzoom.png and b/controls/chart/behaviors/images/chart-behaviors-panandzoom.png differ diff --git a/controls/chart/behaviors/images/chart-behaviors-tooltip.png b/controls/chart/behaviors/images/chart-behaviors-tooltip.png index aea9c9c4e..e9a50ca05 100644 Binary files a/controls/chart/behaviors/images/chart-behaviors-tooltip.png and b/controls/chart/behaviors/images/chart-behaviors-tooltip.png differ diff --git a/controls/chart/behaviors/images/chart-behaviors-trackball.png b/controls/chart/behaviors/images/chart-behaviors-trackball.png index dcfb6bd74..4fcbb2cf7 100644 Binary files a/controls/chart/behaviors/images/chart-behaviors-trackball.png and b/controls/chart/behaviors/images/chart-behaviors-trackball.png differ diff --git a/controls/chart/images/cartesianchart-legend.png b/controls/chart/images/cartesianchart-legend.png index 65f42bc84..9f027fa12 100644 Binary files a/controls/chart/images/cartesianchart-legend.png and b/controls/chart/images/cartesianchart-legend.png differ diff --git a/controls/chart/images/chart-annotations-grid-line-examples.png b/controls/chart/images/chart-annotations-grid-line-examples.png index 21adfe217..0c136e10e 100644 Binary files a/controls/chart/images/chart-annotations-grid-line-examples.png and b/controls/chart/images/chart-annotations-grid-line-examples.png differ diff --git a/controls/chart/images/chart-annotations-plot-band-example.png b/controls/chart/images/chart-annotations-plot-band-example.png index d54ca660f..42822988b 100644 Binary files a/controls/chart/images/chart-annotations-plot-band-example.png and b/controls/chart/images/chart-annotations-plot-band-example.png differ diff --git a/controls/chart/images/chart-getting-started-references.png b/controls/chart/images/chart-getting-started-references.png deleted file mode 100644 index 1a85c951a..000000000 Binary files a/controls/chart/images/chart-getting-started-references.png and /dev/null differ diff --git a/controls/chart/images/chart-gettingstarted.png b/controls/chart/images/chart-gettingstarted.png index e1e80e052..fdce26dcd 100644 Binary files a/controls/chart/images/chart-gettingstarted.png and b/controls/chart/images/chart-gettingstarted.png differ diff --git a/controls/chart/images/chart-grid-example.png b/controls/chart/images/chart-grid-example.png index a31f72f49..c815705d7 100644 Binary files a/controls/chart/images/chart-grid-example.png and b/controls/chart/images/chart-grid-example.png differ diff --git a/controls/chart/images/chart-nullvalues.png b/controls/chart/images/chart-nullvalues.png index 4b4f86e65..ffa598aa5 100644 Binary files a/controls/chart/images/chart-nullvalues.png and b/controls/chart/images/chart-nullvalues.png differ diff --git a/controls/chart/images/piechart-legend.png b/controls/chart/images/piechart-legend.png index 10b16d0cf..154e736db 100644 Binary files a/controls/chart/images/piechart-legend.png and b/controls/chart/images/piechart-legend.png differ diff --git a/controls/chart/series/cartesian/images/cartesian-area-series-basic-example.png b/controls/chart/series/cartesian/images/cartesian-area-series-basic-example.png index 0987452a5..76af57915 100644 Binary files a/controls/chart/series/cartesian/images/cartesian-area-series-basic-example.png and b/controls/chart/series/cartesian/images/cartesian-area-series-basic-example.png differ diff --git a/controls/chart/series/cartesian/images/cartesian-bar-series-basic-example.png b/controls/chart/series/cartesian/images/cartesian-bar-series-basic-example.png index 82bad3e8f..6b61fc02d 100644 Binary files a/controls/chart/series/cartesian/images/cartesian-bar-series-basic-example.png and b/controls/chart/series/cartesian/images/cartesian-bar-series-basic-example.png differ diff --git a/controls/chart/series/cartesian/images/cartesian-line-series-basic-example.png b/controls/chart/series/cartesian/images/cartesian-line-series-basic-example.png index d698741f9..7e8057fc2 100644 Binary files a/controls/chart/series/cartesian/images/cartesian-line-series-basic-example.png and b/controls/chart/series/cartesian/images/cartesian-line-series-basic-example.png differ diff --git a/controls/chart/series/cartesian/images/cartesian-scatter-area-series-basic-example.png b/controls/chart/series/cartesian/images/cartesian-scatter-area-series-basic-example.png index b630d5c71..e68cac053 100644 Binary files a/controls/chart/series/cartesian/images/cartesian-scatter-area-series-basic-example.png and b/controls/chart/series/cartesian/images/cartesian-scatter-area-series-basic-example.png differ diff --git a/controls/chart/series/cartesian/images/cartesian-scatter-line-series-basic-example.png b/controls/chart/series/cartesian/images/cartesian-scatter-line-series-basic-example.png index 3aa450498..681a42836 100644 Binary files a/controls/chart/series/cartesian/images/cartesian-scatter-line-series-basic-example.png and b/controls/chart/series/cartesian/images/cartesian-scatter-line-series-basic-example.png differ diff --git a/controls/chart/series/cartesian/images/cartesian-scatter-point-series-basic-example.png b/controls/chart/series/cartesian/images/cartesian-scatter-point-series-basic-example.png index 742bbba38..92df89965 100644 Binary files a/controls/chart/series/cartesian/images/cartesian-scatter-point-series-basic-example.png and b/controls/chart/series/cartesian/images/cartesian-scatter-point-series-basic-example.png differ diff --git a/controls/chart/series/cartesian/images/cartesian-scatter-spline-area-series-basic-example.png b/controls/chart/series/cartesian/images/cartesian-scatter-spline-area-series-basic-example.png index a53f33d12..c7f352eec 100644 Binary files a/controls/chart/series/cartesian/images/cartesian-scatter-spline-area-series-basic-example.png and b/controls/chart/series/cartesian/images/cartesian-scatter-spline-area-series-basic-example.png differ diff --git a/controls/chart/series/cartesian/images/cartesian-scatter-spline-series-basic-example.png b/controls/chart/series/cartesian/images/cartesian-scatter-spline-series-basic-example.png index 521abe9b6..d7e0f00b1 100644 Binary files a/controls/chart/series/cartesian/images/cartesian-scatter-spline-series-basic-example.png and b/controls/chart/series/cartesian/images/cartesian-scatter-spline-series-basic-example.png differ diff --git a/controls/chart/series/cartesian/images/cartesian-spline-area-series-basic-example.png b/controls/chart/series/cartesian/images/cartesian-spline-area-series-basic-example.png index 87242820c..2c3c3f40f 100644 Binary files a/controls/chart/series/cartesian/images/cartesian-spline-area-series-basic-example.png and b/controls/chart/series/cartesian/images/cartesian-spline-area-series-basic-example.png differ diff --git a/controls/chart/series/cartesian/images/cartesian-spline-series-basic-example.png b/controls/chart/series/cartesian/images/cartesian-spline-series-basic-example.png index b366698b1..0861fa13d 100644 Binary files a/controls/chart/series/cartesian/images/cartesian-spline-series-basic-example.png and b/controls/chart/series/cartesian/images/cartesian-spline-series-basic-example.png differ diff --git a/controls/chart/series/cartesian/images/chart-scatter-line-series-customizatrion.png b/controls/chart/series/cartesian/images/chart-scatter-line-series-customizatrion.png index b3c0dec4a..fc43289ce 100644 Binary files a/controls/chart/series/cartesian/images/chart-scatter-line-series-customizatrion.png and b/controls/chart/series/cartesian/images/chart-scatter-line-series-customizatrion.png differ diff --git a/controls/chart/series/cartesian/images/chart-series-features-palette-mode-datapoint.png b/controls/chart/series/cartesian/images/chart-series-features-palette-mode-datapoint.png index 84f7f521f..5188f9461 100644 Binary files a/controls/chart/series/cartesian/images/chart-series-features-palette-mode-datapoint.png and b/controls/chart/series/cartesian/images/chart-series-features-palette-mode-datapoint.png differ diff --git a/controls/chart/series/cartesian/images/chart-series-features-palette-mode-series.png b/controls/chart/series/cartesian/images/chart-series-features-palette-mode-series.png index 3abbaae11..189f848f6 100644 Binary files a/controls/chart/series/cartesian/images/chart-series-features-palette-mode-series.png and b/controls/chart/series/cartesian/images/chart-series-features-palette-mode-series.png differ diff --git a/controls/chart/series/financial/images/candlestick_series.png b/controls/chart/series/financial/images/candlestick_series.png index b42db331a..de1fb7447 100644 Binary files a/controls/chart/series/financial/images/candlestick_series.png and b/controls/chart/series/financial/images/candlestick_series.png differ diff --git a/controls/chart/series/financial/images/indicators_series.png b/controls/chart/series/financial/images/indicators_series.png index 45adefc81..5fa503cf2 100644 Binary files a/controls/chart/series/financial/images/indicators_series.png and b/controls/chart/series/financial/images/indicators_series.png differ diff --git a/controls/chart/series/financial/images/ohlc_series.png b/controls/chart/series/financial/images/ohlc_series.png index 797197e82..24d64830d 100644 Binary files a/controls/chart/series/financial/images/ohlc_series.png and b/controls/chart/series/financial/images/ohlc_series.png differ diff --git a/controls/chart/series/images/chart-series-labels.png b/controls/chart/series/images/chart-series-labels.png index 87bfa331f..bbbf0a378 100644 Binary files a/controls/chart/series/images/chart-series-labels.png and b/controls/chart/series/images/chart-series-labels.png differ diff --git a/controls/chart/series/pie/images/donut-series-basic-example.png b/controls/chart/series/pie/images/donut-series-basic-example.png index 43cb3caa2..66d27d43a 100644 Binary files a/controls/chart/series/pie/images/donut-series-basic-example.png and b/controls/chart/series/pie/images/donut-series-basic-example.png differ diff --git a/controls/chart/series/pie/images/pie-series-basic-example.png b/controls/chart/series/pie/images/pie-series-basic-example.png index fb97d857a..a3218372a 100644 Binary files a/controls/chart/series/pie/images/pie-series-basic-example.png and b/controls/chart/series/pie/images/pie-series-basic-example.png differ diff --git a/controls/chart/types/images/cartesian-bar-series-basic-example.png b/controls/chart/types/images/cartesian-bar-series-basic-example.png index d6e4dd7b8..bfdaebb26 100644 Binary files a/controls/chart/types/images/cartesian-bar-series-basic-example.png and b/controls/chart/types/images/cartesian-bar-series-basic-example.png differ diff --git a/controls/chart/types/images/pie-chart-example.png b/controls/chart/types/images/pie-chart-example.png index 0472f6199..3fe1ae9ac 100644 Binary files a/controls/chart/types/images/pie-chart-example.png and b/controls/chart/types/images/pie-chart-example.png differ diff --git a/controls/datagrid/columns/column-types/images/booleancolumn-overview.png b/controls/datagrid/columns/column-types/images/booleancolumn-overview.png index 8ed2d38ce..dd23ce4d2 100644 Binary files a/controls/datagrid/columns/column-types/images/booleancolumn-overview.png and b/controls/datagrid/columns/column-types/images/booleancolumn-overview.png differ diff --git a/controls/datagrid/columns/column-types/images/datecolumn-overview.png b/controls/datagrid/columns/column-types/images/datecolumn-overview.png index 938a4b114..5a42d11e2 100644 Binary files a/controls/datagrid/columns/column-types/images/datecolumn-overview.png and b/controls/datagrid/columns/column-types/images/datecolumn-overview.png differ diff --git a/controls/datagrid/columns/column-types/images/numericalcolumn-overview.png b/controls/datagrid/columns/column-types/images/numericalcolumn-overview.png index 20dbd31b5..4591465de 100644 Binary files a/controls/datagrid/columns/column-types/images/numericalcolumn-overview.png and b/controls/datagrid/columns/column-types/images/numericalcolumn-overview.png differ diff --git a/controls/datagrid/columns/column-types/images/pickercolumn-overview.png b/controls/datagrid/columns/column-types/images/pickercolumn-overview.png index ff112e984..6471634e3 100644 Binary files a/controls/datagrid/columns/column-types/images/pickercolumn-overview.png and b/controls/datagrid/columns/column-types/images/pickercolumn-overview.png differ diff --git a/controls/datagrid/columns/column-types/images/templatecolumn-overview.png b/controls/datagrid/columns/column-types/images/templatecolumn-overview.png index 34c30aca8..46ec82c18 100644 Binary files a/controls/datagrid/columns/column-types/images/templatecolumn-overview.png and b/controls/datagrid/columns/column-types/images/templatecolumn-overview.png differ diff --git a/controls/datagrid/columns/column-types/images/textcolumn-overview.png b/controls/datagrid/columns/column-types/images/textcolumn-overview.png index 37ced33df..f29b1ac73 100644 Binary files a/controls/datagrid/columns/column-types/images/textcolumn-overview.png and b/controls/datagrid/columns/column-types/images/textcolumn-overview.png differ diff --git a/controls/datagrid/columns/column-types/images/timecolumn-overview.png b/controls/datagrid/columns/column-types/images/timecolumn-overview.png index a9a020223..15d7092e8 100644 Binary files a/controls/datagrid/columns/column-types/images/timecolumn-overview.png and b/controls/datagrid/columns/column-types/images/timecolumn-overview.png differ diff --git a/controls/entry/images/entry_overview.png b/controls/entry/images/entry_overview.png index 6b95b4485..e971288b0 100644 Binary files a/controls/entry/images/entry_overview.png and b/controls/entry/images/entry_overview.png differ diff --git a/docs-builder.yml b/docs-builder.yml index de282beac..bd8af89f8 100644 --- a/docs-builder.yml +++ b/docs-builder.yml @@ -102,6 +102,8 @@ meta: controls/slideview/styling: title: Styling position: 15 + controls/speechtotextbutton: + title: "SpeechToTextButton" controls/slideview: title: SlideView controls/slider/styling: @@ -377,6 +379,8 @@ meta: title: Button controls/busyindicator: title: BusyIndicator + controls/bottomsheet: + title: "BottomSheet" controls/border: title: Border controls/barcode/2d-barcodes: @@ -512,3 +516,235 @@ redirects: - from: ^/controls/ziplibrary/overview$ to: https://docs.telerik.com/devtools/document-processing/libraries/radziplibrary/overview type: Permanent + +- from: https://docs.telerik.com/devtools/maui/accordion + to: https://www.telerik.com/maui-ui/documentation/controls/accordion/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/aiprompt + to: https://www.telerik.com/maui-ui/documentation/controls/aiprompt/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/autocomplete + to: https://www.telerik.com/maui-ui/documentation/controls/autocomplete/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/badgeview + to: https://www.telerik.com/maui-ui/documentation/controls/badgeview/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/barcode + to: https://www.telerik.com/maui-ui/documentation/controls/barcode/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/border + to: https://www.telerik.com/maui-ui/documentation/controls/border/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/bottomsheet + to: https://www.telerik.com/maui-ui/documentation/controls/bottomsheet/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/busyindicator + to: https://www.telerik.com/maui-ui/documentation/controls/busyindicator/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/button + to: https://www.telerik.com/maui-ui/documentation/controls/button/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/calendar + to: https://www.telerik.com/maui-ui/documentation/controls/calendar/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/chart + to: https://www.telerik.com/maui-ui/documentation/controls/chart/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/chat + to: https://www.telerik.com/maui-ui/documentation/controls/chat/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/checkbox + to: https://www.telerik.com/maui-ui/documentation/controls/checkbox/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/collectionview + to: https://www.telerik.com/maui-ui/documentation/controls/collectionview/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/combobox + to: https://www.telerik.com/maui-ui/documentation/controls/combobox/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/dataform + to: https://www.telerik.com/maui-ui/documentation/controls/dataform/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/datagrid + to: https://www.telerik.com/maui-ui/documentation/controls/datagrid/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/datapager + to: https://www.telerik.com/maui-ui/documentation/controls/datapager/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/datepicker + to: https://www.telerik.com/maui-ui/documentation/controls/datepicker/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/datetimepicker + to: https://www.telerik.com/maui-ui/documentation/controls/datetimepicker/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/docklayout + to: https://www.telerik.com/maui-ui/documentation/controls/docklayout/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/entry + to: https://www.telerik.com/maui-ui/documentation/controls/entry/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/expander + to: https://www.telerik.com/maui-ui/documentation/controls/expander/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/gauge + to: https://www.telerik.com/maui-ui/documentation/controls/gauge/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/gridsplitter + to: https://www.telerik.com/maui-ui/documentation/controls/gridsplitter/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/imageeditor + to: https://www.telerik.com/maui-ui/documentation/controls/imageeditor/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/itemscontrol + to: https://www.telerik.com/maui-ui/documentation/controls/itemscontrol/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/listpicker + to: https://www.telerik.com/maui-ui/documentation/controls/listpicker/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/listview + to: https://www.telerik.com/maui-ui/documentation/controls/listview/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/map + to: https://www.telerik.com/maui-ui/documentation/controls/map/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/maskedentry + to: https://www.telerik.com/maui-ui/documentation/controls/maskedentry/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/navigationview + to: https://www.telerik.com/maui-ui/documentation/controls/navigationview/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/numericinput + to: https://www.telerik.com/maui-ui/documentation/controls/numericinput/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/path + to: https://www.telerik.com/maui-ui/documentation/controls/path/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/pdfviewer + to: https://www.telerik.com/maui-ui/documentation/controls/pdfviewer/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/popup + to: https://www.telerik.com/maui-ui/documentation/controls/popup/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/progressbar + to: https://www.telerik.com/maui-ui/documentation/controls/progressbar/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/rangeslider + to: https://www.telerik.com/maui-ui/documentation/controls/rangeslider/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/rating + to: https://www.telerik.com/maui-ui/documentation/controls/rating/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/richtexteditor + to: https://www.telerik.com/maui-ui/documentation/controls/richtexteditor/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/scheduler + to: https://www.telerik.com/maui-ui/documentation/controls/scheduler/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/segmentedcontrol + to: https://www.telerik.com/maui-ui/documentation/controls/segmentedcontrol/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/sidedrawer + to: https://www.telerik.com/maui-ui/documentation/controls/sidedrawer/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/signaturepad + to: https://www.telerik.com/maui-ui/documentation/controls/signaturepad/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/slider + to: https://www.telerik.com/maui-ui/documentation/controls/slider/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/slideview + to: https://www.telerik.com/maui-ui/documentation/controls/slideview/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/speechtotextbutton + to: https://www.telerik.com/maui-ui/documentation/controls/speechtotextbutton/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/tabview + to: https://www.telerik.com/maui-ui/documentation/controls/tabview/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/templatedbutton + to: https://www.telerik.com/maui-ui/documentation/controls/templatedbutton/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/templatedpicker + to: https://www.telerik.com/maui-ui/documentation/controls/templatedpicker/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/timepicker + to: https://www.telerik.com/maui-ui/documentation/controls/timepicker/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/timespanpicker + to: https://www.telerik.com/maui-ui/documentation/controls/timespanpicker/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/togglebutton + to: https://www.telerik.com/maui-ui/documentation/controls/togglebutton/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/toolbar + to: https://www.telerik.com/maui-ui/documentation/controls/toolbar/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/treedatagrid + to: https://www.telerik.com/maui-ui/documentation/controls/treedatagrid/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/treeview + to: https://www.telerik.com/maui-ui/documentation/controls/treeview/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/wraplayout + to: https://www.telerik.com/maui-ui/documentation/controls/wraplayout/overview + type: Permanent + +- from: https://docs.telerik.com/devtools/maui/controls/navigationview + to: https://www.telerik.com/maui-ui/documentation/controls/navigationview/overview + type: Permanent diff --git a/knowledge-base/adjusting-treeview-row-height-expand-button-margin.md b/knowledge-base/adjusting-treeview-row-height-expand-button-margin.md new file mode 100644 index 000000000..5bec4b228 --- /dev/null +++ b/knowledge-base/adjusting-treeview-row-height-expand-button-margin.md @@ -0,0 +1,97 @@ +--- +title: Adjusting TreeView Row Height and Expand Button Margin +description: Learn how to set the row height and adjust the margin of the expand button in the TreeView for UI for .NET MAUI. +type: how-to +page_title: Setting Row Height and Customizing Expand Button Margin in TreeView +meta_title: Setting Row Height and Customizing Expand Button Margin in TreeView +slug: adjusting-treeview-row-height-expand-button-margin +tags: treeview, .net maui, row height, expand button, styling +res_type: kb +--- + +## Environment + +| Version | Product | Author | +| --- | --- | ---- | +| 11.1.0 | Telerik UI for .NET MAUI TreeView | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) | + +## Description + +I want to limit the row height in the [TreeView](https://www.telerik.com/maui-ui/documentation/controls/treeview/overview) and adjust the margin of the expand button. + +This knowledge base article also answers the following questions: +- How to set a definitive row height in TreeView? +- How to customize the margin of the expand button in TreeView? +- How to apply styles to TreeView items and buttons? + +## Solution + +To set a definitive height for rows and adjust the margin of the expand button in TreeView, apply custom styles using `ItemStyle`. Follow these steps: + +1. Define a style for the TreeView item button (`TreeViewItemButton_Style`) to customize properties such as margin, padding, height, and width. + +```xaml + +``` + +2. Create a style for the expand button (`TreeViewItemExpandButton_Style`) based on the button style. Customize the appearance of the expand button. + +```xaml + +``` + +3. Define a style for the TreeView item view (`TreeViewStyle`) to set row height and apply the custom expand button style. + +```xaml + +``` + +4. Apply the styles to the RadTreeView definition. + +```xaml + + + + + + +``` + +## See Also + +- [TreeView Overview](https://www.telerik.com/maui-ui/documentation/controls/treeview/overview) +- [TreeView Styling Documentation](https://www.telerik.com/maui-ui/documentation/controls/treeview/styling/item-style) diff --git a/knowledge-base/conditionally-show-hide-expand-arrow-datagrid.md b/knowledge-base/conditionally-show-hide-expand-arrow-datagrid.md new file mode 100644 index 000000000..fa1e19314 --- /dev/null +++ b/knowledge-base/conditionally-show-hide-expand-arrow-datagrid.md @@ -0,0 +1,142 @@ +--- +title: Conditionally Showing or Hiding the Expand Arrow in Toggle Row Details Column Cells +description: Learn how to conditionally show or hide the expand arrow in the toggle row details column cells in the DataGrid for UI for .NET MAUI when there are no details for the rows. +type: how-to +page_title: Conditionally Display Expand Arrow in DataGrid Toggle Row Details Column +meta_title: Conditionally Display Expand Arrow in DataGrid Toggle Row Details Column +slug: conditionally-show-hide-expand-arrow-datagrid +tags: datagrid, ui-for-net-maui, toggle-row-details-column, isvisible-property, cellcontentstyleselector +res_type: kb +ticketid: 1700211 +--- + +## Environment + +| Version | Product | Author | +| --- | --- | ---- | +| 11.1.0 | Telerik UI for .NET MAUI DataGrid | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova)| + +## Description + +I want to conditionally hide the expand arrow in the toggle row details column cells when there are no details for the rows in the DataGrid for UI for .NET MAUI. + +This knowledge base article also answers the following questions: +- How to hide the expand arrow in DataGrid for UI for .NET MAUI when no row details exist? +- How to implement conditional visibility for the toggle row details button? +- How to stop default command execution for empty row details? + +## Solution + +To hide the expand arrow in the toggle row details column cells when no row details exist, follow these steps: + +1. Implement a custom style selector to apply different styles based on whether the row has details. + +```csharp +public class RowDetailsColumnStyleSelector : IStyleSelector +{ + public Style Style1 { get; set; } + public Style Style2 { get; set; } + + public Style SelectStyle(object item, BindableObject bindable) + { + var dataItem = (DataGridCellInfo)item; + if (dataItem.Item is Data data) + { + if (string.IsNullOrEmpty(data.Details)) + { + return this.Style1; // Apply transparent button style when no details exist. + } + } + return this.Style2; // Apply default button style. + } +} +``` + +2. Define styles for the toggle row details column cells in your XAML. + +```xml + + + + + + + + + + + + + + + + +``` + +3. Implement a custom `ToggleRowDetailsButtonTap` command to prevent the default behavior when row details are empty. + +```csharp +public class MyToggleRowDetailsButtonTap : DataGridCommand +{ + public MyToggleRowDetailsButtonTap() + { + Id = DataGridCommandId.ToggleRowDetailsButtonTap; + } + + public override bool CanExecute(object parameter) + { + return true; + } + + public override void Execute(object parameter) + { + var data = parameter as Data; + if (string.IsNullOrEmpty(data?.Details)) + { + return; // Prevent default execution when no row details exist. + } + this.Owner.CommandService.ExecuteDefaultCommand(DataGridCommandId.ToggleRowDetailsButtonTap, parameter); + } +} +``` + +4. Set up the `RadDataGrid` and link the resources. + +```xml + + + + + + + +``` + +In the code behind, assign the `ItemsSource` and add the custom command. + +```csharp +List items = new List +{ + new Data { Country = "India", Capital = "New Delhi", Details = "Details about India." }, + new Data { Country = "South Africa", Capital = "Cape Town", Details = "Details about South Africa." }, + new Data { Country = "Nigeria", Capital = "Abuja", Details = "Details about Nigeria." }, + new Data { Country = "Singapore", Capital = "Singapore" } +}; + +this.dataGrid.ItemsSource = items; +this.dataGrid.Commands.Add(new MyToggleRowDetailsButtonTap()); +``` + +## See Also + +- [DataGrid Overview](https://www.telerik.com/maui-ui/documentation/controls/datagrid/overview) +- [CellContentStyleSelector Documentation](https://www.telerik.com/maui-ui/documentation/controls/datagrid/theming-and-styles/style-selectors) diff --git a/knowledge-base/hide-default-expand-icon-maui-collectionview-grouping.md b/knowledge-base/hide-default-expand-icon-maui-collectionview-grouping.md new file mode 100644 index 000000000..8031ee913 --- /dev/null +++ b/knowledge-base/hide-default-expand-icon-maui-collectionview-grouping.md @@ -0,0 +1,75 @@ +--- +title: Hiding Default Expand Icon in .NET MAUI CollectionView with Grouping +description: Learn how to hide the default expand icon in .NET MAUI CollectionView when grouping is used and use a custom icon instead. +type: how-to +page_title: Customizing Expand Icon in .NET MAUI CollectionView Grouping +meta_title: Customizing Expand Icon in .NET MAUI CollectionView Grouping +slug: hide-default-expand-icon-maui-collectionview-grouping +tags: collectionview, expand-collapse-indicator, grouping, header-template, styling +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 to hide the default expand/collapse icon in the .NET MAUI CollectionView when grouping is used. I plan to use a custom icon and style it further. + +This knowledge base article also answers the following questions: +- How can I replace the default expand icon in .NET MAUI CollectionView with a custom one? +- How to hide the expand/collapse indicator in .NET MAUI CollectionView grouping? +- How to style the expand/collapse icon in .NET MAUI CollectionView? + +## Solution + +To hide the default expand/collapse icon and use a custom icon, use either the [`GroupViewStyle` property](#option-1-using-groupviewstyle) or [remove the default indicator](#option-2-removing-default-indicator). + +### Option 1: Using `GroupViewStyle` + +1. Remove the default expand arrow from the group template. +2. Use the `GroupViewStyle` property and its `ExpandCollapseIndicatorStyle` to style the expand indicator. + +```XAML + + + +``` + +3. Define the style with the target type `Label`. + +```XAML + +``` + +Refer to the official documentation for more information on [GroupViewStyle](https://www.telerik.com/maui-ui/documentation/controls/collectionview/styling/group-style). + +### Option 2: Removing Default Indicator + +1. Set the `IsVisible` property of the expand/collapse indicator to `False` in the style. + +```XAML + +``` + +2. Define your custom indicator in the group template. + +```XAML + + + +``` + +## See Also + +- [Grouping in CollectionView](https://www.telerik.com/maui-ui/documentation/controls/collectionview/grouping/overview) +- [CollectionView GroupViewStyle](https://www.telerik.com/maui-ui/documentation/controls/collectionview/styling/group-style) +- [Customizing Group Header Text Area](https://www.telerik.com/maui-ui/documentation/controls/collectionview/grouping/header#customizing-the-area-with-the-group-header-text) diff --git a/knowledge-base/scheduler-month-view-clickable-three-dots.md b/knowledge-base/scheduler-month-view-clickable-three-dots.md new file mode 100644 index 000000000..deb794a26 --- /dev/null +++ b/knowledge-base/scheduler-month-view-clickable-three-dots.md @@ -0,0 +1,112 @@ +--- +title: Making the Three Dots in Scheduler Month View Clickable +description: Learn how to make the three dots clickable in the Scheduler Month View for small resolutions, allowing users to view and select events. +type: how-to +page_title: Enabling Clickable Three Dots in Scheduler Month View for Event Selection +meta_title: Clickable Three Dots in UI for .NET MAUI Scheduler Month View +slug: scheduler-month-view-clickable-three-dots +tags: scheduler, ui-for-dotnet-maui, events, monthdaytapped, commands, appointments +res_type: kb +--- + +## Environment + +| Version | Product | Author | +| --- | --- | ---- | +| 11.1.0 | Telerik UI for .NET MAUI Scheduler | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) | + +## Description + +I want to make the three dots in the Scheduler Month View clickable, especially for small resolutions. Users should be able to interact with these dots to view and select events for a specific day. The goal is to either switch to the Day View of the selected date or display a pop-up/dialog listing the events for that day. + +This knowledge base article also answers the following questions: +- How to handle the `MonthDayTapped` event in Scheduler? +- How to retrieve appointments for a specific day in the Scheduler Month View? +- How to display a list of events when the three dots are clicked? + +## Solution + +To make the three dots clickable and retrieve all appointments for a specific day, use the `MonthDayTapped` event or `MonthDayTapCommand`. Below is an example of using the `MonthDayTapped` event: + +1. Define the Scheduler and bind the `MonthDayTapped` event. + +```xaml + + + + + +``` + +2. Create a `ViewModel` with a list of appointments. This will serve as the data source. + +```csharp +public class ViewModel +{ + public ViewModel() + { + var date = DateTime.Today; + this.Appointments = new ObservableCollection + { + new Appointment { + Subject = "Meeting", + Start = date.AddHours(10), + End = date.AddHours(11) + }, + new Appointment { + Subject = "Lunch", + Start = date.AddHours(12).AddMinutes(30), + End = date.AddHours(14) + }, + new Appointment { + Subject = "Elle Birthday", + Start = date, + End = date.AddHours(11), + IsAllDay = true + } + }; + } + + public ObservableCollection Appointments { get; set; } +} +``` + +3. Handle the `MonthDayTapped` event to retrieve appointments for the selected day and display them in a dialog. + +```csharp +public partial class MainPage : ContentPage +{ + ViewModel vm; + + public MainPage() + { + InitializeComponent(); + this.vm = new ViewModel(); + this.BindingContext = this.vm; + } + + private void scheduler_MonthDayTapped(object sender, TappedEventArgs e) + { + var items = this.vm.Appointments; + var appointmentsFromDay = new List(); + foreach (var item in items) + { + if (item.Start.Day == e.Data.Day) + { + appointmentsFromDay.Add(item); + } + } + App.Current.MainPage.DisplayAlert("", appointmentsFromDay.Count + " Appointments", "OK"); + } +} +``` + +Modify the logic further based on your specific requirements. + +## See Also + +- [Scheduler Events](https://www.telerik.com/maui-ui/documentation/controls/scheduler/events) +- [Scheduler Commands](https://www.telerik.com/maui-ui/documentation/controls/scheduler/commands) +- [UI for .NET MAUI Scheduler Overview](https://www.telerik.com/maui-ui/documentation/controls/scheduler/overview) diff --git a/knowledge-base/styling-radcollectionview-xaml-csharp-background-spacing.md b/knowledge-base/styling-radcollectionview-xaml-csharp-background-spacing.md new file mode 100644 index 000000000..8ad0a3cea --- /dev/null +++ b/knowledge-base/styling-radcollectionview-xaml-csharp-background-spacing.md @@ -0,0 +1,157 @@ +--- +title: Defining Styles for CollectionView in XAML and C# +description: Learn how to define styles for the CollectionView in UI for .NET MAUI using both XAML and C#. Control the background color in normal and selected states and adjust item spacing. +type: how-to +page_title: Styling CollectionView in XAML and C# for Background and Spacing +meta_title: Styling CollectionView in XAML and C# for Background and Spacing +slug: styling-radcollectionview-xaml-csharp-background-spacing +tags: collectionview, .net maui, radcollectionview, styles, xaml, csharp, itemstyle, itemlayout +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 need to define styles for the [CollectionView](https://www.telerik.com/maui-ui/documentation/controls/collectionview/overview) in both XAML and C#. The styles should control the background color of list items in normal and selected states and manage the spacing between list items. + +This knowledge base article also answers the following questions: +- How to set item background color and spacing in CollectionView? +- How to apply styles to CollectionView in XAML? +- How to define styles for CollectionView programmatically in C#? + +## Solution + +Here is an example how to define styles in XAML and C#. + +### Styling in XAML + +Define implicit styles in the `ContentPage.Resources` section. Use `VisualStateManager` to control the background color for normal and selected states, and set `ItemsLayout` for spacing. + +```xaml + + + + + + + + + +``` + +### Styling in C# + +1. Apply the styles programmatically using the `Style` class and `VisualStateManager.VisualStateGroupsProperty`. Attach the styles to the `RadCollectionView` in the code-behind. + +```csharp +private void Button_Clicked(object sender, EventArgs e) +{ + SetStyle(); +} + +public void SetStyle() +{ + this.collectionView.ItemsLayout = new CollectionViewLinearLayout() + { + Orientation = Telerik.Maui.Orientation.Vertical, + ItemSpacing = 10 + }; + + this.collectionView.ItemViewStyle = new Style(typeof(RadCollectionViewItemView)) + { + Setters = + { + new Setter + { + Property = RadCollectionViewItemView.BorderColorProperty, + Value = Color.FromHex("#80CBC4") + }, + new Setter + { + Property = RadCollectionViewItemView.BorderThicknessProperty, + Value = 1 + }, + new Setter + { + Property = RadCollectionViewItemView.CornerRadiusProperty, + Value = 5 + }, + new Setter + { + Property = VisualStateManager.VisualStateGroupsProperty, + Value = new VisualStateGroupList() + { + new VisualStateGroup + { + Name = "CommonStates", + States = + { + new VisualState + { + Name = "Normal", + }, + new VisualState + { + Name = "Selected", + Setters = + { + new Setter + { + Property = RadCollectionViewItemView.BackgroundColorProperty, + Value = Color.FromHex("#C4E6E3") + }, + } + } + } + } + } + }, + } + }; +} +``` + +2. Define the CollectionView in XAML. + +```xaml + +