Java týden Java týden
Aprílový black friday tě nenechá v klidu! Až 80 % prémiového obsahu zdarma. Více informací
Pouze tento týden slevy až 80 % na programování v Javě

Lekce 22 - WPF - Prvky pro zobrazení dat

C# .NET Formuláře WPF WPF - Prvky pro zobrazení dat

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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).

DataGrid v C# .NET WPF

DataGrid v C# .NET WPF

Vlastnosti

  • AlternatingRowBackground - nastavuje barvu pozadí alternativní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 kolikátý řádek má být alternativní (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ý záznam

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).

Obrázky v C# .NET WPF

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).

MediaElement v C# .NET WPF

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é řádky stromu se vytvářejí pomocí prvku TreeViewItem (viz projekt UkazkaTreeView v archivu pod článkem).

TreeView v C# .NET WPF

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.


 

Stáhnout

Staženo 15x (9.11 MB)

 

 

Článek pro vás napsal Petr Pospíšil
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Miniatura
Všechny články v sekci
Okenní aplikace v C# .NET WPF
Miniatura
Následující článek
WPF - Prvky pro menu a dialogy
Aktivity (2)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!