28. diel - WPF - Prehľad prvkov pre vkladanie dát

V minulej lekcii, WPF - Základné ovládacie prvky WPF , sme si uviedli spoločné vlastnosti a udalosti pre ovládacie prvky WPF frameworku. Dnešná lekcia je venovaná prvkom, cez ktoré je možné do formulára vkladať dáta. Ide o tieto prvky:

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

Calendar (Kalendár)

Kalendár predstavuje ovládací prvok, cez ktorý sa zadáva dátum alebo rozsah dátumov.

Kalendár pracuje v 4 módoch výbere hodnôt (určujeme cez vlastnosť SelectionMode):

• SingleDate - výber jedného dňa
• SingleRange - výber súvislej oblasti dní
• MultipleRange - výber niekoľkých súvislých oblastí dní
• None - bez výberu dní, iba pre prehliadanie

Okrem toho má ešte 3 módy zobrazenia (určujeme cez vlastnosť DisplayMode):

• Month - zobrazenie rozpisu dní vo vybranom mesiaci
• Year - zobrazenie rozpisu mesiacov vo vybranom roku
• Decade - zobrazenie rozpisu rokov

Vlastnosti

• DisplayDateEnd - nastavuje koncový dátum
• DisplayDateStart - nastavuje počiatočný dátum
• DisplayMode - nastavuje mód zobrazenie
• FirstDayOfWeek - nastavuje deň, ktorým má začínať týždeň
• IsTodayHighlighted - či má byť zvýraznené aký je dnes deň (true alebo false)
• SelectedDate - nastavuje alebo vracia vybraný deň
• SelectedDates - nastavuje alebo vracia kolekciu vybraných dní
• SelectionMode - nastavuje mód výberu

Udalosti

• SelectedDatesChanged - pri zmene dátumu spustí priradenú metódu
• DisplayModeChanged - pri zmene módu zobrazenia spustí priradenú metódu

Príklad

XAML

<Calendar x:Name="calKalendar" BorderBrush="Black" BorderThickness="2,2,1,1"
   SelectedDatesChanged="ZobrazDen"/>

C #

Udalosť SelectedDatesChanged:

private void ZobrazDen(object sender, SelectionChangedEventArgs e)
{
    DateTime pomDat = calKalendar.SelectedDate.Value;
    lblDen.Content = pomDat.ToShortDateString();
}

ComboBox (Pole výberu)

Prvok, ktorý slúži na výber hodnôt zo zoznamu. Na rozdiel od ListBox u je zoznam rozbaľovacej a umožňuje výber len jednej hodnoty.

Vlastnosti

• IsDropDownOpen - zobrazí ComboBox s už rozbaleným zoznamom
• IsEditable - povoľuje zadať hodnotu, ktorá nie je v zozname
• Items - položky (jednotlivý text alebo štruktúrovaný záznam)
• ItemsSource - zdroj údajov (textové pole typu List alebo kolekcia štruktúrovaných záznamov)
• SelectionMode - vybraný mód
• SelectedIndex - vybraný index
• SelectedItem - vybraná položka
• SelectedValue - vybraná hodnota

Udalosti

• SelectionChanged - pri zmene výberu sa spustí priradená metóda

Príklad

XAML

<ComboBox x:Name="cbxVolba" Grid.Row="13" Width="200"
   HorizontalAlignment="Left" Height="30"
   SelectedIndex="0" VerticalContentAlignment="Center">
   <ComboBoxItem>Položka 1</ComboBoxItem>
   <ComboBoxItem>Položka 2</ComboBoxItem>
   <ComboBoxItem>Položka 3</ComboBoxItem>
   <ComboBoxItem>Položka 4</ComboBoxItem>
   <ComboBoxItem>Položka 5</ComboBoxItem>
</ComboBox>

Alebo vytvoríme obdobne ako je to u prvku ListBox, viď ďalej.

C #

Udalosť SelectionChanged:

private void Volba(object sender, SelectionChangedEventArgs e)
{
    if (inic)
    {
       ComboBox cbx = sender as ComboBox;
       lblVybranoCbx.Content = cbx.SelectedValue.ToString();
    }
}

DatePicker (Dátum)

Tento prvok slúži na zadávanie dátumu. Aj keď používa na výber komponent Calendar, možno zadať iba jednu hodnotu.

Vlastnosti

