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

Pregled svih dostupnih WvdS UI kontrola za PXAML.

===== Brzi početak =====

<code xml>
<!-- Jednostavna forma -->
<Window Title="Moja forma">
  <StackPanel Margin="10">
    <Label Text="Ime:" />
    <TextEdit Text="{Binding Name}" />

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

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

===== Kategorije kontrola =====

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

Osnovni UI elementi.

| Kontrola | Opis | PXAML primjer |
^ Label | Prikaz teksta | ''<Label Text="Hello" />'' |
^ Button | Gumb | ''<Button Caption="OK" OnClick="..." />'' |
^ TextBox | Tekstualno polje | ''<TextBox Text="{Binding Value}" />'' |
^ CheckBox | Potvrdni okvir | ''<CheckBox Content="Aktivno" IsChecked="{Binding Active}" />'' |
^ RadioButton | Opcijski gumb | ''<RadioButton Content="Opcija A" GroupName="g1" />'' |
^ Image | Prikaz slike | ''<Image Source="logo.png" />'' |
^ ProgressBar | Napredak | ''<ProgressBar Value="{Binding Progress}" />'' |
^ Slider | Klizač | ''<Slider Value="{Binding Volume}" />'' |
^ ToggleButton | Uklj/Isklj | ''<ToggleButton IsChecked="{Binding Mode}" />'' |
^ Hyperlink | Poveznica | ''<Hyperlink NavigateUri="..." Text="Klik" />'' |
^ Border | Okvir | ''<Border BorderThickness="1">...</Border>'' |
^ Separator | Linija razdvajanja | ''<Separator />'' |

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

Polja za unos različitih vrsta podataka.

| Kontrola | Opis | PXAML primjer |
^ TextEdit | Prošireno tekstualno polje | ''<TextEdit Text="{Binding Search}" ShowClearButton="True" />'' |
^ MemoEdit | Višeredni unos | ''<MemoEdit Text="{Binding Notes}" Lines="5" />'' |
^ SpinEdit | Brojevi | ''<SpinEdit Value="{Binding Qty}" MinValue="1" MaxValue="100" />'' |
^ DateEdit | Datum | ''<DateEdit Date="{Binding Birthday}" />'' |
^ TimeEdit | Vrijeme | ''<TimeEdit Time="{Binding Start}" />'' |
^ CalcEdit | Kalkulator | ''<CalcEdit Value="{Binding Price}" Prefix="€ " />'' |
^ ColorEdit | Boja | ''<ColorEdit Color="{Binding Theme}" />'' |
^ MaskEdit | Maska | ''<MaskEdit EditMask="(000) 000-0000" />'' |
^ ComboBoxEdit | Padajući izbornik | ''<ComboBoxEdit Items="A,B,C" SelectedItem="{Binding Choice}" />'' |
^ TokenEdit | Oznake | ''<TokenEdit Tokens="{Binding Tags}" />'' |
^ RatingControl | Zvjezdice | ''<RatingControl Value="{Binding Rating}" ItemCount="5" />'' |

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

Navigacija i čarobnjaci.

| Kontrola | Opis | PXAML primjer |
^ TabControl | Kartice | ''<TabControl><TabItem Header="Tab1">...</TabItem></TabControl>'' |
^ Accordion | Paneli | ''<Accordion><AccordionItem Header="...">...</AccordionItem></Accordion>'' |
^ Breadcrumb | Put | ''<Breadcrumb Path="{Binding Path}" />'' |
^ Pager | Stranice | ''<Pager CurrentPage="{Binding Page}" TotalPages="10" />'' |
^ Wizard | Čarobnjak | ''<Wizard><WizardPage Title="Korak 1">...</WizardPage></Wizard>'' |
^ NavBar | Navigacija | ''<NavBar><NavBarItem Caption="Početna" /></NavBar>'' |
^ TileControl | Pločice | ''<TileControl><Tile Caption="App" /></TileControl>'' |

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

Data gridovi i liste.

| Kontrola | Opis | PXAML primjer |
^ DataGrid | Tablica | ''<DataGrid ItemsSource="{Binding Data}" />'' |
^ TreeList | Stablo | ''<TreeList ItemsSource="{Binding Tree}" />'' |
^ CardView | Kartice | ''<CardView ItemsSource="{Binding Items}" />'' |
^ PivotGrid | Pivot | ''<PivotGrid DataSource="{Binding Sales}" />'' |

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

Dijagrami i vizualizacije.

| Kontrola | Opis | PXAML primjer |
^ Chart | Dijagram | ''<Chart><LineSeries ... /></Chart>'' |
^ Sparkline | Mini-dijagram | ''<Sparkline Data="{Binding Trend}" />'' |
^ LineSeries | Linija | ''<LineSeries ArgumentDataMember="X" ValueDataMember="Y" />'' |
^ BarSeries | Stupci | ''<BarSeries ... />'' |
^ PieSeries | Krug | ''<PieSeries ... />'' |

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

Mjerači za SCADA/MES.

| Kontrola | Opis | PXAML primjer |
^ CircularGauge | Kružni | ''<CircularGauge Value="{Binding Speed}" Maximum="200" />'' |
^ LinearGauge | Linearni | ''<LinearGauge Value="{Binding Temp}" />'' |
^ DigitalGauge | Digitalni | ''<DigitalGauge Value="{Binding Counter}" />'' |
^ StateIndicator | Semafor | ''<StateIndicator State="{Binding Status}" />'' |
^ LED | LED | ''<LED IsOn="{Binding Connected}" />'' |
^ Thermometer | Termometar | ''<Thermometer Value="{Binding Temp}" />'' |

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

Kontejneri i layout.

| Kontrola | Opis | PXAML primjer |
^ LayoutControl | Forma | ''<LayoutControl><LayoutItem Label="...">...</LayoutItem></LayoutControl>'' |
^ SplitContainer | Razdjelnik | ''<SplitContainer>...</SplitContainer>'' |
^ GroupControl | Grupa | ''<GroupControl Header="...">...</GroupControl>'' |
^ CollapsibleGroup | Sklopiva | ''<CollapsibleGroup Header="...">...</CollapsibleGroup>'' |

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

Izbornici i alatne trake.

| Kontrola | Opis | PXAML primjer |
^ RibbonControl | Vrpca | ''<RibbonControl><RibbonPage>...</RibbonPage></RibbonControl>'' |
^ BarManager | Izbornici | ''<BarManager>...</BarManager>'' |
^ StatusBar | Status | ''<StatusBar><StatusBarItem>...</StatusBarItem></StatusBar>'' |
^ PopupMenu | Kontekst | ''<PopupMenu>...</PopupMenu>'' |

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

Specijalizirane komponente.

| Kontrola | Opis | PXAML primjer |
^ Scheduler | Kalendar | ''<Scheduler DataSource="{Binding Appointments}" />'' |
^ RichEditControl | Word | ''<RichEditControl Document="{Binding Doc}" />'' |
^ SpreadsheetControl | Excel | ''<SpreadsheetControl />'' |
^ MapControl | Karta | ''<MapControl CenterPoint="..." />'' |
^ PdfViewer | PDF | ''<PdfViewer DocumentSource="{Binding Path}" />'' |

===== Instalacija =====

Pogledajte [[.:controls-installation|Instalacija kontrola]].

===== Više informacija =====

  * [[.:designer|UI Designer]] - Vizualni dizajn
  * [[..:i:control-bibliothek|Razvijatelj: Biblioteka kontrola]] - Potpuni API