Lekce 37 - WPF - Základní ovládací prvky WPF

V minulé lekci, Toastové notifikace v C# .NET WPF, jsme se naučili tvořit toastové notifikace.

Platforma WPF (Windows Presentation Foundation) poskytuje velké množství již předpřipravených prvků (controls). V následujících několika článcích kurz WPF dokončíme představením těchto prvků a popisem jejich nejdůležitějších vlastností a událostí. Získáte tak přehled nad tím, co vše již máte k dispozici, a tyto znalosti vám jistě ušetří spoustu práce namísto vymýšlení kola

Seznam komponent

Na úvod si uveďme seznam všech WPF komponent. Pro jednodušší orientaci jsem si prvky rozdělil do skupin podle typu a seřadil dle abecedy.

Ovládací prvky

Následující prvky se obvykle používají k vyvolání nějaké akce:

• Button
• CheckBox (je i prvkem pro ukládání dat)
• RadioButton

Prvky pro vkládání dat

Pro vkládání dat máme k dispozici:

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

Popisné prvky

Pro popis můžeme vložit:

• Label
• ProgressBar
• TextBlock

Prvky pro zobrazení dat

Data zobrazujeme nejčastěji do:

• DataGrid
• Image
• ListBox
• MediaElement
• TreeView

Prvky pro vytváření menu

Pro tvorbu menu máme k dispozici:

• Menu
• MenuItem

Kontejnery

Dále můžeme využívat následující kontejnerové struktury:

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

Dialogy

A vyžádat interakci uživatele těmito dialogy:

• MessageBox
• OpenFileDialog
• SaveFileDialog

Společné vlastnosti

Pro všechny tyto prvky platí, že mají jisté vlastnosti, které lze nastavovat buď přímo v návrháři formuláře (designeru) nebo programově. Programově lze měnit vlastnosti při tzv. inicializaci formuláře (proběhne pouze jednou při startu formuláře) nebo i kdykoli v průběhu spuštěné aplikace, kde je možné nastavovat tyto vlastnosti podle zadaných dat.

Nyní si uvedeme vlastnosti společné pro všechny nebo většinu WPF ovládacích prvků. Další vlastnosti, specifické pro ten konkrétní prvek, jsou uvedeny u popisu jednotlivých prvků.

• Width - šířka prvku
• Height - výška prvku
• Background - pozadí
• Foreground - barva textu
• BorderBrush - barva rámečku
• BorderThickness - tloušťka čáry rámečku
• HorizontalAlignment - vodorovné zarovnání prvku
• VerticalAlignment - vertikální zarovnání prvku
• HorizontalContentAlignment - vodorovné zarovnání obsahu (textu) uvnitř prvku
• VerticalContentAlignment - svislé zarovnání obsahu (textu) uvnitř prvku
• FontFamily - font
• FontSize - velikost fontu
• FontWeight - tloušťka textu (normální, tučné, ...)
• FontStyle - styl textu (šikmé, podtržené, ...)
• Opacity - neprůhlednost (0 - zcela průhledný až 1 - neprůhledný)
• Visibility - viditelnost (skrytý, viditelný)
• IsEnabled - zda prvek povoluje editaci
• ToolTip - text nápovědy, který se zobrazí při najetí myší na prvek
• Cursor - nastavuje typ kurzoru

Níže následuje tabulka WPF prvků a těchto vlastností, kde je vidět které z nich je podporují:

Tolik souhrn vybraných vlastností prvků a nyní již k popisu jednotlivých prvků.

Ovládací prvky

Začněme jednoduše ovládacími prvky.

Button (Tlačítko)

Představuje ovládací prvek, který reaguje na kliknutí myší a spustí přiřazenou metodu.

Vlastnosti

• Content – text, který je zobrazen na tlačítku
• IsCancel – nastavuje, zda je tlačítko tlačítkem Storno. Reaguje pak na stisknutí klávesy Esc a spustí přiřazenou metodu.
• IsDefault – nastavuje, zda je tlačítko defaultním tlačítkem. Tzn., že reaguje na stisk klávesy Enter a spustí přiřazenou metodu. Této vlastnosti lze využít např. v dialogovém okně s tlačítky Ano/Ne a označit tak předdefinovanou volbu.

Události

• Click – při kliknutí myší spustí přiřazenou metodu
• MouseMove – při najetí myší na tlačítko spustí přiřazenou metodu
• MouseLeave– při opuštění myši z tlačítka spustí přiřazenou metodu

Příklad

U každé kontrolky si ukážeme i příklad použití 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#

Událost Click:

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

Událost MouseLeave:

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

Událost MouseMove:

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

CheckBox (Zaškrtávátko)

Tento prvek slouží rovněž např. k řízení aplikace. Na základě stavu označení příslušného přepínače může aplikace provádět různé akce nebo měnit zobrazení prvků ve formuláři. Na rozdíl od RadioButtonu nelze jednotlivé prvky slučovat do skupiny.

Vlastnosti

• Content – zobrazuje uvedený text
• IsChecked – nastavuje zda je prvek zaškrtnutý
• IsThreeState – povoluje 3 stavy prvku (true, false, null)

Události

• Click – při kliknutí myší spustí přiřazenou metodu
• Checked – při zaškrtnutí prvku spustí přiřazenou metodu
• Unchecked – při odškrtnutí prvku spustí přiřazenou metodu

Příklad

Opět si uveďme příklad:

XAML

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

C#

Událost Checked:

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

Událost Unchecked:

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

RadioButton (Přepínač)

Tento prvek slouží k řízení aplikace. Na základě stavu označení příslušného přepínače může aplikace provádět různé akce nebo měnit zobrazení prvků ve formuláři. Přepínače lze seskupovat do tzv. skupin (Groups), ve kterých platí, že může být označen jenom jeden prvek ve skupině.

Vlastnosti

• Content – zobrazuje uvedený text
• GroupName – sdružuje jednotlivé RadioButtony do skupiny. Umožňuje tak přepínat mezi jednotlivými prvky ve skupině
• IsChecked – nastavuje u prvku označení
• IsThreeState – povoluje 3 stavy prvku (true, false, null)

Události

• Click – při kliknutí myší spustí přiřazenou metodu
• Checked – při zaškrtnutí prvku spustí přiřazenou metodu
• Unchecked – při odškrtnutí prvku spustí přiřazenou metodu

Pří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#

Událost Click:

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

V příští lekci, WPF - Přehled prvků pro vkládání dat, budeme pokračovat prvky Calendar, ComboBox, DatePicker a ListBox.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.