UI Controls

Panoramica di tutti i controlli UI WvdS disponibili per PXAML.

Avvio rapido

<!-- Form semplice -->
<Window Title="Il mio form">
  <StackPanel Margin="10">
    <Label Text="Nome:" />
    <TextEdit Text="{Binding Name}" />
 
    <Label Text="Email:" />
    <TextEdit Text="{Binding Email}" />
 
    <Button Caption="Salva" OnClick="OnSaveClick" />
  </StackPanel>
</Window>

Categorie di controlli

Basic Controls (12)

Elementi UI fondamentali.

Controllo	Descrizione	Esempio PXAML
Label	Visualizzazione testo	`<Label Text=„Hello“ />`
Button	Pulsante	`<Button Caption=„OK“ OnClick=„…“ />`
TextBox	Campo di testo	`<TextBox Text=„{Binding Value}“ />`
CheckBox	Casella di controllo	`<CheckBox Content=„Attivo“ IsChecked=„{Binding Active}“ />`
RadioButton	Pulsante opzione	`<RadioButton Content=„Opzione A“ GroupName=„g1“ />`
Image	Visualizzazione immagine	`<Image Source=„logo.png“ />`
ProgressBar	Barra di avanzamento	`<ProgressBar Value=„{Binding Progress}“ />`
Slider	Cursore	`<Slider Value=„{Binding Volume}“ />`
ToggleButton	On/Off	`<ToggleButton IsChecked=„{Binding Mode}“ />`
Hyperlink	Link	`<Hyperlink NavigateUri=„…“ Text=„Clicca“ />`
Border	Bordo	`<Border BorderThickness=„1“>…</Border>`
Separator	Linea separatrice	`<Separator />`

Editor Controls (18)

Campi di input per vari tipi di dati.

Controllo	Descrizione	Esempio PXAML
TextEdit	Campo di testo avanzato	`<TextEdit Text=„{Binding Search}“ ShowClearButton=„True“ />`
MemoEdit	Multiriga	`<MemoEdit Text=„{Binding Notes}“ Lines=„5“ />`
SpinEdit	Numeri	`<SpinEdit Value=„{Binding Qty}“ MinValue=„1“ MaxValue=„100“ />`
DateEdit	Data	`<DateEdit Date=„{Binding Birthday}“ />`
TimeEdit	Ora	`<TimeEdit Time=„{Binding Start}“ />`
CalcEdit	Calcolatrice	`<CalcEdit Value=„{Binding Price}“ Prefix=„€ “ />`
ColorEdit	Colore	`<ColorEdit Color=„{Binding Theme}“ />`
MaskEdit	Maschera	`<MaskEdit EditMask=„(000) 000-0000“ />`
ComboBoxEdit	Dropdown	`<ComboBoxEdit Items=„A,B,C“ SelectedItem=„{Binding Choice}“ />`
TokenEdit	Tag	`<TokenEdit Tokens=„{Binding Tags}“ />`
RatingControl	Stelle	`<RatingControl Value=„{Binding Rating}“ ItemCount=„5“ />`

Navigation Controls (7)

Navigazione e assistenti.

Controllo	Descrizione	Esempio PXAML
TabControl	Tab	`<TabControl><TabItem Header=„Tab1“>…</TabItem></TabControl>`
Accordion	Pannelli	`<Accordion><AccordionItem Header=„…“>…</AccordionItem></Accordion>`
Breadcrumb	Percorso	`<Breadcrumb Path=„{Binding Path}“ />`
Pager	Pagine	`<Pager CurrentPage=„{Binding Page}“ TotalPages=„10“ />`
Wizard	Assistente	`<Wizard><WizardPage Title=„Passo 1“>…</WizardPage></Wizard>`
NavBar	Navigazione	`<NavBar><NavBarItem Caption=„Home“ /></NavBar>`
TileControl	Tile	`<TileControl><Tile Caption=„App“ /></TileControl>`

Data Controls (10)

Griglie dati e liste.

Controllo	Descrizione	Esempio PXAML
DataGrid	Tabella	`<DataGrid ItemsSource=„{Binding Data}“ />`
TreeList	Albero	`<TreeList ItemsSource=„{Binding Tree}“ />`
CardView	Schede	`<CardView ItemsSource=„{Binding Items}“ />`
PivotGrid	Pivot	`<PivotGrid DataSource=„{Binding Sales}“ />`

Chart Controls (16)

Grafici e visualizzazioni.

Controllo	Descrizione	Esempio PXAML
Chart	Grafico	`<Chart><LineSeries … /></Chart>`
Sparkline	Mini-chart	`<Sparkline Data=„{Binding Trend}“ />`
LineSeries	Linea	`<LineSeries ArgumentDataMember=„X“ ValueDataMember=„Y“ />`
BarSeries	Barre	`<BarSeries … />`
PieSeries	Torta	`<PieSeries … />`

Gauge Controls (10)

Indicatori di misura per SCADA/MES.

Controllo	Descrizione	Esempio PXAML
CircularGauge	Circolare	`<CircularGauge Value=„{Binding Speed}“ Maximum=„200“ />`
LinearGauge	Lineare	`<LinearGauge Value=„{Binding Temp}“ />`
DigitalGauge	Digitale	`<DigitalGauge Value=„{Binding Counter}“ />`
StateIndicator	Semaforo	`<StateIndicator State=„{Binding Status}“ />`
LED	LED	`<LED IsOn=„{Binding Connected}“ />`
Thermometer	Temperatura	`<Thermometer Value=„{Binding Temp}“ />`

Layout Controls (10)

Container e layout.

Controllo	Descrizione	Esempio PXAML
LayoutControl	Form	`<LayoutControl><LayoutItem Label=„…“>…</LayoutItem></LayoutControl>`
SplitContainer	Divisore	`<SplitContainer>…</SplitContainer>`
GroupControl	Gruppo	`<GroupControl Header=„…“>…</GroupControl>`
CollapsibleGroup	Comprimibile	`<CollapsibleGroup Header=„…“>…</CollapsibleGroup>`

Bars/Ribbon (10)

Menu e toolbar.

Controllo	Descrizione	Esempio PXAML
RibbonControl	Ribbon	`<RibbonControl><RibbonPage>…</RibbonPage></RibbonControl>`
BarManager	Menu	`<BarManager>…</BarManager>`
StatusBar	Stato	`<StatusBar><StatusBarItem>…</StatusBarItem></StatusBar>`
PopupMenu	Contestuale	`<PopupMenu>…</PopupMenu>`

Specialized (15)

Componenti specializzati.

Controllo	Descrizione	Esempio PXAML
Scheduler	Calendario	`<Scheduler DataSource=„{Binding Appointments}“ />`
RichEditControl	Word	`<RichEditControl Document=„{Binding Doc}“ />`
SpreadsheetControl	Excel	`<SpreadsheetControl />`
MapControl	Mappa	`<MapControl CenterPoint=„…“ />`
PdfViewer	PDF	`<PdfViewer DocumentSource=„{Binding Path}“ />`

Installazione

Vedere Installare i controls.

Approfondimenti

UI Designer - Progettazione visuale
Sviluppatori: Libreria controlli - API completa

Inhaltsverzeichnis