Lekce 37 - WPF - Prvky pro zobrazení dat

V minulé lekci, WPF - Prvky pro ukládání dat a popisné prvky, jsme si prošli WPF prvky pro ukládání dat a popisné prvky.

Tento díl o prvcích WPF se věnuje prvkům, přes které lze zobrazovat uživatelská data. Jedná se o následující prvky:

• DataGrid
• Image
• MediaElement
• TreeView

DataGrid (Tabulkové zobrazení dat)

DataGrid zobrazuje data ve formě tabulky, tak jak je například známé z Excelu. Existují zde řádky, které představují záznamy, a v nich sloupce, které obsahují jednotlivé položky daného záznamu (buňky). V tabulce je možné například třídit kliknutím na příslušný název sloupce nebo tažením myši měnit šířku sloupců. Dále lze zakázat nebo povolit editaci dat, použít některé prvky jako např. Button, ComboBox, CheckBox apod. a provádět seskupování záznamů (viz projekt UkazkaDataGrid, který můžete stáhnout v archivu níže).

Vlastnosti

• AlternatingRowBackground - nastavuje barvu pozadí alternujících řádků, což může být např. každý druhý řádek. Tabulka poté bude "zebrovaná" a jednotlivé řádky lépe opticky oddělené
• AlternationCount - nastavuje po kolika řádcích se střídá zebrování pozadí (hodnota je zpravidla 2, což je každý druhý řádek)
• AutoGenerateColumns - povoluje automatické generování sloupců podle zdroje (při vlastní definici sloupců je nutné tuto vlastnost nastavit na False)
• CanUserReorderColumns - povoluje přesouvání sloupců
• CanUserResizeColumns - povoluje změnu šířky sloupců
• CanUserSortColumns - povoluje řazení dat ve vybraném sloupci
• FrozenColumnCount - určuje, kolik sloupců zleva má být pevných při zobrazení posuvníku
• HeadersVisibility - nastavuje zobrazení hlaviček sloupců. Má 4 hodnoty
  • None - zobrazí se pouze data (bez hlavičky a výběrového sloupce)
  • Column - zobrazí se data a hlavička (bez výběrového sloupce)
  • Row - zobrazí se pouze data (bez hlavičky, ale s výběrovým sloupcem)
  • All - zobrazí se vše
• IsReadOnly - nastavuje prvek pouze ke čtení
• Items - položky (strukturovaný záznam)
• ItemsSource - zdroj dat (kolekce strukturovaných záznamů)
• SelectedIndex - vybraný index
• SelectedItem - vybraný záznam
• SelectedItems - vybraná kolekce záznamů (pokud vybereme více položek)
• SelectedValue - vybraná položka vybraného záznamu

Události

• SelectionChanged - Při změně výběru se spustí přiřazená metoda

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

Událost 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ázek)

Prvek slouží (jak již název napovídá) k zobrazení obrázku (viz projekt UkazkaImage).

Vlastnosti

• Source - zdroj obrázku
• Stretch - nastavuje způsob vyplnění prvku obrázkem. Jsou možná tato zobrazení
  • None - zachovává poměr stran. Pokud je obrázek větší než plocha prvku, zobrazí pouze část obrázku (levý horní roh). Při menším obrázku zobrazí celý o ponechá volné okraje
  • Fill - vyplní celou plochu prvku (nezachovává poměr stran obrázku)
  • Uniform - obrázek se snaží vyplnit vždy dostupnou plochu buď na šířku nebo na výšku a současně zachovává poměr stran obrázku. Nedochází ke zkreslení obrázku (ponechá volné okraje)
  • UniformToFill - obrázek vyplní vždy dostupnou plochu a současně zachovává poměr stran obrázku. Při rozdílné velikosti dostupné plochy a obrázku je zobrazen výřez horního rohu obrázku. Nedochází ke zkreslení obrázku.

Události

Žádné důležité.

Příklad

XAML

MediaElement (Přehrávač médií)

MediaElement slouží k zobrazení multimediálních souborů jako je audio nebo video. Lze pomocí něj zobrazit i obrazové soubory (viz projekt UkazkaMediaElement ke stažení níže).

Vlastnosti

• LoadedBehavior - slouží k řízení videa. Pokud chceme sami řídit video (spustit, pozastavit, zastavit), musíme nastavit tuto vlastnost na "Manual".
• Source - zdroj dat (audio nebo video soubor)
• Stretch - nastavuje formát zobrazení média. Nejvíce se používá mód "Uniform", který zachovává poměr stran vybraného videa (viz popis u Image).
• UnloadedBehavior - nastavuje režim MediaElementu (při použití hodnoty "Close" automaticky uvolní všechny zdroje včetně paměti)

Události

Žádné důležité

Příklad

XAML

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

TreeView (Stromové zobrazení dat)

Dalším prvkem, přes který lze zobrazovat data, je TreeView. Představuje tzv. stromovou strukturu, kde lze data rozbalovat nebo sbalovat do skupin. Jednotlivé položky stromu se vytvářejí pomocí prvku TreeViewItem (viz projekt UkazkaTreeView v archivu pod článkem).

Vlastnosti

• Header - nastavuje text hlavičky
• Items - jednotlivé položky
• ItemsSource - zdroj dat (kolekce položek)

Události

• SelectedItemChanged - při změně řádku spustí přiřazenou proceduru

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

nebo

<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);
}

Událost 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 příští lekci, WPF - Prvky pro menu a dialogy, nás čekají menu a dialogy.