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
The `MADE.UI.Controls.ChipBox` element is a custom-built UI element that works with [Uno's supported platforms](https://platform.uno/) that provides a multi value input for a text box with auto-suggest capabilities. Values added are displayed as removable chips.
9
+
10
+
The control is a familiar custom input style control used in web applications.
11
+
12
+
Shown below is the visuals for the control in its default state, with some chip values already added.
13
+
14
+
<imgsrc="../../images/ChipBox.png"alt="ChipBox with chip values selected" />
The control exposes the selected chips through the `Chips` list property.
47
+
48
+
The type of objects contained in this collection will be `ChipItem` which contains the contents of the item as a generic `Object` type. This allows the `ChipBox` control to support any type of input value object.
49
+
50
+
## Providing suggestions for chip values
51
+
52
+
The `ChipBox` provides a `Suggestions` property that can be used to provide a list of objects that should be displayed to the user as suggestions.
53
+
54
+
The control exposes a `TextChangeCommand` property and a `TextChanged` event that can be used to provide the ability to customize and provide relevant suggestions based on the text provided. This is not a baked in feature of the control itself. Here is an example of using this in action.
It is up to the developer to implement the logic to provide suggestions. This is to ensure any flexibility in search and filtering is determined by the application rather than the control.
99
+
100
+
## Customizing the ChipBox
101
+
102
+
The control has many customization properties that are exposed to tailor the experience for your application.
103
+
104
+
### HeaderTemplate
105
+
106
+
The `Header` can be customized to include custom UI elements as well as a string resource.
107
+
108
+
The `HeaderTemplate` is also available to provide a `DataTemplate` for you to define the rendered UI for the `Header`.
109
+
110
+
### ChipContentTemplate
111
+
112
+
The rendered UI elements for the chips use a MADE `Chip` content control. By default, the chips will be rendered displaying the string equivalent of the content provided to it. To customize the layout and display of the chip's content, apply a `DataTemplate` to the `ChipContentTemplate` property.
113
+
114
+
### SuggestionsItemTemplate
115
+
116
+
As suggestions could be a list of complex objects rather than a simple string, the control provides a `SuggestionsItemTemplate` property that can be used to provide a `DataTemplate` for the suggestions that are displayed to the user.
117
+
118
+
### IsReadonly
119
+
120
+
The `ChipBox` has the ability to be rendered in a readonly state. This is useful when you want to display the chips without any user interaction.
121
+
122
+
When enabled, the auto-suggest text box will not be displayed to the user, and the ability to remove chips will be disabled.
123
+
124
+
### AllowDuplicate
125
+
126
+
By default, the `ChipBox` control allows duplicate values to be accepted. The `AllowDuplicate` property can be used to disable this behavior.
127
+
128
+
### AllowFreeText
129
+
130
+
The control supports the ability to allow free text input for chip values, as well as the option to only support selections from the suggestions list.
131
+
132
+
The `AllowFreeText` property, enabled by default, can be used to control this behavior.
@@ -42,6 +43,16 @@ Taking advantage of the Uno Platform, the UI packages provide extensible feature
42
43
43
44
</span>
44
45
46
+
#### UI.Controls.ChipBox
47
+
48
+
The UI Controls ChipBox library contains a cross-platform UI element that provides a multi value input for a text box with auto-suggest capabilities. Values added are displayed as removable chips.
The UI Controls DropDownList library contains a Windows UI element that provides a selection user experience, allowing a user to select one or multiple items from a list.
0 commit comments