.NET MAUI AutoComplete Styling
AutoComplete control provides the following Style properties for customizing its look:
-
Font Options
(FontAttributes
,FontFamily
,FontSize
)—Define the font options to the text of the RadAutoComplete. -
TextColor
(Color
)—Defines the text color of the control. -
PlaceholderColor
(Color
)—Defines the background color of the suggestion view. -
BorderBrush
(Brush
)—Defines the brush of the border around the control. -
BorderThickness
(Thickness
)—Defines the thickness of the border around the control. -
FocusedBorderBrush
(Brush
)—Defines the color of the border when the control is focused.
For a runnable AutoComplete styling example, refer to the SDKBrowser Demo application.
Clear Button Styling
Use the ClearButtonStyle
property (of type Style
with target type RadButton
) to style the clear button.
Suggestion View Styling
-
SuggestionViewBackgroundColor
(Color
)—Defines the background color of the suggestion view. -
SuggestionViewBorderColor
(Color
)—Defines the color of the suggestion view border (drop-down). -
SuggestionViewBorderThickness
—Defines the thickness of the border around the suggestion view. -
SuggestionViewCornerRadius
—Defines the corner radius applied to the Suggestion View. -
SuggestionItemHighlightTextColor
—Defines the highlight color of the selection items.
Here is an example how to use the SuggestionItemHighlightTextColor
property:
1. Create the needed business objects, for example type Client with the following properties:
public class Client
{
public Client() { }
public Client(string name, string imageSource)
{
this.Name = name;
this.ImageSource = imageSource;
}
public Client(string name, string email, string imageSource)
{
this.Name = name;
this.Email = email;
this.ImageSource = imageSource;
}
public string Name { get; set; }
public string Email { get; set; }
public string ImageSource { get; set; }
}
2. Create a ViewModel with a collection of Client objects:
public class ClientsViewModel
{
public ClientsViewModel()
{
this.Source = new ObservableCollection<Client>()
{
new Client("Freda Curtis", "fcurtis@mail.com", "available.png"),
new Client("Jeffery Francis", "jfrancis@mail.com", "away.png"),
new Client("Eva Lawson", "elawson@mail.com", "available.png"),
new Client("Emmett Santos", "esantos@mail.com", "busy.png"),
new Client("Theresa Bryan", "tbryan@mail.com", "available.png"),
new Client("Jenny Fuller", "jfuller@mail.com", "busy.png"),
new Client("Terrell Norris", "tnorris@mail.com", "away.png"),
new Client("Eric Wheeler", "ewheeler@mail.com", "away.png"),
new Client("Nida Carty", "ncarty@mail.com", "away.png"),
new Client("Niki Samaniego", "nsamaniego@mail.com", "busy.png")
};
}
public ObservableCollection<Client> Source { get; set; }
}
3. Declare the RadAutoComplete in XAML with SuggestionItemHighlightTextColor
property:
<telerik:RadAutoComplete x:Name="autoCompleteView1"
ItemsSource="{Binding Source}"
TextSearchPath="Name"
Placeholder="Search Here..."
SuggestionItemHighlightTextColor="BlueViolet"
SuggestionViewMaxHeight="100" />
Highlight Customization
In case a custom template is used, the user can achieve text highlighting inside the RadAutoComplete.SuggestionItemTemplate
using RadHighlightLabel
.
The AutoComplete RadHighlightLabel
exposes the following properties:
HighlightTextColor
HighlightText
UnformattedText
Here is an example with RadHighlightLabel
:
1. Create the needed business objects, for example type Client with the following properties:
public class Client
{
public Client() { }
public Client(string name, string imageSource)
{
this.Name = name;
this.ImageSource = imageSource;
}
public Client(string name, string email, string imageSource)
{
this.Name = name;
this.Email = email;
this.ImageSource = imageSource;
}
public string Name { get; set; }
public string Email { get; set; }
public string ImageSource { get; set; }
}
2. Create a ViewModel with a collection of Client objects:
public class ClientsViewModel
{
public ClientsViewModel()
{
this.Source = new ObservableCollection<Client>()
{
new Client("Freda Curtis", "fcurtis@mail.com", "available.png"),
new Client("Jeffery Francis", "jfrancis@mail.com", "away.png"),
new Client("Eva Lawson", "elawson@mail.com", "available.png"),
new Client("Emmett Santos", "esantos@mail.com", "busy.png"),
new Client("Theresa Bryan", "tbryan@mail.com", "available.png"),
new Client("Jenny Fuller", "jfuller@mail.com", "busy.png"),
new Client("Terrell Norris", "tnorris@mail.com", "away.png"),
new Client("Eric Wheeler", "ewheeler@mail.com", "away.png"),
new Client("Nida Carty", "ncarty@mail.com", "away.png"),
new Client("Niki Samaniego", "nsamaniego@mail.com", "busy.png")
};
}
public ObservableCollection<Client> Source { get; set; }
}
3. Use the following snippet to declare a RadAutoComplete in XAML with RadHighlightLabel
:
<telerik:RadAutoComplete x:Name="autoCompleteView2"
ItemsSource="{Binding Source}"
TextSearchPath="Name"
Placeholder="Search Here..."
SuggestionViewMaxHeight="100">
<telerik:RadAutoComplete.SuggestionItemTemplate>
<DataTemplate>
<telerik:RadHighlightLabel TextColor="Black" Padding="10"
HighlightTextColor="BlueViolet"
UnformattedText="{Binding Name}"
HighlightText="{Binding Source={x:Reference autoCompleteView2}, Path=Text}" />
</DataTemplate>
</telerik:RadAutoComplete.SuggestionItemTemplate>
</telerik:RadAutoComplete>
Here is the result:
For AutoComplete HighlightText example refer to the SDKBrowser Demo application.