зеркало из https://github.com/telerik/maui-docs.git
Updates per reviewers' feedback
This commit is contained in:
PROGRESS\kerpecheva
Родитель
f5cb2c44ae
Коммит
a131ca5854
|
|
@ -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:
|
||||
|
||||
<snippet id=' autocomplete-custom-styles' />
|
||||
<snippet id='autocomplete-custom-styles' />
|
||||
|
||||
**2.** Define the AutoComplete in XAML:
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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%})
|
||||
|
|
|
|||
|
|
@ -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
|
|||
</PropertyGroup>
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||
|
||||
|
||||
|
|
@ -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:
|
||||
|
||||
|
||||
|
||||
are presented in each Telerik theme swatch with the following x:Keys:
|
||||
|
||||
```XAML
|
||||
<Color x:Key="RadAppSurfaceColor">#FFFFFF</Color>
|
||||
<Color x:Key="RadOnAppSurfaceColor">#3D3D3D</Color>
|
||||
<Color x:Key="RadSubtleColor">#666666</Color>
|
||||
<Color x:Key="RadSurfaceColor">#FAFAFA</Color>
|
||||
<Color x:Key="RadSurfaceAltColor">#FFFFFF</Color>
|
||||
<Color x:Key="RadBorderColor">#14000000</Color>
|
||||
<Color x:Key="RadBorderAltColor">#29000000</Color>
|
||||
```
|
||||
|
||||
### 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 %})
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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`.
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче