30. diel - WPF - Prvky pre zobrazenie dát

V minulej lekcii, WPF - Prvky pre ukladanie dát a opisné prvky , sme si prešli WPF prvky pre ukladanie dát a opisné prvky. Tento diel o prvkoch WPF sa venuje prvkom, cez ktoré je možné zobrazovať používateľské dáta. Ide o tieto prvky:

• DataGrid
• Image
• MediaElement
• TreeView

DataGrid (Tabuľkové zobrazenie dát)

DataGrid zobrazuje dáta vo forme tabuľky, tak ako je napríklad známe z Excelu. Existujú tu riadky, ktoré predstavujú záznamy, a v nich stĺpce, ktoré obsahujú jednotlivé položky daného záznamu (bunky). V tabuľke je možné napríklad triediť kliknutím na príslušný názov stĺpca alebo ťahaním myši meniť šírku stĺpcov. Ďalej možno zakázať alebo povoliť editáciu dát, použiť niektoré prvky ako napr. Button, ComboBox, CheckBox pod. A vykonávať zoskupovanie záznamov (pozri projekt UkazkaDataGrid, ktorý môžete stiahnuť v archíve nižšie).

Vlastnosti

• AlternatingRowBackground - nastavuje farbu pozadia alternatívnych riadkov, čo môže byť napr. Každý druhý riadok. Tabuľka potom bude "rebrovaná" a jednotlivé riadky lepšie opticky oddelené
• AlternationCount - nastavuje koľký riadok má byť alternatívne (hodnota je spravidla 2, čo je každý druhý riadok)
• AutoGenerateColumns - povoľuje automatické generovanie stĺpcov podľa zdroja (pri vlastnej definícii stĺpcov je nutné túto vlastnosť nastaviť na False)
• CanUserReorderColumns - povoľuje presúvanie stĺpcov
• CanUserResizeColumns - povoľuje zmenu šírky stĺpcov
• CanUserSortColumns - povoľuje radenie dát vo vybranom stĺpci
• FrozenColumnCount - určuje, koľko stĺpcov zľava má byť pevných pri zobrazení posuvníka
• HeadersVisibility - nastavuje zobrazenia hlavičiek stĺpcov. Má 4 hodnoty None - zobrazí sa iba dáta (bez hlavičky a výberového stĺpce)

  Column - zobrazí sa dáta a hlavička (bez výberového stĺpce)

  Row - zobrazí sa iba dáta (bez hlavičky, ale s výberovým stĺpcom)

  All - zobrazí sa všetko

• None - zobrazí sa iba dáta (bez hlavičky a výberového stĺpce)
• Column - zobrazí sa dáta a hlavička (bez výberového stĺpce)
• Row - zobrazí sa iba dáta (bez hlavičky, ale s výberovým stĺpcom)
• All - zobrazí sa všetko
• IsReadOnly - nastavuje prvok iba na čítanie
• Items - položky (štruktúrovaný záznam)
• ItemsSource - zdroj údajov (kolekcia štruktúrovaných záznamov)
• SelectedIndex - vybraný index
• SelectedItem - vybratý záznam
• SelectedItems - vybraná kolekcia záznamov (ak vyberieme viac položiek)
• SelectedValue - vybratý záznam

Udalosti

• SelectionChanged - Pri zmene výbere sa spustí priradená metóda

Príklad

XAML

<DataGrid x:Name="dgdSeznam" ItemsSource="{Binding}"
   HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
   AutoGenerateColumns="False" IsSynchronizedWithCurrentItem="True"
   CanUserReorderColumns="False" CanUserResizeColumns="True"
   AreRowDetailsFrozen="True" AlternatingRowBackground="LightSteelBlue"
   AlternationCount="2" HeadersVisibility="Column" IsReadOnly="True"
   Background="LightSteelBlue" RowBackground="#FFF6F6C2"
   BorderBrush="Black" BorderThickness="2,2,1,1"
   SelectionChanged="ZobrazVyberDgd">
   <DataGrid.Columns>
      <DataGridTextColumn
         Binding="{Binding Jmeno}"
         ClipboardContentBinding="{x:Null}"
         Width="80" Header="Jméno" IsReadOnly="True"/>
      <DataGridTextColumn
         Binding="{Binding Prijmeni}"
         ClipboardContentBinding="{x:Null}" Width="160" Header="Příjmení"
         IsReadOnly="True"/>
      <DataGridTextColumn
         Binding="{Binding Narozeni, StringFormat={}{0:dd.MM.yyyy}}"
         ClipboardContentBinding="{x:Null}" Width="70" Header="Datum"
         IsReadOnly="True"/>
   </DataGrid.Columns>
</DataGrid>

C #

Udalosť SelectionChanged:

private void ZobrazVyberDgd(object sender, SelectionChangedEventArgs e)
{
   DataGrid dgd = sender as DataGrid;
   if (dgd != null)
   {
      if (dgd.SelectedIndex > -1)
      {
          VetaOsoby vo = new VetaOsoby();
          vo = dgd.SelectedItem as VetaOsoby;
          lblVybranoDgd.Content = vo.CeleJmeno + "; " + vo.DatumNarozeni;
      }
   }
}

Image (Obrázok)

Prvok slúži (ako už názov napovedá) na zobrazenie obrázka (pozri projekt UkazkaImage).

Vlastnosti

• Source - zdroj obrázku
• Stretch - nastavuje spôsob vyplnenia prvku obrázkom. Sú možno tieto zobrazenia None - zachováva pomer strán. Ak je obrázok väčší ako plocha prvku, zobrazí len časť obrázku (ľavý horný roh). Pri menšom obrázku zobrazí celý o ponechá voľné okraje

  Fill - vyplní celú plochu prvku (nezachováva pomer strán obrázku)

  Uniform - obrázok sa snaží vyplniť vždy dostupnú plochu buď na šírku alebo na výšku a súčasne zachováva pomer strán obrázku. Nedochádza ku skresleniu obrázku (ponechá voľné okraje)

  UniformToFill - obrázok vyplní vždy dostupnú plochu a súčasne zachováva pomer strán obrázku. Pri rozdielnej veľkosti dostupnej plochy a obrázku je zobrazený výrez horného rohu obrázku. Nedochádza ku skresleniu obrázku.

• None - zachováva pomer strán. Ak je obrázok väčší ako plocha prvku, zobrazí len časť obrázku (ľavý horný roh). Pri menšom obrázku zobrazí celý o ponechá voľné okraje
• Fill - vyplní celú plochu prvku (nezachováva pomer strán obrázku)
• Uniform - obrázok sa snaží vyplniť vždy dostupnú plochu buď na šírku alebo na výšku a súčasne zachováva pomer strán obrázku. Nedochádza ku skresleniu obrázku (ponechá voľné okraje)
• UniformToFill - obrázok vyplní vždy dostupnú plochu a súčasne zachováva pomer strán obrázku. Pri rozdielnej veľkosti dostupnej plochy a obrázku je zobrazený výrez horného rohu obrázku. Nedochádza ku skresleniu obrázku.

Udalosti

Žiadne dôležité.

Príklad

XAML

MediaElement (Prehrávač médií)

MediaElement slúži na zobrazenie multimediálnych súborov ako je audio alebo video. Možno pomocou neho zobraziť aj obrazové súbory (pozri projekt UkazkaMediaElement k stiahnutiu nižšie).

Vlastnosti

• LoadedBehavior - slúži na riadenie videa. Ak chceme sami riadiť video (spustiť, pozastaviť, zastaviť), musíme nastaviť túto vlastnosť na "Manual".
• Source - zdroj údajov (audio alebo video súbor)
• Stretch - nastavuje formát zobrazenia média. Najviac sa používa mód "Uniform", ktorý zachováva pomer strán vybraného videa (viď popis u Image).
• UnloadedBehavior - nastavuje režim MediaElement u (pri použití hodnoty "Close" automaticky uvoľní všetky zdroje vrátane pamäte)

Udalosti

žiadne dôležité

Príklad

XAML

<MediaElement x:Name="metVideo" LoadedBehavior="Manual" UnloadedBehavior="Close"/>

TreeView (Stromové zobrazenie dát)

Ďalším prvkom, cez ktorý je možné zobrazovať dáta, je TreeView. Predstavuje tzv. Stromovú štruktúru, kde možno dáta rozbaľovať alebo zbaľovať do skupín. Jednotlivé riadky stromu sa vytvárajú pomocou prvku TreeViewItem (pozri projekt UkazkaTreeView v archíve pod článkom).

Vlastnosti

• Header - nastavuje text hlavičky
• Items - jednotlivé položky
• ItemsSource - zdroj údajov (kolekcie položiek)

Udalosti

• SelectedItemChanged - pri zmene riadku spustí priradenú procedúru

Príklad

XAML

<TreeView SelectedItemChanged="ZobrazVyber">
   <TreeViewItem Header="Muži" IsExpanded="True">
      <TreeViewItem Header="Aaaaa Aaaaaaaaaa"/>
      <TreeViewItem Header="Bbbbbb Bbbbbbbbbb"/>
      <TreeViewItem Header="Ccccc Ccccccccccccccc"/>
      <TreeViewItem Header="Dddd Dddddddddddd"/>
      <TreeViewItem Header="Eee Eeeeeeeee"/>
  </TreeViewItem>
  <TreeViewItem Header="Ženy" IsExpanded="True">
      <TreeViewItem Header="Fffff Ffffffffffff"/>
      <TreeViewItem Header="Gggggggg Gggggggggggggggg"/>
      <TreeViewItem Header="Hhhh Hhhhhhhhhhhhhhh"/>
      <TreeViewItem Header="Iiii Iiiiiiiiiiiiii"/>
      <TreeViewItem Header="Jjjj Jjjjjjjjjjjjj"/>
   </TreeViewItem>
</TreeView>

alebo

<TreeView x:Name="tvwStrom"
   BorderBrush="Black" BorderThickness="2,2,1,1"
   SelectedItemChanged="ZobrazVyber"/>

C #

private void NaplnTreeView()
{
   TreeViewItem tvMuzi = new TreeViewItem();
   TreeViewItem tvZeny = new TreeViewItem();

   tvMuzi.Header = "Muži";
   tvMuzi.ExpandSubtree();
   tvZeny.Header = "Ženy";
   tvZeny.ExpandSubtree();

   foreach (VetaOsoby vo in SeznamOsob)
   {
       switch (vo.Pohlavi)
       {
           case "M":
               TreeViewItem tvMuz = new TreeViewItem();
               tvMuz.Header = vo.CeleJmeno;
               tvMuzi.Items.Add(tvMuz);
               break;
           case "Z":
               TreeViewItem tvZena = new TreeViewItem();
               tvZena.Header = vo.CeleJmeno;
               tvZeny.Items.Add(tvZena);
               break;
           default:
               break;
       }
   }
   tvwStrom.Items.Add(tvMuzi);
   tvwStrom.Items.Add(tvZeny);
}

Udalosť SelectedItemChanged:

private void ZobrazVyber(object sender, RoutedPropertyChangedEventArgs<object> e)
 {
    var tv = sender as TreeView;
    if (tv != null)
    {
       TreeViewItem tvi = new TreeViewItem();
       tvi = tv.SelectedItem as TreeViewItem;
       lblVybranoTvw.Content = tvi.Header;
    }
 }

V budúcej lekcii, Animácie v C # .NET WPF - Storyboard, základné a frame animácie , nás čakajú menu a dialógy.

V budúcej lekcii, Animácie v C # .NET WPF - Storyboard, základné a frame animácie , si vysvetlíme, ako fungujú WPF animácie, a naučíme sa vytvárať základné lineárne animácie a animácie lineárnymi kľúčovými snímky.