You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
*[Collapsed/expanded states]({%slug accordion-expand-collapse-states%})—Accordion consists of AccordionItems that can present any content. The end users can show or hide this content by interacting with the headers of the control.
18
18
*[Collapse All Items]({% slug accordion-expand-collapse-states%}#collapse-all-items)—You can allow the app users to collapse the Accordion through the `CanCollapseAllItems` Boolean property.
*[Views]({%slug aiprompt-views-overview %})—The AIPrompt provides different views that you can include in it - Input, Output and Commands view. Through interaction with the component, the user can change the currently active view.
20
20
*[Suggestions]({%slug aiprompt-suggestions%})—This collection will allow you to populate the AIPrompt component with suggestions that will be displayed to the user prior to sending the request.
*[Tokens Support]({%slug autocomplete-tokens-support%})—With AutoComplete you can enable users to search for and pick items in one control.
18
18
*[Filtering Options]({%slug autocomplete-filtering%})—You can define the filtering behavior to display all the matches that either `StartsWith` or `Contains` the typed symbols.
Copy file name to clipboardExpand all lines: controls/autocomplete/styling.md
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -16,14 +16,10 @@ The Telerik UI for .NET MAUI AutoComplete control provides the following Style p
16
16
*`BorderBrush`(`Brush`)—Defines the brush of the border around the control.
17
17
*`BorderThickness`(`Thickness`)—Defines the thickness of the border around the control.
18
18
*`ClearButtonStyle` (of type `Style` with target type `Telerik.Maui.Controls.RadTemplatedButton`)—Defines the style for the clear button.
19
-
*`TextInputStyle`(of type `Style` with target type `Telerik.Maui.Controls.RadTextInput`)—Defines the style of the inner `RadTextInput` control.
20
19
21
-
In addition, you can change the visual appearance of the AutoComplete by defining the following visual states through the .NET MAUI Visual State Manager:
20
+
The AutoComplete control uses the [`RadTextInput`]({%slug entry-textinput%}) control internally. To style the input control (`RadTextInput`), use the `TextInputStyle` (of type `Style` with target type `Telerik.Maui.Controls.RadTextInput`).
22
21
23
-
*`Normal`—Applied when the AutoComplete is in its normal state.
24
-
*`Focused`—Applied when the AutoComplete receives focus.
25
-
* (Windows Only)`MouseOver`—Applied when the mouse cursor is hovering over the AutoComplete.
26
-
*`Disabled`—Applied when the AutoComplete's `IsEnabled` is `False`.
22
+
In addition to the available styling properties, you can apply specific [Visual States]({%slug autocomplete-visual-states%}) to the AutoComplete control.
>tip For a runnable example demonstrating the AutoComplete's Styling options, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to the **AutoComplete > Styling** category.
63
+
66
64
## Highlight Customization
67
65
68
66
In case a custom template is used, the user can achieve text highlighting inside the `RadAutoComplete.SuggestionItemTemplate` using `RadHighlightLabel`.
>important For AutoComplete HighlightText example refer to the [SDKBrowser Demo application]({%slug sdkbrowser-app%}).
92
+
>important For AutoComplete HighlightText example, refer to the [SDKBrowser Demo application]({%slug sdkbrowser-app%}) and go to the **AutoComplete > Featrues** category.
page_title: .NET MAUI AutoComplete Documentation - Visual States
4
+
description: Learn how to set the border color, background color, and other visual states for the Telerik UI for .NET MAUI AutoComplete control.
5
+
position: 15
6
+
tags: .net maui, telerik .net maui, ui for .net maui, autocomplete, states, microsoft .net maui
7
+
slug: autocomplete-visual-states
8
+
---
9
+
10
+
# .NET MAUI AutoComplete Visual States
11
+
12
+
This article describes the visual states provided by the AutoComplete control. You can use these visual states to change the appearance of the control based on its state—such as when it’s disabled, focused, hovered, and more.
13
+
14
+
The AutoComplete provides the following `CommonStates` visual states:
15
+
16
+
| Visual State | Description |
17
+
| ------------- | --------------- |
18
+
|`Normal`| Applies when the AutoComplete is in its normal state. |
19
+
|`Focused`| Applied when the AutoComplete receives focus. |
20
+
|`MouseOver`| (Windows-only) Applied when the mouse cursor is hovering over the AutoComplete. |
21
+
|`PointerOver`| (MacCatalyst-only) Applied when the mouse cursor is hovering over the AutoComplete. |
22
+
|`Disabled`| Applied when the AutoComplete's `IsEnabled` is `False`. |
23
+
24
+
## Using the Visual States
25
+
26
+
The example below demonstrates some of the styling capabilities of the AutoComplete, such as custom `ClearButtonStyle`, `TextInputStyle`, `TextColor`, `PlaceholderColor`, and others. It also shows how to switch its appearance through the .NET MAUI Visual State Manager.
27
+
28
+
**1.** Add a Style that targets the `RadAutoComplete` to your page's resources and apply all the needed styling properties and the visual states:
29
+
30
+
<snippetid='autocomplete-custom-styles' />
31
+
32
+
**2.** Define the AutoComplete in XAML:
33
+
34
+
<snippetid='autocomplete-styling-xaml'/>
35
+
36
+
**3.** Create the needed business objects, for example type `Client` with the following properties:
37
+
38
+
<snippetid='autocomplete-client-businessobject'/>
39
+
40
+
**4.** Create a `ViewModel` with a collection of `Client` objects:
>tip For a runnable example demonstrating the AutoComplete's Visual States, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to the **AutoComplete > Styling** category.
description: Learn more about the visual elements used in the Telerik UI for .NET MAUI AutoComplete control.
5
+
position: 0
6
+
slug: autocomplete-visual-structure
7
+
---
8
+
9
+
# .NET MAUI AutoComplete Visual Structure
10
+
11
+
The visual structure of the [.NET MAUI AutoComplete]({%slug autocomplete-overview%}) represents the anatomy of the UI control. Being familiar with the visual elements of the AutoComplete allows you to quickly find the information required to configure them.
12
+
13
+
The images in this article show the anatomy of the AutoComplete and its building blocks.
14
+
15
+
![Telerik UI for .NET MAUI AutoComplete Visual Structure](images/autocomplete-placeholder.png"Visual elements of AutoComplete control")
16
+
17
+
-`Placeholder`—The text that guides the end-user on what can be entered/searched in the input.
18
+
19
+
## Tokens Structure
20
+
21
+
![Telerik UI for .NET MAUI AutoComplete Tokens Visual Structure](images/autocomplete-tokens-template.png"Visual elements of AutoComplete control")
22
+
23
+
-`Tokens`—When multiple items are selected from the dropdown list, these items appear as tokens. They can be deselected using their close button.
24
+
-`ShowMore Template`—This template represents a UI that is displayed when the control is not focused and the space is insufficient to show all tokens in a multiple selection scenario.
25
+
26
+
## Filtering Structure
27
+
28
+
![Telerik UI for .NET MAUI AutoComplete Filtering Visual Structure](images/autocomplete-focused-text.png"Visual elements of AutoComplete control")
29
+
30
+
-`Text`—The text entered in the control's input filed.
31
+
-[`RadTextInput`]({%slug entry-textinput%})—The control used for the text input.
32
+
-`Clear Button`—Clears the selection in the control (for both multiple and single selection scenarios).
33
+
-`Filtered Items`—The items that are displayed after filtering the `ItemsSource` of the AutoComplete control.
0 commit comments