Styling ComboBox, AutoComplete and Entry in Telerik MAUI After Upgrading to Version 8.0.0 or Later

Environment

Versions	Product	Author
8.0.0 or Later	Telerik UI for .NET MAUI ComboBox, AutoComplete, Entry	Dobrinka Yordanova

Description

This knowledge base article answers the following questions:

• How can I apply an implicit style to the RadComboBox, RadAutoComplete, and RadEntry in Telerik MAUI after an update to 8.0.0 or a later version?
• How do I style the inner input control (RadTextInput) used in the RadComboBox, RadAutoComplete and RadEntry in Telerik MAUI version 8.0.0 or later?

Solution

This example shows how to apply an implicit style to the AutoComplete, ComboBox, and Entry, and apply an explicit style to the inner input control—TextInput.

1. Define the RadComboBox, RadAutoComplete and RadEntry in XAML:

XAML

<VerticalStackLayout Padding="10" Spacing="20">
    <telerik:RadAutoComplete x:Name="auto"
                                ItemsSource="{Binding Source}" 
                                TextSearchPath="Name"
                                Placeholder="Search autocomplete"/>

    <telerik:RadEntry x:Name="entry"
                        Placeholder="Search entry" />
        
    <telerik:RadComboBox x:Name="combo" 
                            Placeholder="Search combo"
                            IsEditable="True"
                            DisplayMemberPath="Name"
                            SearchTextPath="Name"
                            ItemsSource="{Binding Source}" />
</VerticalStackLayout>

2. Define the implicit styles to the page's resources or in a global resource dictionary file:

XAML

 <Style TargetType="telerik:RadTextInput" x:Key="text">
    <Setter Property="Padding" Value="10,0,0,0" />
</Style>

<Style TargetType="telerik:RadAutoComplete">
    <Setter Property="TextColor" Value="LightGray" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="BorderBrush" Value="#FF404040" />
    <Setter Property="PlaceholderColor" Value="LightGray" />
    <Setter Property="BackgroundColor" Value="#FF454545" />
    <Setter Property="TextInputStyle" Value="{StaticResource text}" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal" />
                <VisualState Name="Focused">
                    <VisualState.Setters>
                        <Setter Property="telerik:RadAutoComplete.BorderBrush" Value="#FF99DF8E" />
                        <Setter Property="telerik:RadAutoComplete.BackgroundColor" Value="#FF000000" />
                        <Setter Property="telerik:RadAutoComplete.BorderThickness" Value="1" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="MouseOver">
                    <VisualState.Setters>
                        <Setter Property="telerik:RadAutoComplete.BackgroundColor" Value="#FF000000" />
                        <Setter Property="telerik:RadAutoComplete.BorderBrush" Value="#FF99DF8E" />
                        <Setter Property="telerik:RadAutoComplete.BorderThickness" Value="1" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="PointerOver">
                    <VisualState.Setters>
                        <Setter Property="telerik:RadAutoComplete.BackgroundColor" Value="#FF000000" />
                        <Setter Property="telerik:RadAutoComplete.BorderBrush" Value="#FF99DF8E" />
                        <Setter Property="telerik:RadAutoComplete.BorderThickness" Value="1" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

<Style TargetType="telerik:RadEntry">
    <Setter Property="TextColor" Value="LightGray" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="MinimumHeightRequest" Value="20" />
    <Setter Property="FontSize" Value="14" />
    <Setter Property="BorderBrush" Value="#FF404040" />
    <Setter Property="PlaceholderColor" Value="LightGray" />
    <Setter Property="BackgroundColor" Value="#FF454545" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal" />
                <VisualState Name="Focused">
                    <VisualState.Setters>
                        <Setter Property="telerik:RadEntry.BorderBrush" Value="#FF99DF8E" />
                        <Setter Property="telerik:RadEntry.BackgroundColor" Value="#FF000000" />
                        <Setter Property="telerik:RadEntry.BorderThickness" Value="1" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="MouseOver">
                    <VisualState.Setters>
                        <Setter Property="telerik:RadEntry.BackgroundColor" Value="#FF000000" />
                        <Setter Property="telerik:RadEntry.BorderBrush" Value="#FF99DF8E" />
                        <Setter Property="telerik:RadEntry.BorderThickness" Value="1" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>


<Style TargetType="telerik:RadComboBox">
    <Setter Property="TextColor" Value="LightGray" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="BorderBrush" Value="#FF404040" />
    <Setter Property="PlaceholderColor" Value="LightGray" />
    <Setter Property="BackgroundColor" Value="#FF454545" />
    <Setter Property="TextInputStyle" Value="{StaticResource text}" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal" />
                <VisualState Name="Focused">
                    <VisualState.Setters>
                        <Setter Property="telerik:RadComboBox.BorderBrush" Value="#FF99DF8E" />
                        <Setter Property="telerik:RadComboBox.BackgroundColor" Value="#FF000000" />
                        <Setter Property="telerik:RadComboBox.BorderThickness" Value="1" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="MouseOver">
                    <VisualState.Setters>
                        <Setter Property="telerik:RadComboBox.BackgroundColor" Value="#FF000000" />
                        <Setter Property="telerik:RadComboBox.BorderBrush" Value="#FF99DF8E" />
                        <Setter Property="telerik:RadComboBox.BorderThickness" Value="1" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="PointerOver">
                    <VisualState.Setters>
                        <Setter Property="telerik:RadComboBox.BackgroundColor" Value="#FF000000" />
                        <Setter Property="telerik:RadComboBox.BorderBrush" Value="#FF99DF8E" />
                        <Setter Property="telerik:RadComboBox.BorderThickness" Value="1" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

For the RadTextInput control—Define the explicit style through the TextInputStyle property of the RadAutoComplete and the RadComboBox controls.

See Also

• Telerik UI for MAUI ComboBox Documentation
• Telerik UI for MAUI AutoComplete Documentation
• Telerik UI for MAUI Entry Documentation
• Telerik UI for MAUI TextInput Documentation