Skip to content

Commit 0aec41c

Browse files
DinkoKDinkoK
committed
UIA: DropDownList, ListControl, TimeOnlyPicker(Update Images)
1 parent 38b6e0a commit 0aec41c

16 files changed

+305
-26
lines changed

‎controls/dropdown-listcontrol-and-checkeddropdownlist/dropdownlist/ui-automation.md‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
---
2+
title: UI Automation Support (UI Accessibility)
3+
page_title: UI Automation Support (UI Accessibility) - RadDropDownList
4+
description: UI Automation Support (UI Accessibility) for RadDropDownList.
5+
slug: dropdown-listcontrol-and-checkeddropdownlist-dropdownlist-ui-automation
6+
tags: raddropdownlist,ui,automation
7+
published: True
8+
position: 16
9+
---
10+
11+
# UI Automation Support
12+
13+
With the Q4 2024 version of our controls, RadDropDownList supports UI Automation. The current implementation of UI Automation for RadDropDownList is similar to the MS WinForms ComboBox implementation with some extended functionality. The main goal of this implementation is to ensure compliance with accessibility standards and to provide a common practice for automated testing.
14+
15+
This functionality is enabled by default. To disable it, you can set the __EnableUIAutomation__ property to false.
16+
17+
18+
````C#
19+
20+
this.radDropDownList1.EnableUIAutomation = false;
21+
22+
````
23+
````VB.NET
24+
25+
Me.RadDropDownList1.EnableUIAutomation = False
26+
27+
````
28+
29+
## RadDropDownList
30+
31+
The table below outlines the __UI Automation__ properties most important for understanding and interacting with RadDropDownList control.
32+
33+
### RadDropDownList Available Properties
34+
35+
* AutomationElementIdentifiers.AutomationIdProperty.Id
36+
* AutomationElementIdentifiers.BoundingRectangleProperty.Id
37+
* AutomationElementIdentifiers.ControlTypeProperty => ControlType.ComboBox.Id
38+
* AutomationElementIdentifiers.LocalizedControlTypeProperty.Id => "comboBox"
39+
* AutomationElementIdentifiers.HelpTextProperty.Id
40+
* AutomationElementIdentifiers.IsContentElementProperty.Id
41+
* AutomationElementIdentifiers.IsControlElementProperty.Id
42+
* AutomationElementIdentifiers.IsKeyboardFocusableProperty.Id
43+
* AutomationElementIdentifiers.HasKeyboardFocusProperty.Id
44+
* AutomationElementIdentifiers.LabeledByProperty.Id
45+
* AutomationElementIdentifiers.NameProperty.Id
46+
* AutomationElementIdentifiers.IsValuePatternAvailableProperty.Id
47+
48+
### RadDropDownList Supported Control Patterns
49+
50+
The following section outlines the supported automation patterns for the __RadDropDownList__ control and its constituent elements.
51+
52+
* [Selection Control Pattern](https://learn.microsoft.com/en-us/windows/win32/winauto/uiauto-implementingselection)
53+
* [ExpandCollapse Control Pattern](https://learn.microsoft.com/en-us/windows/win32/winauto/uiauto-implementingexpandcollapse)
54+
* [Value Control Pattern](https://learn.microsoft.com/en-us/windows/win32/winauto/uiauto-implementingvalue)
55+
56+
## Editor or TextElement
57+
58+
The __DropDownStyle__ property of the control determines if direct text input is allowed inside the editor or not. When the style is set to DropDown we allow input which is handled by a hosted Microsoft TextBox control. In this case, the default TextBox implementation is responsible for handling UI Automation.
59+
60+
### Editor
61+
62+
The current implementation of UI Automation for the hosted Microsoft TextBox control is implemented as the UIA [Edit control type](https://learn.microsoft.com/en-us/windows/win32/winauto/uiauto-supporteditcontroltype)
63+
64+
### TextElement
65+
66+
The current implementation of UI Automation for the RadDropDownList TextElement control is implemented as the UIA [Text control type](https://learn.microsoft.com/en-us/windows/win32/winauto/uiauto-supporttextcontroltype)
67+
68+
#### TextElement Available Properties
69+
70+
* AutomationElementIdentifiers.AutomationIdProperty.Id
71+
* AutomationElementIdentifiers.BoundingRectangleProperty.Id
72+
* AutomationElementIdentifiers.ControlTypeProperty => ControlType.Text.Id
73+
* AutomationElementIdentifiers.LocalizedControlTypeProperty => "text"
74+
* AutomationElementIdentifiers.HelpTextProperty.Id
75+
* AutomationElementIdentifiers.IsContentElementProperty.Id
76+
* AutomationElementIdentifiers.IsControlElementProperty.Id
77+
* AutomationElementIdentifiers.IsKeyboardFocusableProperty.Id
78+
* AutomationElementIdentifiers.HasKeyboardFocusProperty.Id
79+
* AutomationElementIdentifiers.LabeledByProperty.Id
80+
* AutomationElementIdentifiers.NameProperty.Id
81+
82+
## RadArrowButtonElement
83+
84+
The current implementation of UI Automation for the RadArrowButtonElement control is implemented as the UIA [Button control type](https://learn.microsoft.com/en-us/windows/win32/winauto/uiauto-supportbuttoncontroltype)
85+
86+
### RadArrowButtonElement Available Properties
87+
88+
* AutomationElementIdentifiers.AutomationIdProperty.Id
89+
* AutomationElementIdentifiers.BoundingRectangleProperty.Id
90+
* AutomationElementIdentifiers.ControlTypeProperty => ControlType.Button.Id
91+
* AutomationElementIdentifiers.LocalizedControlTypeProperty => "button"
92+
* AutomationElementIdentifiers.HelpTextProperty.Id
93+
* AutomationElementIdentifiers.IsContentElementProperty.Id
94+
* AutomationElementIdentifiers.IsControlElementProperty.Id
95+
* AutomationElementIdentifiers.IsKeyboardFocusableProperty.Id
96+
* AutomationElementIdentifiers.HasKeyboardFocusProperty.Id
97+
* AutomationElementIdentifiers.LabeledByProperty.Id
98+
* AutomationElementIdentifiers.NameProperty.Id
99+
100+
### RadArrowButtonElement Supported Control Patterns
101+
102+
* [Invoke Control Pattern](https://learn.microsoft.com/en-us/windows/win32/winauto/uiauto-implementinginvoke)
103+
104+
## DropDownPopupForm
105+
106+
This is the popup that is responsible for the list of the items. This UI Automation Provider is implemented as a [IRawElementProviderFragmentRoot](https://learn.microsoft.com/en-us/dotnet/api/system.windows.automation.provider.irawelementproviderfragmentroot?view=windowsdesktop-8.0) with its parent being the provider of the RadDropDownList control. For more information about the actual implementation check the article of the [RadListControl UI Automation]({%slug dropdown-listcontrol-and-checkeddropdownlist-listcontrol-ui-automation%}) Provider.
107+
108+

‎controls/dropdown-listcontrol-and-checkeddropdownlist/listcontrol/ui-automation.md‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
---
2+
title: UI Automation Support (UI Accessibility)
3+
page_title: UI Automation Support (UI Accessibility) - RadListControl
4+
description: UI Automation Support (UI Accessibility) for RadListControl.
5+
slug: dropdown-listcontrol-and-checkeddropdownlist-listcontrol-ui-automation
6+
tags: navigationview,ui,automation
7+
published: True
8+
position: 10
9+
---
10+
11+
# UI Automation Support
12+
13+
With the Q4 2024 version of our controls, RadListControl supports UI Automation. The current implementation of UI Automation for RadListControl is similar to the [MS WinForms List](https://learn.microsoft.com/en-us/windows/win32/winauto/uiauto-supportlistcontroltype) implementation with some extended functionality. The main goal of this implementation is to ensure compliance with accessibility standards and to provide a common practice for automated testing.
14+
15+
This functionality is enabled by default. To disable it, you can set the __EnableUIAutomation__ property to false.
16+
17+
````C#
18+
19+
this.radListControl1.EnableUIAutomation = false;
20+
21+
````
22+
````VB.NET
23+
24+
Me.RadListControl1.EnableUIAutomation = False
25+
26+
````
27+
28+
## RadListControl
29+
30+
The table below outlines the __UI Automation__ properties most important for understanding and interacting with RadListControl control.
31+
32+
### RadListControl Available Properties
33+
34+
* AutomationElementIdentifiers.AutomationIdProperty.Id
35+
* AutomationElementIdentifiers.BoundingRectangleProperty.Id
36+
* AutomationElementIdentifiers.ControlTypeProperty => ControlType.List.Id
37+
* AutomationElementIdentifiers.LocalizedControlTypeProperty => "list"
38+
* AutomationElementIdentifiers.HelpTextProperty.Id
39+
* AutomationElementIdentifiers.IsContentElementProperty.Id
40+
* AutomationElementIdentifiers.IsControlElementProperty.Id
41+
* AutomationElementIdentifiers.IsKeyboardFocusableProperty.Id
42+
* AutomationElementIdentifiers.HasKeyboardFocusProperty.Id
43+
* AutomationElementIdentifiers.NameProperty.Id
44+
45+
### RadListControl Available Patterns
46+
47+
The following section outlines the supported automation patterns for the __RadListControl__ control and its constituent elements.
48+
49+
* [Selection Control Pattern](https://learn.microsoft.com/en-us/windows/win32/winauto/uiauto-implementingselection)
50+
* [Scroll Control Pattern](https://learn.microsoft.com/en-us/windows/win32/winauto/uiauto-implementingscroll)
51+
52+
## RadListDataItem
53+
54+
The current implementation of UI Automation for the RadListDataItem control is implemented as the UIA [ListItem control type](https://learn.microsoft.com/en-us/windows/win32/winauto/uiauto-supportlistitemcontroltype)
55+
56+
### RadListDataItem Available Properties
57+
58+
* AutomationElementIdentifiers.AutomationIdProperty.Id
59+
* AutomationElementIdentifiers.BoundingRectangleProperty.Id
60+
* AutomationElementIdentifiers.ControlTypeProperty => ControlType.List.Id
61+
* AutomationElementIdentifiers.LocalizedControlTypeProperty => "list"
62+
* AutomationElementIdentifiers.HelpTextProperty.Id
63+
* AutomationElementIdentifiers.IsContentElementProperty.Id
64+
* AutomationElementIdentifiers.IsControlElementProperty.Id
65+
* AutomationElementIdentifiers.IsKeyboardFocusableProperty.Id
66+
* AutomationElementIdentifiers.HasKeyboardFocusProperty.Id
67+
* AutomationElementIdentifiers.NameProperty.Id
68+
* AutomationElementIdentifiers.IsOffscreenProperty.Id
69+
70+
### RadListDataItem Available Patterns
71+
72+
* [Selection Control Pattern](https://learn.microsoft.com/en-us/windows/win32/winauto/uiauto-implementingselection)
73+
* [ScrollItem Control Pattern](https://learn.microsoft.com/en-us/windows/win32/winauto/uiauto-implementingscrollitem)
74+
75+
## RadScrollbarElement
76+
77+
The current implementation of UI Automation for the RadScrollbarElement control is implemented as the UIA [ScrollBar control type](https://learn.microsoft.com/en-us/windows/win32/winauto/uiauto-supportscrollbarcontroltype)
78+
79+
### RadScrollbarElement Available Properties
80+
81+
* AutomationElementIdentifiers.AutomationIdProperty.Id
82+
* AutomationElementIdentifiers.BoundingRectangleProperty.Id
83+
* AutomationElementIdentifiers.ControlTypeProperty => ControlType.ScrollBar.Id
84+
* AutomationElementIdentifiers.LocalizedControlTypeProperty => "scroll bar"
85+
* AutomationElementIdentifiers.HelpTextProperty.Id
86+
* AutomationElementIdentifiers.IsContentElementProperty.Id
87+
* AutomationElementIdentifiers.IsControlElementProperty.Id
88+
* AutomationElementIdentifiers.IsKeyboardFocusableProperty.Id
89+
* AutomationElementIdentifiers.NameProperty.Id
90+
* AutomationElementIdentifiers.OrientationProperty.Id
91+
92+
### RadScrollbarElement Available Patterns
93+
94+
* [RangeValue Control Pattern](https://learn.microsoft.com/en-us/windows/win32/winauto/uiauto-implementingrangevalue)
95+
96+
## ScrollBarButton
97+
98+
The current implementation of UI Automation for the ScrollBarButton control is implemented as the UIA [Button control type](https://learn.microsoft.com/en-us/windows/win32/winauto/uiauto-supportbuttoncontroltype)
99+
100+
### ScrollBarButton Available Properties
101+
102+
* AutomationElementIdentifiers.AutomationIdProperty.Id
103+
* AutomationElementIdentifiers.BoundingRectangleProperty.Id
104+
* AutomationElementIdentifiers.ControlTypeProperty => ControlType.Button.Id
105+
* AutomationElementIdentifiers.LocalizedControlTypeProperty => "button"
106+
* AutomationElementIdentifiers.HelpTextProperty.Id
107+
* AutomationElementIdentifiers.IsContentElementProperty.Id
108+
* AutomationElementIdentifiers.IsControlElementProperty.Id
109+
* AutomationElementIdentifiers.IsKeyboardFocusableProperty.Id
110+
* AutomationElementIdentifiers.NameProperty.Id
111+
112+
### ScrollBarButton Available Patterns
113+
114+
* [Invoke Control Pattern](https://learn.microsoft.com/en-us/windows/win32/winauto/uiauto-implementinginvoke)
115+
116+
## ScrollBarThumb
117+
118+
The current implementation of UI Automation for the ScrollBarThumb control is implemented as the UIA [ScrollBar control type](https://learn.microsoft.com/en-us/windows/win32/winauto/uiauto-supportscrollbarcontroltype)
119+
120+
### ScrollBarThumb Available Properties
121+
122+
* AutomationElementIdentifiers.AutomationIdProperty.Id
123+
* AutomationElementIdentifiers.BoundingRectangleProperty.Id
124+
* AutomationElementIdentifiers.ControlTypeProperty => ControlType.Thumb.Id
125+
* AutomationElementIdentifiers.LocalizedControlTypeProperty => "thumb"
126+
* AutomationElementIdentifiers.HelpTextProperty.Id
127+
* AutomationElementIdentifiers.IsContentElementProperty.Id
128+
* AutomationElementIdentifiers.IsControlElementProperty.Id
129+
* AutomationElementIdentifiers.IsKeyboardFocusableProperty.Id
130+
* AutomationElementIdentifiers.NameProperty.Id
131+
132+
### ScrollBarThumb Available Patterns
133+
134+
* [Transform Control Pattern](https://learn.microsoft.com/en-us/windows/win32/winauto/uiauto-implementingtransform)

‎controls/editors/dateonlypicker/images/dateonlypicker-smart-tag001.png‎

-789 Bytes
Loading

‎controls/editors/timeonlypicker/customizing-appearance/customizing-programatically.md‎

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -18,32 +18,32 @@ Each of the control's elements can be accessed and customized. At the [Structure
1818
For example the editable area of the control consist of __RadTextBoxItem__ hosted in __RadMaskedEditBoxElement__. So in order to customize the text box __BackColor__ you need to set both the __BackColor__ of the __RadTextBoxItem__ and of the __RadMaskedEditBoxElement__ `FillPrimitive`:
1919

2020
````C#
21-
radTimePicker1.TimePickerElement.MaskedEditBox.Fill.BackColor = Color.Red;
22-
radTimePicker1.TimePickerElement.MaskedEditBox.TextBoxItem.BackColor = Color.Red;
21+
this.radTimeOnlyPicker1.TimeOnlyPickerElement.MaskedEditBox.Fill.BackColor = Color.Red;
22+
this.radTimeOnlyPicker1.TimeOnlyPickerElement.MaskedEditBox.TextBoxItem.BackColor = Color.Red;
2323

2424
````
2525
````VB.NET
26-
RadTimePicker1.TimePickerElement.MaskedEditBox.Fill.BackColor = Color.Red
27-
RadTimePicker1.TimePickerElement.MaskedEditBox.TextBoxItem.BackColor = Color.Red
26+
Me.RadTimeOnlyPicker1.TimeOnlyPickerElement.MaskedEditBox.Fill.BackColor = Color.Red
27+
Me.RadTimeOnlyPicker1.TimeOnlyPickerElement.MaskedEditBox.TextBoxItem.BackColor = Color.Red
2828

2929
````
3030

31-
![WinForms RadTimeOnlyPicker Customize Text Box](images/editors-timepicker-customization001.png)
31+
![WinForms RadTimeOnlyPicker Customize Text Box](images/editors-timeonlypicker-customization001.png)
3232

3333
## Customize Dropdown Button
3434

3535
Here is how you can set some left and right padding of the drop down button:
3636

3737
````C#
38-
radTimePicker1.TimePickerElement.DropDownButton.Padding = new Padding(10,0,10,0);
38+
this.radTimeOnlyPicker1.TimeOnlyPickerElement.DropDownButton.Padding = new Padding(10, 0, 10, 0);
3939

4040
````
4141
````VB.NET
42-
RadTimePicker1.TimePickerElement.DropDownButton.Padding = New Windows.Forms.Padding(10, 0, 10, 0)
42+
Me.RadTimeOnlyPicker1.TimeOnlyPickerElement.DropDownButton.Padding = New Windows.Forms.Padding(10, 0, 10, 0)
4343

4444
````
4545

46-
![WinForms RadTimeOnlyPicker Customize DropDown Button](images/editors-timepicker-customization002.png)
46+
![WinForms RadTimeOnlyPicker Customize DropDown Button](images/editors-timeonlypicker-customization002.png)
4747

4848
## Customize up/down buttons
4949

@@ -70,7 +70,7 @@ Me.RadTimeOnlyPicker1.TimeOnlyPickerElement.DownButton.Border.Visibility = Eleme
7070
````
7171

7272

73-
![WinForms RadTimeOnlyPicker Customize Up/Down Buttons](images/editors-timepicker-customization003.png)
73+
![WinForms RadTimeOnlyPicker Customize Up/Down Buttons](images/editors-timeonlypicker-customization003.png)
7474

7575
## Customize clock element appearance
7676

@@ -99,7 +99,7 @@ Me.RadTimeOnlyPicker1.TimeOnlyPickerElement.PopupContentElement.ClockElement.Sec
9999

100100
{{endregion}}
101101

102-
![WinForms RadTimeOnlyPicker Customize Clock Element Appearance](images/editors-timepicker-customization004.png)
102+
![WinForms RadTimeOnlyPicker Customize Clock Element Appearance](images/editors-timeonlypicker-customization004.png)
103103

104104
## Customize hours and minutes headers
105105

@@ -129,7 +129,7 @@ Me.RadTimeOnlyPicker1.TimeOnlyPickerElement.PopupContentElement.MinutesTable.Tab
129129

130130
````
131131

132-
![WinForms RadTimeOnlyPicker Customize Hours and Minutes Headers](images/editors-timepicker-customization005.png)
132+
![WinForms RadTimeOnlyPicker Customize Hours and Minutes Headers](images/editors-timeonlypicker-customization005.png)
133133

134134
## Customize hours and minutes cells appearance
135135

@@ -168,7 +168,7 @@ End Sub
168168

169169
````
170170

171-
![WinForms RadTimeOnlyPicker Customize Hours and Minutes Cells Appearance](images/editors-timepicker-customization006.png)
171+
![WinForms RadTimeOnlyPicker Customize Hours and Minutes Cells Appearance](images/editors-timeonlypicker-customization006.png)
172172

173173
## Customize hours and minutes tables
174174

@@ -199,27 +199,23 @@ Me.RadTimeOnlyPicker1.TimeOnlyPickerElement.PopupContentElement.MinutesTable.Bac
199199

200200
{{endregion}}
201201

202-
![WinForms RadDateTimePicker Customize Hours and Minutes Tables](images/editors-timepicker-customization007.png)
202+
![WinForms RadTimeOnlyPicker Customize Hours and Minutes Tables](images/editors-timeonlypicker-customization007.png)
203203

204204
## Customize Button Panel
205205

206206
Here is how to change the BackColor of the FooterPanel:
207207

208-
{{source=..\SamplesCS\Editors\TimePicker1.cs region=CustomizeFooterPanel}}
209-
{{source=..\SamplesVB\Editors\TimePicker1.vb region=CustomizeFooterPanel}}
210-
211208
````C#
212-
radTimePicker1.TimePickerElement.PopupContentElement.FooterPanel.BackColor = Color.BlanchedAlmond;
209+
this.radTimeOnlyPicker1.TimeOnlyPickerElement.PopupContentElement.FooterPanel.BackColor = Color.BlanchedAlmond;
213210

214211
````
215212
````VB.NET
216-
RadTimePicker1.TimePickerElement.PopupContentElement.FooterPanel.BackColor = Color.BlanchedAlmond
213+
Me.RadTimeOnlyPicker1.TimeOnlyPickerElement.PopupContentElement.FooterPanel.BackColor = Color.BlanchedAlmond
217214

218215
````
219216

220-
{{endregion}}
221217

222-
![WinForms RadDateTimePicker Customize Button Panel](images/editors-timepicker-customization008.png)
218+
![WinForms RadTimeOnlyPicker Customize Button Panel](images/editors-timeonlypicker-customization008.png)
223219

224220
## See Also
225221

‎controls/editors/timeonlypicker/customizing-appearance/images/editors-timeonlypicker-customization001.png‎

1.34 KB
Loading

‎controls/editors/timeonlypicker/customizing-appearance/images/editors-timeonlypicker-customization002.png‎

1.31 KB
Loading

‎controls/editors/timeonlypicker/customizing-appearance/images/editors-timepicker-customization003.png‎ renamed to ‎controls/editors/timeonlypicker/customizing-appearance/images/editors-timeonlypicker-customization003.png‎

File renamed without changes.

‎controls/editors/timeonlypicker/customizing-appearance/images/editors-timepicker-customization004.png‎ renamed to ‎controls/editors/timeonlypicker/customizing-appearance/images/editors-timeonlypicker-customization004.png‎

File renamed without changes.

‎controls/editors/timeonlypicker/customizing-appearance/images/editors-timepicker-customization005.png‎ renamed to ‎controls/editors/timeonlypicker/customizing-appearance/images/editors-timeonlypicker-customization005.png‎

File renamed without changes.

‎controls/editors/timeonlypicker/customizing-appearance/images/editors-timepicker-customization006.png‎ renamed to ‎controls/editors/timeonlypicker/customizing-appearance/images/editors-timeonlypicker-customization006.png‎

File renamed without changes.

0 commit comments

Comments
 (0)