====== Control Library ====== Complete catalog of all 108 WvdS UI Controls. All controls follow the [[.:control-architektur|Properties/ViewInfo/Control Pattern]] and are DevExpress-inspired. ===== Overview ===== | Category | Count | Description | ^ [[.:#basic_controls|Basic]] | 12 | Basic UI elements | ^ [[.:#editor_controls|Editors]] | 18 | Input and edit fields | ^ [[.:#navigation_controls|Navigation]] | 7 | Navigation and tabs | ^ [[.:#data_controls|Data]] | 10 | Data views and grids | ^ [[.:#chart_controls|Charts]] | 16 | Charts and visualizations | ^ [[.:#gauge_controls|Gauges]] | 10 | Gauges and indicators | ^ [[.:#layout_controls|Layout]] | 10 | Containers and layout managers | ^ [[.:#bars_ribbon|Bars/Ribbon]] | 10 | Menus, toolbars, ribbon | ^ [[.:#specialized_controls|Specialized]] | 15 | Specialized components | ^ **Total** | **108** | | ===== Basic Controls ===== Basic UI elements for every application. | Control | DX Equivalent | Description | API | ^ TWvdSLabel | TcxLabel | Text display | [[.:api-controls-basic#twvdslabel|API]] | ^ TWvdSButton | TcxButton | Button | [[.:api-controls-basic#twvdsbutton|API]] | ^ TWvdSTextBox | TcxTextEdit | Simple text field | [[.:api-controls-basic#twvdstextbox|API]] | ^ TWvdSCheckBox | TcxCheckBox | Checkbox | [[.:api-controls-basic#twvdscheckbox|API]] | ^ TWvdSRadioButton | TcxRadioButton | Radio button | [[.:api-controls-basic#twvdsradiobutton|API]] | ^ TWvdSImage | TcxImage | Image display | [[.:api-controls-basic#twvdsimage|API]] | ^ TWvdSProgressBar | TcxProgressBar | Progress indicator | [[.:api-controls-basic#twvdsprogressbar|API]] | ^ TWvdSSlider | TcxTrackBar | Slider | [[.:api-controls-basic#twvdsslider|API]] | ^ TWvdSToggleButton | TcxToggleSwitch | On/Off switch | [[.:api-controls-basic#twvdstogglebutton|API]] | ^ TWvdSHyperlink | TcxHyperLinkEdit | Hyperlink | [[.:api-controls-basic#twvdshyperlink|API]] | ^ TWvdSBorder | TcxGroupBox | Border/Frame | [[.:api-controls-basic#twvdsborder|API]] | ^ TWvdSSeparator | TcxSplitter | Separator line | [[.:api-controls-basic#twvdsseparator|API]] | ===== Editor Controls ===== Input and edit fields for various data types. | Control | DX Equivalent | Description | API | ^ TWvdSTextEdit | TcxTextEdit | Extended text field | [[.:api-controls-editors#twvdstextedit|API]] | ^ TWvdSMemoEdit | TcxMemo | Multi-line text | [[.:api-controls-editors#twvdsmemoedit|API]] | ^ TWvdSSpinEdit | TcxSpinEdit | Number input with spinner | [[.:api-controls-editors#twvdsspinedit|API]] | ^ TWvdSDateEdit | TcxDateEdit | Date picker | [[.:api-controls-editors#twvdsdateedit|API]] | ^ TWvdSTimeEdit | TcxTimeEdit | Time picker | [[.:api-controls-editors#twvdstimeedit|API]] | ^ TWvdSDateTimeEdit | TcxDateTimeEdit | Date+Time picker | [[.:api-controls-editors#twvdsdatetimeedit|API]] | ^ TWvdSCalcEdit | TcxCalcEdit | Calculator editor | [[.:api-controls-editors#twvdscalcedit|API]] | ^ TWvdSColorEdit | TcxColorEdit | Color picker | [[.:api-controls-editors#twvdscoloredit|API]] | ^ TWvdSMaskEdit | TcxMaskEdit | Masked input | [[.:api-controls-editors#twvdsmaskedit|API]] | ^ TWvdSRichEdit | TcxRichEdit | Formatted text | [[.:api-controls-editors#twvdsrichedit|API]] | ^ TWvdSTokenEdit | TcxTokenEdit | Token/Tag input | [[.:api-controls-editors#twvdstokenedit|API]] | ^ TWvdSComboBoxEdit | TcxComboBox | Dropdown list | [[.:api-controls-editors#twvdscomboboxedit|API]] | ^ TWvdSLookupEdit | TcxLookupComboBox | Lookup dropdown | [[.:api-controls-editors#twvdslookupedit|API]] | ^ TWvdSCheckedComboBox | TcxCheckedComboBox | Multi-select dropdown | [[.:api-controls-editors#twvdscheckedcombobox|API]] | ^ TWvdSMRUEdit | TcxMRUEdit | Most Recently Used | [[.:api-controls-editors#twvdsmruedit|API]] | ^ TWvdSPopupEdit | TcxPopupEdit | Popup editor | [[.:api-controls-editors#twvdspopupedit|API]] | ^ TWvdSRatingControl | TcxRatingControl | Star rating | [[.:api-controls-editors#twvdsratingcontrol|API]] | ^ TWvdSRangeTrackBar | TcxRangeTrackBar | Range slider | [[.:api-controls-editors#twvdsrangetrackbar|API]] | ===== Navigation Controls ===== Navigation, tabs and wizard controls. | Control | DX Equivalent | Description | API | ^ TWvdSTabControl | TcxTabControl | Tab control | [[.:api-controls-navigation#twvdstabcontrol|API]] | ^ TWvdSAccordion | TdxAccordionControl | Accordion panel | [[.:api-controls-navigation#twvdsaccordion|API]] | ^ TWvdSBreadcrumb | TdxBreadcrumbEdit | Breadcrumb navigation | [[.:api-controls-navigation#twvdsbreadcrumb|API]] | ^ TWvdSPager | TcxDataNavigator | Page navigation | [[.:api-controls-navigation#twvdspager|API]] | ^ TWvdSWizard | TdxWizardControl | Wizard/Assistant | [[.:api-controls-navigation#twvdswizard|API]] | ^ TWvdSNavBar | TdxNavBar | Navigation bar | [[.:api-controls-navigation#twvdsnavbar|API]] | ^ TWvdSTileControl | TdxTileControl | Tile navigation | [[.:api-controls-navigation#twvdstilecontrol|API]] | ===== Data Controls ===== Data views for lists, tables and hierarchical data. | Control | DX Equivalent | Description | API | ^ TWvdSDataGrid | TcxGrid | Data grid | [[.:api-controls-data#twvdsdatagrid|API]] | ^ TWvdSTreeList | TcxTreeList | Hierarchical list | [[.:api-controls-data#twvdstreelist|API]] | ^ TWvdSCardView | TcxGridCardView | Card view | [[.:api-controls-data#twvdscardview|API]] | ^ TWvdSPivotGrid | TcxPivotGrid | Pivot table | [[.:api-controls-data#twvdspivotgrid|API]] | ^ TWvdSVerticalGrid | TcxVerticalGrid | Vertical grid | [[.:api-controls-data#twvdsverticalgrid|API]] | ^ TWvdSBandedGridView | TcxGridBandedView | Banded columns | [[.:api-controls-data#twvdsbandedgridview|API]] | ^ TWvdSLayoutView | TcxGridLayoutView | Layout view | [[.:api-controls-data#twvdslayoutview|API]] | ^ TWvdSWinExplorerView | TcxGridWinExplorerView | Explorer view | [[.:api-controls-data#twvdswinexplorerview|API]] | ^ TWvdSTileView | TcxGridTileView | Tile view | [[.:api-controls-data#twvdstileview|API]] | ^ TWvdSServerModeSource | TcxServerModeSource | Server-mode data | [[.:api-controls-data#twvdsservermodesource|API]] | ===== Chart Controls ===== Charts and data visualizations. | Control | DX Equivalent | Description | API | ^ TWvdSChart | TcxChart | Base chart | [[.:api-controls-charts#twvdschart|API]] | ^ TWvdSSparkline | TdxSparkline | Sparkline | [[.:api-controls-charts#twvdssparkline|API]] | ^ TWvdSLineSeries | TcxLineSeries | Line chart | [[.:api-controls-charts#twvdslineseries|API]] | ^ TWvdSAreaSeries | TcxAreaSeries | Area chart | [[.:api-controls-charts#twvdsareaseries|API]] | ^ TWvdSBarSeries | TcxBarSeries | Bar chart | [[.:api-controls-charts#twvdsbarseries|API]] | ^ TWvdSPieSeries | TcxPieSeries | Pie chart | [[.:api-controls-charts#twvdspieseries|API]] | ^ TWvdSFunnelSeries | TcxFunnelSeries | Funnel chart | [[.:api-controls-charts#twvdsfunnelseries|API]] | ^ TWvdSScatterSeries | TcxScatterSeries | Scatter chart | [[.:api-controls-charts#twvdsscatterseries|API]] | ^ TWvdSBubbleSeries | TcxBubbleSeries | Bubble chart | [[.:api-controls-charts#twvdsbubbleseries|API]] | ^ TWvdSCandlestickSeries | TcxCandlestickSeries | Candlestick (Stock) | [[.:api-controls-charts#twvdscandlestickseries|API]] | ^ TWvdSRangeBarSeries | TcxRangeBarSeries | Range bar | [[.:api-controls-charts#twvdsrangebarseries|API]] | ^ TWvdSStackedBarSeries | TcxStackedBarSeries | Stacked bar | [[.:api-controls-charts#twvdsstackedbarseries|API]] | ^ TWvdSRadarSeries | TcxRadarSeries | Radar chart | [[.:api-controls-charts#twvdsradarseries|API]] | ^ TWvdSTreeMapSeries | TcxTreeMapSeries | TreeMap | [[.:api-controls-charts#twvdstreemapseries|API]] | ^ TWvdSSankeyDiagram | TdxSankeyDiagram | Sankey diagram | [[.:api-controls-charts#twvdssankeydiagram|API]] | ^ TWvdSWaterfallSeries | TcxWaterfallSeries | Waterfall chart | [[.:api-controls-charts#twvdswaterfallseries|API]] | ===== Gauge Controls ===== Gauges, indicators and visualizations. | Control | DX Equivalent | Description | API | ^ TWvdSCircularGauge | TdxCircularGauge | Circular gauge | [[.:api-controls-gauges#twvdscirculargauge|API]] | ^ TWvdSLinearGauge | TdxLinearGauge | Linear gauge | [[.:api-controls-gauges#twvdslineargauge|API]] | ^ TWvdSDigitalGauge | TdxDigitalGauge | Digital gauge | [[.:api-controls-gauges#twvdsdigitalgauge|API]] | ^ TWvdSStateIndicator | TdxStateIndicator | State indicator | [[.:api-controls-gauges#twvdsstateindicator|API]] | ^ TWvdSLED | TdxLED | LED indicator | [[.:api-controls-gauges#twvdsled|API]] | ^ TWvdSArcScaleGauge | TdxArcScaleGauge | Arc scale | [[.:api-controls-gauges#twvdsarcscalegauge|API]] | ^ TWvdSScaleIndicator | TdxScaleIndicator | Scale indicator | [[.:api-controls-gauges#twvdsscaleindicator|API]] | ^ TWvdSLevelBar | TdxLevelBar | Level indicator | [[.:api-controls-gauges#twvdslevelbar|API]] | ^ TWvdSProgressGauge | TdxProgressGauge | Progress gauge | [[.:api-controls-gauges#twvdsprogressgauge|API]] | ^ TWvdSThermometer | TdxThermometer | Thermometer | [[.:api-controls-gauges#twvdsthermometer|API]] | ===== Layout Controls ===== Containers and layout management. | Control | DX Equivalent | Description | API | ^ TWvdSLayoutControl | TdxLayoutControl | Layout manager | [[.:api-controls-layout#twvdslayoutcontrol|API]] | ^ TWvdSDockingManager | TdxDockingManager | Docking system | [[.:api-controls-layout#twvdsdockingmanager|API]] | ^ TWvdSSplitContainer | TcxSplitter | Split container | [[.:api-controls-layout#twvdssplitcontainer|API]] | ^ TWvdSGroupControl | TcxGroupBox | Group container | [[.:api-controls-layout#twvdsgroupcontrol|API]] | ^ TWvdSXtraScrollBox | TcxScrollBox | Scroll container | [[.:api-controls-layout#twvdsxtrascrollbox|API]] | ^ TWvdSFlowLayoutPanel | TdxFlowLayoutControl | Flow layout | [[.:api-controls-layout#twvdsflowlayoutpanel|API]] | ^ TWvdSTableLayoutPanel | TdxTableLayoutControl | Table layout | [[.:api-controls-layout#twvdstablelayoutpanel|API]] | ^ TWvdSPopupContainer | TdxPopupEdit | Popup container | [[.:api-controls-layout#twvdspopupcontainer|API]] | ^ TWvdSCardControl | TdxCardControl | Card container | [[.:api-controls-layout#twvdscardcontrol|API]] | ^ TWvdSCollapsibleGroup | TdxLayoutGroup | Collapsible group | [[.:api-controls-layout#twvdscollapsiblegroup|API]] | ===== Bars/Ribbon ===== Menu bars, toolbars and ribbon interfaces. | Control | DX Equivalent | Description | API | ^ TWvdSBarManager | TdxBarManager | Menu manager | [[.:api-controls-bars#twvdsbarmanager|API]] | ^ TWvdSRibbonControl | TdxRibbonControl | Ribbon control | [[.:api-controls-bars#twvdsribboncontrol|API]] | ^ TWvdSRibbonPage | TdxRibbonTab | Ribbon page | [[.:api-controls-bars#twvdsribbonpage|API]] | ^ TWvdSRibbonGroup | TdxRibbonGroup | Ribbon group | [[.:api-controls-bars#twvdsribbongroup|API]] | ^ TWvdSBarButton | TdxBarButton | Toolbar button | [[.:api-controls-bars#twvdsbarbutton|API]] | ^ TWvdSBarSubItem | TdxBarSubItem | Submenu | [[.:api-controls-bars#twvdsbarsubitem|API]] | ^ TWvdSBarEditItem | TdxBarEditItem | Editor in toolbar | [[.:api-controls-bars#twvdsbaredititem|API]] | ^ TWvdSStatusBar | TdxStatusBar | Status bar | [[.:api-controls-bars#twvdsstatusbar|API]] | ^ TWvdSAlertControl | TdxAlertWindow | Notifications | [[.:api-controls-bars#twvdsalertcontrol|API]] | ^ TWvdSPopupMenu | TdxBarPopupMenu | Context menu | [[.:api-controls-bars#twvdspopupmenu|API]] | ===== Specialized Controls ===== Specialized components for complex use cases. | Control | DX Equivalent | Description | API | ^ TWvdSScheduler | TcxScheduler | Calendar/Scheduler | [[.:api-controls-specialized#twvdsscheduler|API]] | ^ TWvdSRichEditControl | TdxRichEditControl | Word processor | [[.:api-controls-specialized#twvdsricheditcontrol|API]] | ^ TWvdSSpreadsheetControl | TdxSpreadsheet | Spreadsheet | [[.:api-controls-specialized#twvdsspreadsheetcontrol|API]] | ^ TWvdSMapControl | TdxMapControl | Map display | [[.:api-controls-specialized#twvdsmapcontrol|API]] | ^ TWvdSDiagramControl | TdxDiagramControl | Diagram editor | [[.:api-controls-specialized#twvdsdiagramcontrol|API]] | ^ TWvdSPdfViewer | TdxPDFViewer | PDF viewer | [[.:api-controls-specialized#twvdspdfviewer|API]] | ^ TWvdSImageGallery | TdxImageGallery | Image gallery | [[.:api-controls-specialized#twvdsimagegallery|API]] | ^ TWvdSSpellChecker | TdxSpellChecker | Spell checker | [[.:api-controls-specialized#twvdsspellchecker|API]] | ^ TWvdSFilterControl | TcxFilterControl | Filter builder | [[.:api-controls-specialized#twvdsfiltercontrol|API]] | ^ TWvdSExpressionEditor | TcxExpressionEditor | Formula editor | [[.:api-controls-specialized#twvdsexpressioneditor|API]] | ^ TWvdSPropertyGridControl | TcxVerticalGrid | Property grid | [[.:api-controls-specialized#twvdspropertygridcontrol|API]] | ^ TWvdSSearchControl | TdxSearchControl | Search field | [[.:api-controls-specialized#twvdssearchcontrol|API]] | ^ TWvdSRangeControl | TdxRangeControl | Range selector | [[.:api-controls-specialized#twvdsrangecontrol|API]] | ^ TWvdSZoomTrackBar | TdxZoomTrackBar | Zoom slider | [[.:api-controls-specialized#twvdszoomtrackbar|API]] | ^ TWvdSMarkupEdit | TdxMarkupEdit | Markup editor | [[.:api-controls-specialized#twvdsmarkupedit|API]] | ===== Target Support ===== | Target | Description | Status | ^ TUI | Terminal UI (FPC native) | Complete | ^ GUI | Desktop (LCL/WinAPI) | Planned | ^ Web | Browser (pas2js/PWA) | Planned | ===== See Also ===== * [[.:control-architektur|Control Architecture]] * [[.:control-vsix-erstellen|Create VSIX Extension]] * [[.:control-generierung|Control Generation]] * [[..:p:controls|Controls for Users]]