====== UI Controls ======

Overview of all available WvdS UI Controls for PXAML.

===== Quick Start =====

<code xml>
<!-- Simple form -->
<Window Title="My Form">
  <StackPanel Margin="10">
    <Label Text="Name:" />
    <TextEdit Text="{Binding Name}" />

    <Label Text="Email:" />
    <TextEdit Text="{Binding Email}" />

    <Button Caption="Save" OnClick="OnSaveClick" />
  </StackPanel>
</Window>
</code>

===== Control Categories =====

==== Basic Controls (12) ====

Fundamental UI elements.

| Control | Description | PXAML Example |
^ Label | Text display | ''<Label Text="Hello" />'' |
^ Button | Button | ''<Button Caption="OK" OnClick="..." />'' |
^ TextBox | Text field | ''<TextBox Text="{Binding Value}" />'' |
^ CheckBox | Checkbox | ''<CheckBox Content="Active" IsChecked="{Binding Active}" />'' |
^ RadioButton | Option button | ''<RadioButton Content="Option A" GroupName="g1" />'' |
^ Image | Image display | ''<Image Source="logo.png" />'' |
^ ProgressBar | Progress | ''<ProgressBar Value="{Binding Progress}" />'' |
^ Slider | Slider | ''<Slider Value="{Binding Volume}" />'' |
^ ToggleButton | On/Off | ''<ToggleButton IsChecked="{Binding Mode}" />'' |
^ Hyperlink | Link | ''<Hyperlink NavigateUri="..." Text="Click" />'' |
^ Border | Border | ''<Border BorderThickness="1">...</Border>'' |
^ Separator | Divider | ''<Separator />'' |

==== Editor Controls (18) ====

Input fields for various data types.

| Control | Description | PXAML Example |
^ TextEdit | Enhanced text field | ''<TextEdit Text="{Binding Search}" ShowClearButton="True" />'' |
^ MemoEdit | Multi-line | ''<MemoEdit Text="{Binding Notes}" Lines="5" />'' |
^ SpinEdit | Numbers | ''<SpinEdit Value="{Binding Qty}" MinValue="1" MaxValue="100" />'' |
^ DateEdit | Date | ''<DateEdit Date="{Binding Birthday}" />'' |
^ TimeEdit | Time | ''<TimeEdit Time="{Binding Start}" />'' |
^ CalcEdit | Calculator | ''<CalcEdit Value="{Binding Price}" Prefix="$ " />'' |
^ ColorEdit | Color | ''<ColorEdit Color="{Binding Theme}" />'' |
^ MaskEdit | Mask | ''<MaskEdit EditMask="(000) 000-0000" />'' |
^ ComboBoxEdit | Dropdown | ''<ComboBoxEdit Items="A,B,C" SelectedItem="{Binding Choice}" />'' |
^ TokenEdit | Tags | ''<TokenEdit Tokens="{Binding Tags}" />'' |
^ RatingControl | Stars | ''<RatingControl Value="{Binding Rating}" ItemCount="5" />'' |

==== Navigation Controls (7) ====

Navigation and wizards.

| Control | Description | PXAML Example |
^ TabControl | Tabs | ''<TabControl><TabItem Header="Tab1">...</TabItem></TabControl>'' |
^ Accordion | Panels | ''<Accordion><AccordionItem Header="...">...</AccordionItem></Accordion>'' |
^ Breadcrumb | Path | ''<Breadcrumb Path="{Binding Path}" />'' |
^ Pager | Pages | ''<Pager CurrentPage="{Binding Page}" TotalPages="10" />'' |
^ Wizard | Wizard | ''<Wizard><WizardPage Title="Step 1">...</WizardPage></Wizard>'' |
^ NavBar | Navigation | ''<NavBar><NavBarItem Caption="Home" /></NavBar>'' |
^ TileControl | Tiles | ''<TileControl><Tile Caption="App" /></TileControl>'' |

==== Data Controls (10) ====

Data grids and lists.

| Control | Description | PXAML Example |
^ DataGrid | Table | ''<DataGrid ItemsSource="{Binding Data}" />'' |
^ TreeList | Tree | ''<TreeList ItemsSource="{Binding Tree}" />'' |
^ CardView | Cards | ''<CardView ItemsSource="{Binding Items}" />'' |
^ PivotGrid | Pivot | ''<PivotGrid DataSource="{Binding Sales}" />'' |

==== Chart Controls (16) ====

Charts and visualizations.

| Control | Description | PXAML Example |
^ Chart | Chart | ''<Chart><LineSeries ... /></Chart>'' |
^ Sparkline | Mini chart | ''<Sparkline Data="{Binding Trend}" />'' |
^ LineSeries | Line | ''<LineSeries ArgumentDataMember="X" ValueDataMember="Y" />'' |
^ BarSeries | Bar | ''<BarSeries ... />'' |
^ PieSeries | Pie | ''<PieSeries ... />'' |

==== Gauge Controls (10) ====

Gauges for SCADA/MES.

| Control | Description | PXAML Example |
^ CircularGauge | Circular | ''<CircularGauge Value="{Binding Speed}" Maximum="200" />'' |
^ LinearGauge | Linear | ''<LinearGauge Value="{Binding Temp}" />'' |
^ DigitalGauge | Digital | ''<DigitalGauge Value="{Binding Counter}" />'' |
^ StateIndicator | Traffic light | ''<StateIndicator State="{Binding Status}" />'' |
^ LED | LED | ''<LED IsOn="{Binding Connected}" />'' |
^ Thermometer | Temp | ''<Thermometer Value="{Binding Temp}" />'' |

==== Layout Controls (10) ====

Containers and layout.

| Control | Description | PXAML Example |
^ LayoutControl | Form | ''<LayoutControl><LayoutItem Label="...">...</LayoutItem></LayoutControl>'' |
^ SplitContainer | Splitter | ''<SplitContainer>...</SplitContainer>'' |
^ GroupControl | Group | ''<GroupControl Header="...">...</GroupControl>'' |
^ CollapsibleGroup | Collapsible | ''<CollapsibleGroup Header="...">...</CollapsibleGroup>'' |

==== Bars/Ribbon (10) ====

Menus and toolbars.

| Control | Description | PXAML Example |
^ RibbonControl | Ribbon | ''<RibbonControl><RibbonPage>...</RibbonPage></RibbonControl>'' |
^ BarManager | Menus | ''<BarManager>...</BarManager>'' |
^ StatusBar | Status | ''<StatusBar><StatusBarItem>...</StatusBarItem></StatusBar>'' |
^ PopupMenu | Context | ''<PopupMenu>...</PopupMenu>'' |

==== Specialized (15) ====

Specialized components.

| Control | Description | PXAML Example |
^ Scheduler | Calendar | ''<Scheduler DataSource="{Binding Appointments}" />'' |
^ RichEditControl | Word | ''<RichEditControl Document="{Binding Doc}" />'' |
^ SpreadsheetControl | Excel | ''<SpreadsheetControl />'' |
^ MapControl | Map | ''<MapControl CenterPoint="..." />'' |
^ PdfViewer | PDF | ''<PdfViewer DocumentSource="{Binding Path}" />'' |

===== Installation =====

See [[.:controls-installation|Installing Controls]].

===== Further Reading =====

  * [[.:designer|UI Designer]] - Visual design
  * [[..:i:control-bibliothek|Developer: Control Library]] - Complete API