27. diel - WPF - Základné ovládacie prvky WPF

Platforma WPF (Windows Presentation Foundation) poskytuje veľké množstvo už predpripravených prvkov (controls). V nasledujúcich niekoľkých článkoch kurz WPF dokončíme predstavením týchto prvkov a popisom ich najdôležitejších vlastností a udalostí. Získate tak prehľad nad tým, čo všetko už máte k dispozícii, a tieto znalosti vám iste ušetrí veľa práce namiesto vymýšľania kola

Zoznam komponentov

Na úvod si uveďme zoznam všetkých WPF komponentov. Pre jednoduchšiu orientáciu som si prvky rozdelil do skupín podľa typu a zoradil podľa abecedy.

Ovládacie prvky

Nasledujúce prvky sa zvyčajne používajú na vyvolanie nejakej akcie:

• Button
• CheckBox (je aj prvkom pre ukladanie dát)
• RadioButton

Prvky pre vkladanie dát

Pre vkladanie dát máme k dispozícii:

• Calendar
• ComboBox
• DatePicker
• PasswordBox
• RichTextBox
• TextBox

Opisné prvky

Pre popis môžeme vložiť:

• Label
• ProgressBar
• TextBlock

Prvky pre zobrazenie dát

Dáta zobrazujeme najčastejšie do:

• DataGrid
• Image
• ListBox
• MediaElement
• TreeView

Prvky pre vytváranie menu

Pre tvorbu menu máme k dispozícii:

• Menu
• MenuItem

Kontajnery

Ďalej môžeme využívať nasledovné kontajnerové štruktúry:

• Canvas
• DockPanel
• Grid
• StackPanel
• TabControl
• WrapPanel

Dialógy

A vyžiadať interakciu užívateľa týmito dialógy:

• MessageBox
• OpenFileDialog
• SaveFileDialog

Spoločné vlastnosti

Pre všetky tieto prvky platí, že majú isté vlastnosti, ktoré možno nastavovať buď priamo v návrhári formulára (Designeri) alebo programovo. Programovo je možné meniť vlastnosti pri tzv. Inicializácii formulára (prebehne iba raz pri štarte formulára) alebo aj kedykoľvek v priebehu spustené aplikácie, kde je možné nastavovať tieto vlastnosti podľa zadaných dát.

Teraz si uvedieme vlastnosti spoločné pre všetkých alebo väčšinu WPF ovládacích prvkov. Ďalšie vlastnosti, špecifické pre ten konkrétny prvok, sú uvedené pri popise jednotlivých prvkov.

• Width - šírka prvku
• Height - výška prvku
• Background - pozadie
• Foreground - farba textu
• BorderBrush - farba rámčeka
• BorderThickness - hrúbka čiary rámiku
• HorizontalAlignment - vodorovné zarovnanie prvku
• VerticalAlignment - vertikálne zarovnanie prvku
• HorizontalContentAlignment - vodorovné zarovnanie obsahu (textu) vnútri prvku
• VerticalContentAlignment - zvislé zarovnanie obsahu (textu) vnútri prvku
• FontFamily - font
• FontSize - veľkosť fontu
• FontWeight - hrúbka textu (normálne, tučné, ...)
• FontStyle - štýl textu (šikmé, podčiarknuté, ...)
• Opacity - nepriehľadnosť (0 - úplne priehľadný až 1 - nepriehľadný)
• Visibility - viditeľnosť (skrytý, viditeľný)
• IsEnabled - či prvok povoľuje editáciu
• ToolTip - text pomoci, ktorý sa zobrazí pri nabehnutí myšou na prvok
• Cursor - nastavuje typ kurzora

Nižšie nasleduje tabuľka WPF prvkov a týchto vlastností, kde je vidieť ktoré z nich je podporujú:

Toľko súhrn vybraných vlastností prvkov a teraz už k popisu jednotlivých prvkov.

Ovládacie prvky

Začnime jednoducho ovládacími prvkami.

Button (Tlačidlo)

Predstavuje ovládací prvok, ktorý reaguje na kliknutie myšou a spustí priradenú metódu.

Vlastnosti

• Content - text, ktorý je zobrazený na tlačidle
• IsCancel - nastavuje, či je tlačidlo tlačidlom Zrušiť. Reaguje potom na stlačenie klávesy Esc a spustí priradenú metódu.
• IsDefault - nastavuje, či je tlačidlo defaultným tlačidlom. Tzn., Že reaguje na stlačenie klávesy Enter a spustí priradenú metódu. Tejto vlastnosti možno využiť napr. V dialógovom okne s tlačidlami Áno / Nie a označiť tak preddefinovanú voľbu.

Udalosti

• Click - pri kliknutí myšou spustí priradenú metódu
• MouseMove - pri nabehnutí myšou na tlačidlo spustí priradenú metódu
• MouseLeave - pri opustení myši z tlačidla spustí priradenú metódu

Príklad

Pri každej kontrolky si ukážeme aj príklad použitia v XAML a C# kódu:

XAML

<Window x:Name="wdwOkno" x:Class="ZakladniPrvky.MainWindow
...
<Button x:Name="btnTlacitko" Content="Konec"
    Width="60" Height="30" BorderThickness="1,1,2,2"
    Background="LightGray" BorderBrush="Black"
    HorizontalAlignment="Left" Click="Konec"
    MouseMove="UdalostMove" MouseLeave="UdalostLeave"/>

C #

Udalosť Click:

// Uzavření okna
private void Konec(object sender, RoutedEventArgs e)
{
    wdwOkno.Close();
}

Udalosť MouseLeave:

private void UdalostMove(object sender, MouseEventArgs e)
{
    btnTlacitko.Foreground = Brushes.Red;
    btnTlacitko.FontWeight = FontWeights.Bold;
    btnTlacitko.FontSize = 14;
}

Udalosť MouseMove:

private void UdalostLeave(object sender, MouseEventArgs e)
{
    btnTlacitko.Foreground = Brushes.Black;
    btnTlacitko.FontWeight = FontWeights.Normal;
    btnTlacitko.FontSize = 12;
}

Checkbox (Zaškrtávacie pole)

Tento prvok slúži tiež napr. K riadeniu aplikácie. Na základe stavu označenie príslušného prepínača môže aplikácia vykonávať rôzne akcie alebo meniť zobrazenie prvkov vo formulári. Na rozdiel od RadioButton u nemožno jednotlivé prvky zlučovať do skupiny.

Vlastnosti

• Content - zobrazuje uvedený text
• IsChecked - nastavuje či je prvok zaškrtnutý
• IsThreeState - povoľuje 3 stavy prvku (true, false, null)

Udalosti

• Click - pri kliknutí myšou spustí priradenú metódu
• Checked - pri zaškrtnutí prvku spustí priradenú metódu
• Unchecked - pri odškrtnutie prvku spustí priradenú metódu

Príklad

Opäť si uveďme príklad:

XAML

<CheckBox Content="CheckBox 1" IsChecked="True"
    VerticalAlignment="Center" Checked="Zaskrtnuto"
    Unchecked="Odskrtnuto"/>

C #

Udalosť Checked:

private void Zaskrtnuto(object sender, RoutedEventArgs e)
{
    if (inic)
    {
       MessageBox.Show("Zaškrtnuto");
    }
}

Udalosť Unchecked:

private void Odskrtnuto(object sender, RoutedEventArgs e)
{
    if (inic)
    {
       MessageBox.Show("Odškrtnuto");
    }
}

RadioButton (Prepínač)

Tento prvok slúži na riadenie aplikácie. Na základe stavu označenie príslušného prepínača môže aplikácia vykonávať rôzne akcie alebo meniť zobrazenie prvkov vo formulári. Prepínače možno zoskupovať do tzv. Skupín (Groups), v ktorých platí, že môže byť označený iba jeden prvok v skupine.

Vlastnosti

• Content - zobrazuje uvedený text
• GroupName - združuje jednotlivé RadioButton do skupiny. Umožňuje tak prepínať medzi jednotlivými prvkami v skupine
• IsChecked - nastavuje u prvku označenia
• IsThreeState - povoľuje 3 stavy prvku (true, false, null)

Udalosti

• Click - pri kliknutí myšou spustí priradenú metódu
• Checked - pri zaškrtnutí prvku spustí priradenú metódu
• Unchecked - pri odškrtnutie prvku spustí priradenú metódu

Príklad

XAML

<RadioButton Content="RadioButton 1" GroupName="grRB"
    IsChecked="True" VerticalAlignment="Center"
    Click="ZobrazRB"/>


 <RadioButton Grid.Column="1" Content="RadioButton 2"
    GroupName="grRB" VerticalAlignment="Center"
    Click="ZobrazRB"/>

 <RadioButton Grid.Column="2" Content="RadioButton 3"
    GroupName="grRB" VerticalAlignment="Center"
    Click="ZobrazRB"/>

C #

Udalosť Click:

private void ZobrazRB(object sender, RoutedEventArgs e)
{
    RadioButton rbn = sender as RadioButton;
    if (rbn != null)
    {
       MessageBox.Show("Kliknuto na " + rbn.Content);
    }
}

V budúcej lekcii, DependencyProperties v C # .NET WPF , budeme pokračovať prvky Calendar, ComboBox, DatePicker a ListBox.

V budúcej lekcii, DependencyProperties v C # .NET WPF , si predstavíme DependencyPro­perties z WPF a čo vie navyše oproti klasickým C# vlastnostiam v kombinácii s INotifyProper­tyChanged.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.