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

Panoramica di tutti i controlli UI WvdS disponibili per PXAML.

===== Avvio rapido =====

<code xml>
<!-- 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>
</code>

===== 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 [[.:controls-installation|Installare i controls]].

===== Approfondimenti =====

  * [[.:designer|UI Designer]] - Progettazione visuale
  * [[..:i:control-bibliothek|Sviluppatori: Libreria controlli]] - API completa