maui-404147-common-concepts-customize-appearance.md
This topic describes appearance customization techniques available in DevExpress .NET MAUI Controls:
Change Color Theme
Change Appearance Properties at the Control Level
Customize Control Elements: Use AppearanceBase Descendants
Use Implicit Styles for Centralized Style Management
Refer to the following section to review the list of DevExpress controls that include appearance customization settings: Appearance Customization: Control-Specific Information.
DevExpress .NET MAUI Controls ship with 10 built-in color themes that include both dark and light options. You can apply one of these predefined themes or use our Theme class to create a custom color theme.
Refer to the following topic for more information on how to apply or customize color themes: Color Themes for DevExpress .NET MAUI Controls.
The following code snippet customizes the appearance of a DXButton control.
|
Button State
|
Default Appearance
|
Custom Appearance
| | --- | --- | --- | |
Default
|
|
| |
Pressed
|
|
| |
Disabled
|
|
|
Add the delete.png icon file to the Resources/Images folder.
Use the following properties to adjust the button’s appearance:
DevExpress .NET MAUI Controls store appearance settings for elements of a specific type (such as data cells or column headers).
The diagram below demonstrates different appearance properties available in a DataGridView. You can find appearance properties that apply to the control itself: BorderColor and BorderThickness. You can also find properties that define the appearance of a specific element type. For example, the DataGridView.CellAppearance property stores settings that affect data cells. The property type is CellAppearance (an AppearanceBase descendant).
The following code sample uses the CellAppearance object to modify the data cell appearance in a DataGridView:
<ContentPage ...
xmlns:dxg="clr-namespace:DevExpress.Maui.DataGrid;assembly=DevExpress.Maui.DataGrid">
<!-- ... -->
<dxg:DataGridView ...>
<!-- ... -->
<dxg:DataGridView.CellAppearance>
<dxg:CellAppearance SelectionColor="AliceBlue" CheckedCheckBoxColor="CadetBlue"/>
</dxg:DataGridView.CellAppearance>
</dxg:DataGridView>
</ContentPage>
You can customize a control’s appearance within implicit styles to affect all elements with a specified type.
The following XAML code specifies the TextColor, LabelFontSize, and BottomTextFontSize properties for all TextEdit controls on a page:
<ContentPage ...
xmlns:dxe="clr-namespace:DevExpress.Maui.Editors;assembly=DevExpress.Maui.Editors">
<ContentPage.Resources>
<Style TargetType="dxe:TextEdit">
<Setter Property="TextColor" Value="#505050"/>
<Setter Property="LabelFontSize" Value="18" />
<Setter Property="BottomTextFontSize" Value="10" />
</Style>
</ContentPage.Resources>
<VerticalStackLayout Spacing="10">
<dxe:TextEdit Text="Anthony" LabelText="First Name" HelpText="Specify your first name." ClearIconColor="DarkRed"/>
<dxe:TextEdit Text="Sam" LabelText="Last Name" HelpText="Specify your last name."/>
<dxe:TextEdit Text="+18764563424" LabelText="Phone" TextColor="Black" HelpText="Specify your phone number."/>
</VerticalStackLayout>
</ContentPage>
You can create styles whose TargetType property is set to an AppearanceBase type.
The following code snippet uses implicit styles to specify the following properties of the CellAppearance object:
The color of the DataGridView‘s selected cell (SelectionColor).
The color of the DataGridView‘s checked checkbox (CheckedCheckBoxColor).
<ContentPage ...
xmlns:dxg="clr-namespace:DevExpress.Maui.DataGrid;assembly=DevExpress.Maui.DataGrid">
<ContentPage.Resources>
<Style TargetType="dxg:CellAppearance">
<Setter Property="SelectionColor" Value="AliceBlue"/>
<Setter Property="CheckedCheckBoxColor" Value="CadetBlue"/>
</Style>
</ContentPage.Resources>
<!-- ... -->
<dxg:DataGridView ...>
<!-- ... -->
</dxg:DataGridView>
<dxg:DataGridView ...>
<!-- ... -->
</dxg:DataGridView>
</ContentPage>
You cannot specify an AppearanceBase object in a component’s style.
The following code sample illustrates the wrong way to specify the DataGridView.CellAppearance.SelectionColor property in implicit styles:
<ContentPage ...
xmlns:dxg="clr-namespace:DevExpress.Maui.DataGrid;assembly=DevExpress.Maui.DataGrid">
<ContentPage.Resources>
<Style TargetType="dxg:DataGridView">
<Setter Property="CellAppearance">
<dxg:CellAppearance SelectionColor="Red"/>
</Setter>
</Style>
</ContentPage.Resources>
<!-- ... -->
<dxg:DataGridView ...>
<!-- ... -->
</dxg:DataGridView>
<dxg:DataGridView ...>
<!-- ... -->
</dxg:DataGridView>
</ContentPage>
Use a control’s *ActualAppearance class to obtain the appearance settings.
Refer to the following topics to get more information on how to customize the control’s appearance: