UI Controls

Pregled svih dostupnih WvdS UI kontrola za PXAML.

Brzi početak

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

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 Instalacija kontrola.

Više informacija

UI Designer - Vizualni dizajn
Razvijatelj: Biblioteka kontrola - Potpuni API

Inhaltsverzeichnis