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
Copy file name to clipboardExpand all lines: Documentation/topics/bars/configuration.md
+7Lines changed: 7 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -22,6 +22,13 @@ XAML is familiar to most @@PlatformTitle developers and popular IDEs like Visual
22
22
23
23
Some controls are used in multiple locations, and using XAML will typically require controls to be redefined everywhere they are used. For instance, a button that appears on a ribbon tab, a quick access toolbar, and a context menu might have to be defined three times. Care must be taken to ensure the same `Key` value is used for each control instance and common UI-centric properties like labels, tooltips, and icons will need to be repeated and synchronized between each control instance.
24
24
25
+
@if (avalonia) {
26
+
> [!WARNING]
27
+
> Some ribbon and toolbar functionality requires cloning a control from one context (like a Ribbon group) to another (like the Quick Access Toolbar). When objects are defined in XAML, every effort is made to create a new object and copy relevant properties to the copy, but the process is not guaranteed to fully clone the control. This process also requires the use of reflection and may encounter issues if trimming is enabled. Properties assigned with bindings will typically only clone the current value of the `Binding` (not the `Binding` itself), so clones may not be notified when the value of a `Binding` changes. Additionally, event handlers (like `Click` events on buttons) will not be cloned.
28
+
>
29
+
> MVVM does not have this issue since cloned objects can share the same view model.
30
+
}
31
+
25
32
## MVVM Configuration
26
33
27
34
MVVM is an extremely popular pattern used for @@PlatformTitle and one that is fully supported by Bars controls.
Copy file name to clipboardExpand all lines: Documentation/topics/bars/controls/button.md
+17-8Lines changed: 17 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -32,7 +32,7 @@ If the button should be checkable, use the [BarToggleButton](xref:@ActiproUIRoot
32
32
| Base class | Native `Button`. |
33
33
| Has key | Yes, via the [Key](xref:@ActiproUIRoot.Controls.Bars.BarButton.Key) property. |
34
34
| Has label | Yes, via the [Label](xref:@ActiproUIRoot.Controls.Bars.BarButton.Label) property. Auto-generated from the `Key` value if not specified. |
35
-
| Has image | Yes, via the [SmallImageSource](xref:@ActiproUIRoot.Controls.Bars.BarButton.SmallImageSource), [MediumImageSource](xref:@ActiproUIRoot.Controls.Bars.BarButton.MediumImageSource), and [LargeImageSource](xref:@ActiproUIRoot.Controls.Bars.BarButton.LargeImageSource) properties. |
35
+
| Has image | Yes, via the [SmallIcon](xref:@ActiproUIRoot.Controls.Bars.BarButton.SmallIcon), [MediumIcon](xref:@ActiproUIRoot.Controls.Bars.BarButton.MediumIcon), and [LargeIcon](xref:@ActiproUIRoot.Controls.Bars.BarButton.LargeIcon) properties. |
36
36
| Has popup | No. |
37
37
| Is checkable | Yes, but only when using [BarToggleButton](xref:@ActiproUIRoot.Controls.Bars.BarToggleButton). |
38
38
| Variant sizes |`Small` (image only), `Medium` (image and label), `Large` (tall size, image and multi-line label). |
@@ -105,7 +105,7 @@ Use the [BarMenuItem](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem) control to
105
105
| Base class | Native `MenuItem`. |
106
106
| Has key | Yes, via the [Key](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.Key) property. |
107
107
| Has label | Yes, via the [Label](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.Label) property. Auto-generated from the `Key` value if not specified. |
108
-
| Has image | Yes, via the [SmallImageSource](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.SmallImageSource) and [LargeImageSource](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.LargeImageSource) properties. |
108
+
| Has image | Yes, via the [SmallIcon](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.SmallIcon) and [LargeIcon](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.LargeIcon) properties. |
109
109
| Has popup | Not when a button concept is desired. |
110
110
| Is checkable | Yes, when the `ToggleType` property is set to `CheckBox` or `Radio`. |
111
111
| Variant sizes | None, but has a [UseLargeSize](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.UseLargeSize) property that triggers a large height and displays an extended [Description](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.Description). |
@@ -135,16 +135,16 @@ Use the [BarMenuItem](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem) control to
<!-- Label is auto-generated from Key, but we want to override the auto-generated KeyTipText -->
140
140
<actipro:BarMenuItem
141
141
Key="Undo"
142
142
KeyTipText="AZ"
143
-
SmallImageSource="/Images/Undo16.png"
143
+
SmallIcon="{StaticResource UndoIcon}"
144
144
Command="{Binding UndoCommand}"
145
145
/>
146
146
...
147
-
</actipro:BarContextMenu>
147
+
</actipro:BarMenuFlyout>
148
148
```
149
149
}
150
150
@if (wpf) {
@@ -197,12 +197,21 @@ The [BarMenuItem](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem).[Label](xref:@A
197
197
198
198
The controls can display images that help identify their function.
199
199
200
-
All [BarButton](xref:@ActiproUIRoot.Controls.Bars.BarButton) instances should set a [SmallImageSource](xref:@ActiproUIRoot.Controls.Bars.BarButton.SmallImageSource) at a minimum, which is generally used for `Small` and `Medium` variants, as well as in the [Ribbon Quick Access Toolbar](../ribbon-features/quick-access-toolbar.md) and if the control overflows to a menu. If the button supports a `Large` variant size, it should also define a [LargeImageSource](xref:@ActiproUIRoot.Controls.Bars.BarButton.LargeImageSource). @if (avalonia) { When the button is located on a ribbon with `Simplified` layout mode, }@if (wpf) { When the button has a `Spacious` UI density,} it will try to use [MediumImageSource](xref:@ActiproUIRoot.Controls.Bars.BarButton.MediumImageSource).
200
+
@if (avalonia) {
201
+
All [BarButton](xref:@ActiproUIRoot.Controls.Bars.BarButton) instances should set a [SmallIcon](xref:@ActiproUIRoot.Controls.Bars.BarButton.SmallIcon) at a minimum, which is generally used for `Small` and `Medium` variants, as well as in the [Ribbon Quick Access Toolbar](../ribbon-features/quick-access-toolbar.md) and if the control overflows to a menu. If the button supports a `Large` variant size, it should also define a [LargeIcon](xref:@ActiproUIRoot.Controls.Bars.BarButton.LargeIcon). When the button is located on a ribbon with `Simplified` layout mode, it will try to use [MediumIcon](xref:@ActiproUIRoot.Controls.Bars.BarButton.MediumIcon).
202
+
203
+
> [!TIP]
204
+
> See the [Control Basics](control-basics.md) topic for more detail on the fallback logic and custom data templates for button icons.
205
+
206
+
[BarMenuItem](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem) instances can optionally define a [SmallIcon](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.SmallIcon) that appears in the menu's icon column. When [UseLargeSize](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.UseLargeSize) is set to create a large menu item, the [LargeIcon](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.LargeIcon) property is used instead. When the menu item is checked, a highlight box will appear around the image. If no image is specified, a standard check glyph will be used in place of the image.}
207
+
@if (wpf) {
208
+
All [BarButton](xref:@ActiproUIRoot.Controls.Bars.BarButton) instances should set a [SmallImageSource](xref:@ActiproUIRoot.Controls.Bars.BarButton.SmallImageSource) at a minimum, which is generally used for `Small` and `Medium` variants, as well as in the [Ribbon Quick Access Toolbar](../ribbon-features/quick-access-toolbar.md) and if the control overflows to a menu. If the button supports a `Large` variant size, it should also define a [LargeImageSource](xref:@ActiproUIRoot.Controls.Bars.BarButton.LargeImageSource). When the button has a `Spacious` UI density, it will try to use [MediumImageSource](xref:@ActiproUIRoot.Controls.Bars.BarButton.MediumImageSource).
201
209
202
210
> [!TIP]
203
211
> See the [Control Basics](control-basics.md) topic for more detail on the fallback logic for button images.
204
212
205
-
[BarMenuItem](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem) instances can optionally define a [SmallImageSource](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.SmallImageSource) that appears in the menu's icon column. When [UseLargeSize](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.UseLargeSize) is set to create a large menu item, the [LargeImageSource](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.LargeImageSource) property is used instead. When the menu item is checked, a highlight box will appear around the image. If no image is specified, a standard check glyph will be used in place of the image.
213
+
[BarMenuItem](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem) instances can optionally define a [SmallImageSource](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.SmallImageSource) that appears in the menu's icon column. When [UseLargeSize](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.UseLargeSize) is set to create a large menu item, the [LargeImageSource](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.LargeImageSource) property is used instead. When the menu item is checked, a highlight box will appear around the image. If no image is specified, a standard check glyph will be used in place of the image.
Copy file name to clipboardExpand all lines: Documentation/topics/bars/controls/checkbox.md
+8-3Lines changed: 8 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -97,7 +97,7 @@ Use the [BarMenuItem](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem) control to
97
97
| Base class | Native `MenuItem`. |
98
98
| Has key | Yes, via the [Key](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.Key) property. |
99
99
| Has label | Yes, via the [Label](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.Label) property. Auto-generated from the `Key` value if not specified. |
100
-
| Has image | Yes, via the [SmallImageSource](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.SmallImageSource) and [LargeImageSource](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.LargeImageSource) properties. |
100
+
| Has image | Yes, via the [SmallIcon](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.SmallIcon) and [LargeIcon](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.LargeIcon) properties. |
101
101
| Has popup | Not when a checkbox concept is desired. |
102
102
| Is checkable | Yes, when the `ToggleType` property is set to `CheckBox` or `Radio`. |
103
103
| Variant sizes | None, but has a [UseLargeSize](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.UseLargeSize) property that triggers a large height and displays an extended [Description](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.Description). |
@@ -127,15 +127,15 @@ Use the [BarMenuItem](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem) control to
@@ -172,7 +172,12 @@ The [BarMenuItem](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem).[Label](xref:@A
172
172
173
173
[BarCheckBox](xref:@ActiproUIRoot.Controls.Bars.BarCheckBox) instances do not display any images.
174
174
175
+
@if (avalonia) {
176
+
[BarMenuItem](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem) instances can optionally define a [SmallIcon](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.SmallIcon) that appears in the menu's icon column. When [UseLargeSize](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.UseLargeSize) is set to create a large menu item, the [LargeIcon](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.LargeIcon) property is used instead. When the menu item is checked, a highlight box will appear around the image. If no image is specified, a standard check glyph will be used in place of the image.
177
+
}
178
+
@if (wpf) {
175
179
[BarMenuItem](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem) instances can optionally define a [SmallImageSource](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.SmallImageSource) that appears in the menu's icon column. When [UseLargeSize](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.UseLargeSize) is set to create a large menu item, the [LargeImageSource](xref:@ActiproUIRoot.Controls.Bars.BarMenuItem.LargeImageSource) property is used instead. When the menu item is checked, a highlight box will appear around the image. If no image is specified, a standard check glyph will be used in place of the image.
Copy file name to clipboardExpand all lines: Documentation/topics/bars/controls/combobox.md
+27-4Lines changed: 27 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -32,7 +32,7 @@ In summary, a [BarMenuGallery](xref:@ActiproUIRoot.Controls.Bars.BarMenuGallery)
32
32
| Base class |[BarMenuGalleryHostBase](xref:@ActiproUIRoot.Controls.Bars.Primitives.BarMenuGalleryHostBase), which indirectly inherits native `Selector`. |
33
33
| Has key | Yes, via the [Key](xref:@ActiproUIRoot.Controls.Bars.Primitives.BarGalleryBase.Key) property. |
34
34
| Has label | Yes, via the [Label](xref:@ActiproUIRoot.Controls.Bars.Primitives.BarGalleryBase.Label) property. Auto-generated from the `Key` value if not specified. |
35
-
| Has image | Yes, inline via the [InlineImageSourcePath](xref:@ActiproUIRoot.Controls.Bars.BarComboBox.InlineImageSourcePath) property or externally via the [SmallImageSource](xref:@ActiproUIRoot.Controls.Bars.Primitives.BarGalleryBase.SmallImageSource) property. |
35
+
| Has image | Yes, inline via the [InlineIconMemberBinding](xref:@ActiproUIRoot.Controls.Bars.BarComboBox.InlineIconMemberBinding) property or externally via the [SmallIcon](xref:@ActiproUIRoot.Controls.Bars.Primitives.BarGalleryBase.SmallIcon) property. |
36
36
| Has popup | Yes, which shows a [BarMenuGallery](xref:@ActiproUIRoot.Controls.Bars.BarMenuGallery) with the same items, and optionally additional menu items. |
@@ -131,7 +131,12 @@ There are several appearance-related properties that determine how the controls
131
131
132
132
The [Text](xref:@ActiproUIRoot.Controls.Bars.BarComboBox.Text) property gets or sets the text that is displayed within the combobox.
133
133
134
+
@if (avalonia) {
135
+
The [TextMemberBinding](xref:@ActiproUIRoot.Controls.Bars.BarComboBox.TextMemberBinding) property specifies the `IBinding` to a string-based property off the view model gallery item class to display in the combobox when a gallery item is selected.
136
+
}
137
+
@if (wpf) {
134
138
The [TextPath](xref:@ActiproUIRoot.Controls.Bars.BarComboBox.TextPath) property specifies the path to a string-based property off the view model gallery item class to display in the combobox when a gallery item is selected.
139
+
}
135
140
136
141
### Label
137
142
@@ -145,9 +150,18 @@ The `Label` can be auto-generated based on the control's `Key` property. For in
145
150
146
151
### Images
147
152
148
-
An image from the selected gallery item can be displayed inline within the control, before the combobox text. This image will update when the combobox's selection is changed. The [InlineImageSourcePath](xref:@ActiproUIRoot.Controls.Bars.BarComboBox.InlineImageSourcePath) property specifies the path to an `ImageSource`-based property off the view model gallery item class to display in the combobox when a gallery item is selected.
153
+
An image from the selected gallery item can be displayed inline within the control, before the combobox text. This image will update when the combobox's selection is changed.
154
+
155
+
@if (avalonia) {
156
+
The [InlineIconMemberBinding](xref:@ActiproUIRoot.Controls.Bars.BarComboBox.InlineIconMemberBinding) property specifies an `IBinding` to an `object`-based property off the view model gallery item class to display in the combobox when a gallery item is selected.
157
+
158
+
Alternatively, the control can display a static image via [SmallIcon](xref:@ActiproUIRoot.Controls.Bars.Primitives.BarGalleryBase.SmallIcon) that helps identify its function. The image is not tied to the selected item and is not rendered by the control itself, but can show externally (such as when in a [RibbonControlGroup](xref:@ActiproUIRoot.Controls.Bars.RibbonControlGroup)), or in customization UI.
159
+
}
160
+
@if (wpf) {
161
+
The [InlineImageSourcePath](xref:@ActiproUIRoot.Controls.Bars.BarComboBox.InlineImageSourcePath) property specifies the path to an `ImageSource`-based property off the view model gallery item class to display in the combobox when a gallery item is selected.
149
162
150
163
Alternatively, the control can display a static image via [SmallImageSource](xref:@ActiproUIRoot.Controls.Bars.Primitives.BarGalleryBase.SmallImageSource) that helps identify its function. The image is not tied to the selected item and is not rendered by the control itself, but can show externally (such as when in a [RibbonControlGroup](xref:@ActiproUIRoot.Controls.Bars.RibbonControlGroup)), or in customization UI.
164
+
}
151
165
152
166
### Title
153
167
@@ -205,7 +219,16 @@ See the [Key Tips](../ribbon-features/key-tips.md) topic for more information on
205
219
206
220
## Commands and Events
207
221
208
-
A commit is attempted by an editable [BarComboBox](xref:@ActiproUIRoot.Controls.Bars.BarComboBox) when <kbd>Enter</kbd> is pressed while the control is focused, or the control's text changes and then focus is lost. As long as the `IsTextSearchEnabled` property is `true`, the commit logic will examine the gallery items and will look for an item that matches the typed text. `IsTextSearchCaseSensitive` determines whether a case-sensitive text search is made. The attached `TextSearch.Text` property value from the gallery item (if it is a `DependencyObject`) will be examined first when looking for matches. If no match is made on that, and the [TextPath](xref:@ActiproUIRoot.Controls.Bars.BarComboBox.TextPath) property specifies a property name on the item to examine, that property on the item will be looked at next for a match.
222
+
A commit is attempted by an editable [BarComboBox](xref:@ActiproUIRoot.Controls.Bars.BarComboBox) when <kbd>Enter</kbd> is pressed while the control is focused, or the control's text changes and then focus is lost. As long as the `IsTextSearchEnabled` property is `true`, the commit logic will examine the gallery items and will look for an item that matches the typed text. `IsTextSearchCaseSensitive` determines whether a case-sensitive text search is made.
223
+
224
+
The attached `TextSearch.Text` property value from the gallery item (if it is a `DependencyObject`) will be examined first when looking for matches.
225
+
226
+
@if (avalonia) {
227
+
If no match is made on that, and the [TextMemberBinding](xref:@ActiproUIRoot.Controls.Bars.BarComboBox.TextMemberBinding) property specifies an `IBinding` to a property on the item to examine, that property on the item will be looked at next for a match.
228
+
}
229
+
@if (wpf) {
230
+
If no match is made on that, and the [TextPath](xref:@ActiproUIRoot.Controls.Bars.BarComboBox.TextPath) property specifies a property name on the item to examine, that property on the item will be looked at next for a match.
231
+
}
209
232
210
233
If a matching gallery item is located, the [Command](xref:@ActiproUIRoot.Controls.Bars.Primitives.BarGalleryBase.Command) is executed and is passed the matching gallery item as a command parameter.
0 commit comments