UI Controls

Overview of all available WvdS UI Controls for PXAML.

Quick Start

<!-- 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>

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 Installing Controls.

Inhaltsverzeichnis