• DisplayDateEnd - nastavuje koncový dátum
• DisplayDateStart - nastavuje počiatočný dátum
• FirstDayOfWeek - nastavuje deň, ktorým má začínať týždeň
• IsTodayHighlighted - či má byť zvýraznené aký je dnes deň (true alebo false)
• SelectedDate - nastavuje alebo vracia vybraný deň

Udalosti

• SelectedDateChanged - pri zmene dátumu spustí priradenú metódu

Príklad

XAML

<DatePicker x:Name="dprDatum" Width="100" Height="25"
BorderBrush="Black" BorderThickness="2,2,1,1"
SelectedDateChanged="ZobrazDatum" />

C #

Udalosť SelectedDateChanged:

private void ZobrazDatum(object sender, SelectionChangedEventArgs e)
{
    DateTime pomDat = dprDatum.SelectedDate.Value;
    lblDatum.Content = pomDat.ToShortDateString();
}

Listbox (Zoznam výberu)

Prvok, ktorý slúži na výber hodnôt zo zoznamu. U prvku možno nastaviť, či sa majú vyberať jednotlivé hodnoty alebo viacerých hodnôt naraz.

Vlastnosti

• Items - položky (jednotlivý text alebo štruktúrovaný záznam)
• ItemsSource - zdroj údajov (textové pole typu List alebo kolekcia štruktúrovaných záznamov)
• SelectedIndex - index vybrané položky
• SelectedItem - vybraná položka
• SelectedItems - obsahuje kolekciu vybraných položiek (ak je vlastnosť Multiple nastavená na true)
• SelectionMode - nastavuje mód výberu. Existujú 3 módy: Single - výber jednej položky

  Multiple - výber viacerých položiek

  Extended - výber viacerých položiek naraz pomocou klávesov Ctrl a Shift

• Single - výber jednej položky
• Multiple - výber viacerých položiek
• Extended - výber viacerých položiek naraz pomocou klávesov Ctrl a Shift

Udalosti

• SelectionChanged - pri zmene výberu sa spustí priradená metóda

Príklad

XAML

<ListBox x:Name="lbxSeznam" Width="200"
   HorizontalAlignment="Left" BorderBrush="Black"
   BorderThickness="2,2,1,1">
      <ListBoxItem>Položka 1</ListBoxItem>
      <ListBoxItem>Položka 2</ListBoxItem>
      <ListBoxItem>Položka 3</ListBoxItem>
      <ListBoxItem>Položka 4</ListBoxItem>
      <ListBoxItem>Položka 5</ListBoxItem>
</ListBox>

alebo

<ListBox x:Name="lbxSeznam" Width="200"
   HorizontalAlignment="Left" BorderBrush="Black"
   BorderThickness="2,2,1,1"/>

C #

public MainWindow()
{
    InitializeComponent();
    ...
    lbxSeznam.Items.Add("Položka 1");
    lbxSeznam.Items.Add("Položka 2");
    lbxSeznam.Items.Add("Položka 3");
    lbxSeznam.Items.Add("Položka 4");
    lbxSeznam.Items.Add("Položka 5");
}

alebo

public MainWindow()
{
    InitializeComponent();
    ...
    List<string> seznam = new List<string>();
    seznam.Add("Položka 1");
    seznam.Add("Položka 2");
    seznam.Add("Položka 3");
    seznam.Add("Položka 4");
    seznam.Add("Položka 5");
    lbxSeznam.ItemsSource = seznam;
}

Udalosť SelectionChanged:

XAML

<ListBox x:Name="lbxSeznam" Width="200" HorizontalAlignment="Left"
   BorderBrush="Black" BorderThickness="2,2,1,1"
   SelectionMode="Extended" SelectionChanged="Vybrano"/>

C #

private void Vybrano(object sender, SelectionChangedEventArgs e)
{
    int pocet = 0;
    foreach (string polozka in lbxSeznam.SelectedItems)
    {
       pocet += 1;
    }
    lblVybrano.Content = "Vybráno " + pocet.ToString() + " záznamů";
}

S ďalšími prvkami pre vkladanie dát budeme pokračovať v budúcej lekcii, Vlastný ovládací prvok s DependencyProperties v C # .NET WPF .

V budúcej lekcii, Vlastný ovládací prvok s DependencyProperties v C # .NET WPF , si naprogramujeme ukážku použitia DependencyPro­perties vo WPF vo vlastnom UserControl.