.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", "[e-mail]", "available.png"),
            new Client("Jeffery Francis", "[e-mail]", "away.png"),
            new Client("Eva Lawson", "[e-mail]", "available.png"),
            new Client("Emmett Santos", "[e-mail]", "busy.png"),
            new Client("Theresa Bryan", "[e-mail]", "available.png"),
            new Client("Jenny Fuller", "[e-mail]", "busy.png"),
            new Client("Terrell Norris", "[e-mail]", "away.png"),
            new Client("Eric Wheeler", "[e-mail]", "away.png"),
            new Client("Nida Carty", "[e-mail]", "away.png"),
            new Client("Niki Samaniego", "[e-mail]", "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", "[e-mail]", "available.png"),
            new Client("Jeffery Francis", "[e-mail]", "away.png"),
            new Client("Eva Lawson", "[e-mail]", "available.png"),
            new Client("Emmett Santos", "[e-mail]", "busy.png"),
            new Client("Theresa Bryan", "[e-mail]", "available.png"),
            new Client("Jenny Fuller", "[e-mail]", "busy.png"),
            new Client("Terrell Norris", "[e-mail]", "away.png"),
            new Client("Eric Wheeler", "[e-mail]", "away.png"),
            new Client("Nida Carty", "[e-mail]", "away.png"),
            new Client("Niki Samaniego", "[e-mail]", "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.

See Also

• Data Binding
• Configuration
• Suggest Mode
• Display Text
• Tokens Support
• Remote Search
• Filtering
• Events
• Methods
• Templates