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, andRadEntryin Telerik MAUI after an update to 8.0.0 or a later version? - How do I style the inner input control (
RadTextInput) used in theRadComboBox,RadAutoCompleteandRadEntryin 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:
<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:
<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.