From a131ca5854f2279f0c862ee24001effd6ec35160 Mon Sep 17 00:00:00 2001 From: "PROGRESS\\kerpecheva" Date: Tue, 12 Nov 2024 16:41:54 +0200 Subject: [PATCH] Updates per reviewers' feedback --- controls/autocomplete/styling.md | 2 +- .../change-telerik-theme-runtime.md | 6 +-- styling-and-themes/customize-the-theme.md | 4 +- styling-and-themes/overview.md | 38 ++++----------- upgrade/breaking-changes/8-0-0.md | 47 ++++++++++--------- 5 files changed, 40 insertions(+), 57 deletions(-) diff --git a/controls/autocomplete/styling.md b/controls/autocomplete/styling.md index c9317f3f..a0df33e9 100644 --- a/controls/autocomplete/styling.md +++ b/controls/autocomplete/styling.md @@ -42,7 +42,7 @@ The example below demonstrates some of the styling capabilities of the AutoCompl **1.** Add a Style that targets the `RadAutoComplete` to your page's resources and apply all the needed styling properties and the visual states: - + **2.** Define the AutoComplete in XAML: diff --git a/knowledge-base/change-telerik-theme-runtime.md b/knowledge-base/change-telerik-theme-runtime.md index 8dae8929..8ee314af 100644 --- a/knowledge-base/change-telerik-theme-runtime.md +++ b/knowledge-base/change-telerik-theme-runtime.md @@ -31,7 +31,7 @@ How can I change the Telerik theme at runtime based on the device theme (Dark/Li Go to the steps below to ensure the Telerik .NET MAUI controls respond to app theme changes and are properly styled whenever light/dark mode is switched. -**1.** Enable the Telerik Theming—As a first step, make sure the Telerik Theming is enabled in your app following the instructions here: [Using the Telerik Theming]({%slug theming-overview%}#using-the-telerik-theming). +**1.** Enable the Telerik Theming—As a first step, make sure the Telerik Theming is enabled in your app following the instructions here: [Using the Telerik Themes]({%slug themes-overview%}#using-the-telerik-theming). **2.** Detect the current system theme—Use the `Application.RequestedTheme` property to get the current `AppTheme` and load light or dark colors of the Telerik Theming accordingly, for example: @@ -58,7 +58,7 @@ Detect the current system theme | MS Learn](https://learn.microsoft.com/en-us/do ```C# public App() { - InitializeComponent(); + InitializeComponent(); Application.Current.UserAppTheme = AppTheme.Unspecified; Application.Current.RequestedThemeChanged += (s, e) => ApplyTelerikTheme(); @@ -73,5 +73,5 @@ React to theme changes | MS Learn](https://learn.microsoft.com/en-us/dotnet/maui ## See Also -- [Telerik Theming Overview]({%slug theming-overview%}) +- [Telerik Themes Overview]({%slug themes-overview%}) - [Respond to system theme changes | MS Learn](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/system-theme-changes) diff --git a/styling-and-themes/customize-the-theme.md b/styling-and-themes/customize-the-theme.md index 3ed1c156..b4b76100 100644 --- a/styling-and-themes/customize-the-theme.md +++ b/styling-and-themes/customize-the-theme.md @@ -2,7 +2,7 @@ title: Customizing a Theme page_title: Customize a Theme description: Learn how to customize the Telerik Theme for your .NET MAUI application and alter the default appearance of the UI for .NET MAUI components. -slug: theming-customization +slug: themes-customization tags: telerik,.net maui,theme,custom position: 1 --- @@ -111,4 +111,4 @@ In this case, to modify the ComboBox, you'd need to copy and merge the content o ## See Also -- [Theming Overview]({%slug theming-overview%}) +- [Themes Overview]({%slug themes-overview%}) diff --git a/styling-and-themes/overview.md b/styling-and-themes/overview.md index cb2650ea..faaffe60 100644 --- a/styling-and-themes/overview.md +++ b/styling-and-themes/overview.md @@ -1,16 +1,18 @@ --- -title: Theming Overview -page_title: Theming Overview +title: Themes Overview +page_title: Themes Overview description: The Telerik UI for .NET MAUI suite comes with a built-in theme with a set of predefined color variations. -slug: theming-overview +slug: themes-overview tags: telerik,.net maui,theme,built-in position: 0 --- -# Theming Overview +# Themes Overview Telerik UI for .NET MAUI comes with a built-in theme that controls the visual appearance of the components, including colors, borders, backgrounds, size, layout, position, and font size. The theme also offers multiple color variations to choose from. +>The built-in Telerik UI for .NET MAUI theme and its swatches are currently in preview and were introduced in version 8.0.0 (2024 Q4). + ## Theme A *theme* is a collection of styles and templates in XAML files, which determine the appearance of the Telerik .NET MAUI components, including fonts, colors, sizes, and layouts. @@ -29,7 +31,7 @@ Here is an example of the AutoComplete control with `Purple` and `Purple Dark` a ## Using the MAUI Themes -To enable the Telerik Theming in your app, follow the steps below (assuming you already have a .NET MAUI app set up to work with Telerik .NET MAUI controls): +Before you can add Telerik Themes to your app, make sure that it is configured to use the Telerik UI for .NET MAUI components. For more details, see the [Getting Started with Telerik UI for .NET MAUI in Visual Studio]({%slug: maui-getting-started %}) or [Visual Studio Code]({%slug: maui-getting-started-vs-code%}) articles. 1. Go to the `.csproj` file of your MAUI project and set `UseTelerikTheming` property to `true` in a separate `PropertyGroup`: @@ -39,7 +41,7 @@ To enable the Telerik Theming in your app, follow the steps below (assuming you ``` -1. Rebuild the solution - this will generate a new `TelerikTheming` folder inside the project containing all the styles and resources needed for the Telerik .NET MAUI controls: +1. Rebuild the solution—this will generate a new `TelerikTheming` folder inside the project containing all the styles and resources needed for the Telerik .NET MAUI controls: ![Telerik .NET MAUI TelerikTheming folder](images/theming-folder.png) @@ -92,28 +94,6 @@ After applying the `Telerik Purple` theme, the ToggleButton looks like this: >Keep in mind some of the Telerik UI for .NET MAUI controls do not fully support the Telerik Theming - AIPrompt, Chart, DataPager, ImageEditor, SlideView and Toolbar. -### Using the Theming Color System - -Telerik .NET MAUI Theming is influenced by the [Progress Design System Kit](https://www.telerik.com/design-system/docs/) and provides the [Color System](https://www.telerik.com/design-system/docs/foundation/color/) part of the kit foundation. - -Each swatch includes Color resources which can be mapped to the color variable groups described in the [Color Swatch of the Design System Kit](https://www.telerik.com/design-system/docs/foundation/color/swatch/). - -For example, the variables from the **Main Variable Group** (the Main variable group is a collection of colors that form the backbone of the application's visual design.), described in the Design System Kit like this: - -![Telerik Theming Variable Group](images/theming-color-variable-group.png) - -are presented in each Telerik theme swatch with the following x:Keys: - -```XAML -#FFFFFF -#3D3D3D -#666666 -#FAFAFA -#FFFFFF -#14000000 -#29000000 -``` - ### Applying Theme Colors throughout the App Each color variation (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. @@ -143,6 +123,6 @@ Here is the result with the `Purple` and `Purple Dark` swatches applied: ## Next Steps -- [Customize the Telerik Theme]({%slug theming-customization %}) +- [Customize the Telerik Theme]({%slug themes-customization %}) diff --git a/upgrade/breaking-changes/8-0-0.md b/upgrade/breaking-changes/8-0-0.md index 60c07b83..0157da62 100644 --- a/upgrade/breaking-changes/8-0-0.md +++ b/upgrade/breaking-changes/8-0-0.md @@ -12,31 +12,32 @@ This article lists the breaking changes introduced with the Telerik UI for .NET ## DataGrid -* The `GroupHeaderStyle` type is changed from `DataGridGroupHeaderStyle` to `Style` and targets the `DataGridGroupHeaderAppearance` class. For more details on how to style the group headers, review the [Group Header Styling]({%slug datagrid-group-header-styling%}) article. -* The `GroupHeaderStyleSelector` type is changed from `DataGridStyleSelector` to `IStyleSelector`. For more details on how to apply the `GroupHeaderStyleSelector`, review the [Style Selectors]({%slug datagrid-style-selectors%}) article. -* The `GroupFooterStyle` type is changed from `DataGridGroupFooterStyle` to `Style` and targets the `DataGridGroupFooterAppearance` class. For more details on how to apply the `GroupFooterStyle`, review the [Aggregates Styling]({%slug datagrid-aggregates-styling%}) article. -* The `GroupFooterStyleSelector` type is changed from `DataGridStyleSelector` to `IStyleSelector`. -* The `FrozenColumnsSplitterStyle` type is changed from `DataGridFrozenColumnsSplitterStyle` to `Style` and targets the `DataGridFrozenColumnsSplitterAppearance` class. -* The `CurrentCellStyle` type is changed from `DataGridBorderStyle` to `Style` and targets the `DataGridCurrentCellAppearance` class. For more details on how to style the current cell, review the [Current Cell]({%slug datagrid-current-cell%}) article. -* The `RowBackgroundStyle` type is changed from `DataGridBorderStyle` to `Style` and targets the `DataGridRowBackgroundAppearance` class. For more details on the row styling, review the [DataGrid Styling]({%slug datagrid-styling%}) article. -* The `AlternateRowBackgroundStyle` type is changed from `DataGridBorderStyle` to `Style` and targets the `DataGridAlternateRowBackgroundAppearance` class. For more details on the row styling, review the [DataGrid Styling]({%slug datagrid-styling%}) article. -* The `LoadOnDemandRowStyle` type is changed from `DataGridLoadOnDemandRowStyle` to `Style` and targets the `DataGridLoadOnDemandRowAppearance` class. -* The `SelectionStyle` type is changed from `DataGridBorderStyle` to `Style` and targets the `DataGridSelectionAppearance` class. For more details on how to style the selected row, review the [DataGrid Styling]({%slug datagrid-styling%}) article. -* The `MouseHoverStyle` type is changed from `DataGridBorderStyle` to `Style` and targets the `DataGridMouseHoverAppearance` class. For more details on how to apply the `MouseHoverStyle`, review the [DataGrid Styling]({%slug datagrid-styling%}) article. -* The `DataGridColumn`'`HeaderStyle` type is changed from `DataGridColumnHeaderStyle` to `Style` and targets the `DataGridColumnHeaderAppearance` class. For more details on how to style the column header, review the [Columns Styling]({%slug datagrid-columns-styling%}) article. -* The `DataGridColumn`'`FooterStyle` type is changed from `DataGridColumnFooterStyle` to `Style` and targets the `DataGridColumnFooterAppearance` class. For more details on how to style the column footer, review the [Columns Styling]({%slug datagrid-columns-styling%}) article. -* The `DataGridColumn`'`CellDecorationStyle` type is changed from `DataGridBorderStyle` to `Style` and targets the `DataGridCellDecorationAppearance` class. For more details on how to apply cell decoration, review the [Columns Styling]({%slug datagrid-columns-styling%}) article. -* The `DataGridColumn`'`CellDecorationStyleSelector` type is changed from `DataGridStyleSelector` to `IStyleSelector`. -* The `DataGridToggleRowDetailsColumn`'`CellContentStyle` type is changed from `DataGridToggleRowDetailsCellStyle` to `Style` and targets the `DataGridToggleRowDetailsCellAppearance` class. -* The `DataGridToggleRowDetailsColumn`'`CellContentStyleSelector` type is changed from `DataGridStyleSelector ` to `IStyleSelector`. -* The `DataGridTypedColumn`'`CellContentStyle` type is changed from `DataGridStyle` to `Style` and targets `DataGridTextCellAppearance` class. For more details on how to style the columns cells, review the [Columns Styling]({%slug datagrid-columns-styling%}) article. -* The `DataGridTypedColumn`'`CellContentStyleSelector` type is changed from `DataGridStyleSelector ` to `IStyleSelector`. For more details on how to apply the `CellContentStyleSelector`, review the [Style Selectors]({%slug datagrid-style-selectors%}) article. * The `DataGridStyle`, `DataGridTextCellStyle`, `DataGridGroupHeaderStyle`, `DataGridGroupFooterStyle`, `DataGridFrozenColumnsSplitterStyle`, `DataGridBorderStyle`, `DataGridLoadOnDemandRowStyle`, `DataGridColumnHeaderStyle`, `DataGridColumnFooterStyle`, `DataGridToggleRowDetailsCellStyle` and `DataGridStyleSelector` classes are removed. +* The `GroupHeaderStyle` type is changed from `DataGridGroupHeaderStyle` to `Style` and targets the new `DataGridGroupHeaderAppearance` class. For more details on how to style the group headers, review the [Group Header Styling]({%slug datagrid-group-header-styling%}) article. +* The `GroupHeaderStyleSelector` type is changed from `DataGridStyleSelector` to `IStyleSelector`. For more details on how to apply the `GroupHeaderStyleSelector`, review the [Style Selectors]({%slug datagrid-style-selectors%}) article. +* The `GroupFooterStyle` type is changed from `DataGridGroupFooterStyle` to `Style` and targets the new `DataGridGroupFooterAppearance` class. For more details on how to apply the `GroupFooterStyle`, review the [Aggregates Styling]({%slug datagrid-aggregates-styling%}) article. +* The `GroupFooterStyleSelector` type is changed from `DataGridStyleSelector` to `IStyleSelector`. +* The `FrozenColumnsSplitterStyle` type is changed from `DataGridFrozenColumnsSplitterStyle` to `Style` and targets the new `DataGridFrozenColumnsSplitterAppearance` class. +* The `CurrentCellStyle` type is changed from `DataGridBorderStyle` to `Style` and targets the new `DataGridCurrentCellAppearance` class. For more details on how to style the current cell, review the [Current Cell]({%slug datagrid-current-cell%}) article. +* The `RowBackgroundStyle` type is changed from `DataGridBorderStyle` to `Style` and targets the new `DataGridRowBackgroundAppearance` class. For more details on the row styling, review the [DataGrid Styling]({%slug datagrid-styling%}) article. +* The `AlternateRowBackgroundStyle` type is changed from `DataGridBorderStyle` to `Style` and targets the new `DataGridAlternateRowBackgroundAppearance` class. For more details on the row styling, review the [DataGrid Styling]({%slug datagrid-styling%}) article. +* The `LoadOnDemandRowStyle` type is changed from `DataGridLoadOnDemandRowStyle` to `Style` and targets the new `DataGridLoadOnDemandRowAppearance` class. +* The `SelectionStyle` type is changed from `DataGridBorderStyle` to `Style` and targets the new `DataGridSelectionAppearance` class. For more details on how to style the selected row, review the [DataGrid Styling]({%slug datagrid-styling%}) article. +* The `MouseHoverStyle` type is changed from `DataGridBorderStyle` to `Style` and targets the new `DataGridMouseHoverAppearance` class. For more details on how to apply the `MouseHoverStyle`, review the [DataGrid Styling]({%slug datagrid-styling%}) article. +* The `DataGridColumn`'`HeaderStyle` type is changed from `DataGridColumnHeaderStyle` to `Style` and targets the new `DataGridColumnHeaderAppearance` class. For more details on how to style the column header, review the [Columns Styling]({%slug datagrid-columns-styling%}) article. +* The `DataGridColumn`'`FooterStyle` type is changed from `DataGridColumnFooterStyle` to `Style` and targets the new `DataGridColumnFooterAppearance` class. For more details on how to style the column footer, review the [Columns Styling]({%slug datagrid-columns-styling%}) article. +* The `DataGridColumn`'`CellDecorationStyle` type is changed from `DataGridBorderStyle` to `Style` and targets the new `DataGridCellDecorationAppearance` class. For more details on how to apply cell decoration, review the [Columns Styling]({%slug datagrid-columns-styling%}) article. +* The `DataGridColumn`'`CellDecorationStyleSelector` type is changed from `DataGridStyleSelector` to `IStyleSelector`. +* The `DataGridToggleRowDetailsColumn`'`CellContentStyle` type is changed from `DataGridToggleRowDetailsCellStyle` to `Style` and targets the new `DataGridToggleRowDetailsCellAppearance` class. +* The `DataGridToggleRowDetailsColumn`'`CellContentStyleSelector` type is changed from `DataGridStyleSelector ` to `IStyleSelector`. +* The `DataGridTypedColumn`'`CellContentStyle` type is changed from `DataGridStyle` to `Style` and targets the new `DataGridTextCellAppearance` class. For more details on how to style the columns cells, review the [Columns Styling]({%slug datagrid-columns-styling%}) article. +* The `DataGridTypedColumn`'`CellContentStyleSelector` type is changed from `DataGridStyleSelector ` to `IStyleSelector`. For more details on how to apply the `CellContentStyleSelector`, review the [Style Selectors]({%slug datagrid-style-selectors%}) article. ## AutoComplete * The `RadAutoCompleteEntry ` automation Id is changed to `RadAutoCompleteTextInput`. +* `TextInputStyle` property with target type `Telerik.Maui.Controls.RadTextInput` control is added. For more details on how to style the TextInput, review the [AutoComplete Styling]({%slug autocomplete-styling%}) article. * The `ClearButtonStyle` target is changed from `RadButton` to `RadTemplatedButton`. For more details on how to style the clear button, review the [AutoComplete Styling]({%slug autocomplete-styling%}) article. ## Barcode @@ -83,7 +84,8 @@ The following classes are migrated from the `Telerik.Maui.Controls.Compatibility * The `RadComboBoxEntry` automation Id is changed to `RadComboBoxTextInput`. * The `DropDownButtonStyle` target is changed from `RadButton` to `RadTemplatedButton`. For more details on how to style the drop-down button, review the [ComboBox Drop Down Styling]({%slug combobox-styling%}#dropdown-styling) article. - +* The `ClearButtonStyle` target is changed from `RadButton` to `RadTemplatedButton`. For more details on how to style the clear button, review the [ComboBox Styling]({%slug combobox-styling%}) article. + ## Map * The Map component is moved to the `Telerik.Maui.Controls` namespace. @@ -96,6 +98,7 @@ The following classes are migrated from the `Telerik.Maui.Controls.Compatibility ## Entry +* The Entry component is now templated control. It has `ControlTemplate` and visual states. For more details on the provided visual states, review the [Entry Visual States]({%slug entry-visual-states%}) article. * The `ClearButtonColor`, `HoveredClearButtonColor` and `PressedClearButtonColor` properties are removed. Use the `ClearButtonStyle` (`Style` with target type `RadTemplatedButton`) to style the clear button. For more details on how to style the clear button, review the [Entry Clear Button Style]({%slug entry-styling%}#clear-button-style) article. * The `FocusedBorderBrush` and `FocusedBorderThickness` properties are removed. Use the focused visual state to set the `BorderBrush` and `BorderThickness` properties. Review the [Entry Visual States]({%slug entry-visual-states%}) article. * The `RadEntryEditor` automation Id is changed to `RadEntryTextInput`. @@ -106,10 +109,10 @@ The following classes are migrated from the `Telerik.Maui.Controls.Compatibility ## NumericInput -* The `EntryStyle` property is renamed to `TextInputStyle` and targets the `Telerik.Maui.Controls.RadTextInput` control. For more details on how to style the NumericInput, review the [NumericInput Styling]({%slug numericinput-styling%}) article. +* The `EntryStyle` property is removed. `TextInputStyle` is added, the `TextInputStyle` targets the `Telerik.Maui.Controls.RadTextInput` control. For more details on how to style the NumericInput, review the [NumericInput Styling]({%slug numericinput-styling%}) article. * The `NumericInputEntry` class is removed, `NumericInputTextInput` is added. * The NumericInput now uses `RadTemplatedButtons` for increase/decrease buttons instead of `RadButtons` - `IncreaseButtonStyle` and `DecreaseButtonStyle` now target the `Telerik.Maui.Controls.RadTemplatedButton` control. -* The `NumericInputButton` class is removed. +* The `NumericInputButton` class is removed. `RadTemplateButton` is used instead. * The `Telerik.Maui.Controls.NumericInput.ValueChangedEventArgs` is removed. The `ValueChanged` event now uses `Telerik.Maui.Controls.ValueChangedEventArgs`. * The `NumericEntry ` automation Id is changed to `NumericTextInput`.