Praktické užití Silverlight 2.0: DataGrid

Jednou z hlavních věcí vyžadovanou u informačních systémů, které jsou založené na práci s daty, je prezentování těchto dat vhodným a přehledným způsobem. Silverlight 2.0 poskytuje pro tuto oblast velice silný nástroj DataGrid. V tomto článku si ukážeme několik možností, jak DataGrid prakticky využít.

Seriál: Praktické užití Silverlight 2.0 (12 dílů)

  1. Praktické užití Silverlight 2.0: Data Binding 15.12.2008
  2. Praktické užití Silverlight 2.0: DataGrid 22.12.2008
  3. Praktické užití Silverlight 2.0: UserControl 29.12.2008
  4. Co zajímavého přínáší Silverlight toolkit 5.1.2009
  5. Silverlight toolkit a vizualizace dat 12.1.2009
  6. Jak na komponenty AutoCompleteBox a TreeView ze Silverlight toolkitu 19.1.2009
  7. Nástroje pro tvorbu layoutu v Silverlightu 2.0 a Silverlight toolkitu 26.1.2009
  8. Design se styly a šablonami v Silverlightu 2.0 2.2.2009
  9. Základy 2D grafiky v Silverlightu 2.0 16.2.2009
  10. Dynamicky generované komponenty v Silverlightu 2.0 3.3.2009
  11. Úvod do streamování médií v Silverlightu 2.0 16.3.2009
  12. Práce s videem v Silverlightu 2.0 1.6.2009

Dnes bude naším cílem rozšíření jednoduchého adresáře, na kterém jsme si v minulém dílu demonstrovali Data Binding, o lepší prezentování námi vložených dat. Také si výrazněji rozšíříme počet atributů, které budeme u každého kontaktu zaznamenávat a na závěr si ukážeme první ze dvou způsobů, jak vytvořit detail ke kontaktu. Ve výsledku by naše aplikace měla vypadat takto:

Hotová aplikace Můj Adresář

Přidání atributů

Abychom mohli v závěru vytvářet detail kontaktu, musíme do stávající aplikace přidat několik atributů, které se nám v detailu budou zobrazovat. V prvé řadě nás bude zajímat adresa, na které náš kontakt bydlí, dále přidáme přezdívku a datum narození (ukážeme si práci s ovládacím prvkem DatePicker) a několik checkboxů s činnostmi, které náš kontakt vykonává.

Layout formuláře z předchozího článku rozšíříme o další řádek. Do něj vložíme TextBox pro adresu, CheckBoxy pro činnosti a DatePicker pro vložení data narození.

Checkboxy je vhodné vložit do kontejneru zvaného StackPanel. Jelikož následně dle vlastností tohoto kontejneru můžeme jednoduše zarovnávat skupinu checkboxů. Tato varianta nemá žádný vliv na funkčnost, je zde pouze z estetických důvodů.

StackPanel

Nyní vložíme DatePicker pro vkládání data narození našeho kontaktu. Nejjednodušší varianta vložení tohoto ovládacího prvku je, že si ho přetáhneme z levého menu ToolBox a vložíme do našeho kódu.

Přidání DatePicker

Tím také zajistíme, že nám automaticky Visual Studio vloží do hlavičky našeho XAML dokumentu použití jmenného prostoru System.Window­s.Controls.

Controls Namespace

Nyní se vrátíme k našemu DatePickeru a doplníme mu jméno a stylování.

DatePicker

Poslední věcí, kterou musíme pro tuto chvíli udělat, je odstranění ListBoxu, který jsme zde měli pro původní vypisování kontaktů. V pozdější části článku se sem vrátíme a vložíme místo něj náš DataGrid. Pokud nyní spustíme naší aplikaci, měl by základní formulář vypadat takto:

Náhled konstry aplikace

Rozšíření logické části aplikace

Rozšíření logické vrstvy naší aplikace se bude týkat pouze přidání nových atributů do třídy Kontakt. Následně pak musíme rozšířit všechny metody, které pracují s atributy této třídy. Nejprve tedy přidáme atributy do třídy Kontakt.cs. Těmi atributy budou přezdívka a adresa (string) dále logické atributy (studuje, pracuje, plave) a datum narození (typ DateTime).

Třída Kontakt

Dále rozšíříme vlastní konstruktor této třídy.

Třída Kontakt

Poté musíme také rozšířit metodu PridejKontakt ve třídě Adresar.cs…

PridejKontakt

…a stejně tak metodu tlacitko_uloz_Click ve třídě Page.xaml.cs, která obsluhuje uživatelské rozhraní.

Tlačíto Ulož

Zobrazení dat v DataGridu

Doposud to byla celkem nuda. Vlastně jsme nedělali nic moc nového oproti prvnímu dílu. Teď se ale začneme věnovat něčemu zajímavějšímu. Konečně si vytvoříme DataGrid, ve kterém si budeme námi vložená data prezentovat.

Pokud chceme používat DataGrid, je nutné do naší aplikace přidat jmenný prostor System.Window­s.Controls s prvky System.Window­s.Controls.Da­ta. To můžeme udělat buď ručně nebo stejně jako v případě DatePickeru – přetažením z levého menu ToolBox. Což zajistí, že se nám jmenný prostor přidá do hlavičky automaticky.

V tuto chvíli už je přidání DataGridu maličkostí. Přetáhneme tedy DataGrid z ToolBoxu a pro začátek definujeme pouze jméno, umístění a zdroj, odkud si má náš DataGrid brát data a to, že chceme aby si náš DataGrid vygeneroval sloupce sám.

Datagrid

Pokud v tuto chvíli spustíme naši aplikaci, vidíme prázdný DataGrid s již vygenerovanými sloupci. Názvy těchto sloupců jsou převzaty z názvu atributů třídy Kontakt. Pokud začneme plnit náš seznam kontaktů, uvidíme, že se sloupce automaticky rozšiřují. Bez jakéhokoli přesnějšího nastavení totiž DataGrid umožňuje sloupce libovolně zvětšovat či zmenšovat, měnit jejich pořadí nebo řadit vzestupně či sestupně. Další vlastností, kterou DataGrid má v základním nastavení, je možnost editace všech atributů. Tuto funkci lze zrušit nastavením IsReadOnly na hodnotu  True.

Aplikace po spuštění

Nyní si pojďme ukázat, jak definovat sloupce, které chceme v našem DataGridu vypsat. Pro náš adresář nám bude stačit, když si vypíšeme pouze jméno, přezdívku, příjmení a e-mail. Ostatní atributy budeme zobrazovat následně v detailu kontaktu. Pro definování sloupců použijeme DataGrid.Columns a pro vypisování sloupců si vystačíme s textovými DataGridTextColumn. U vypisování si definujeme hlavičku sloupce a zdroj vypisovaných dat. Nakonec nesmíme zapomenout na změnu hodnoty u vlastnosti AutoGenerateColumns na False, jelikož jsme si již sloupce definovali sami.

Datagrid se sloupci

Pokud v tuto chvíli aplikaci spustíme, jediný rozdíl mezi aplikací, kterou jsme měli před definováním sloupců a tou, kterou vidíme teď, je opravdu jen v počtu vypsaných sloupců a v názvech těchto sloupců.

Detail v DataGridu

Tuto zajímavou funkci DataGridu tu již částečně popisoval Štěpán Bechynský ve svém článku . Jedná se o funkci, která nám umožňuje zobrazovat několik přidaných informací ke každému řádku v DataGridu. Typicky se tato informace využívá k zobrazení právě detailu či ovládacích prvků.

Abychom mohli detail využívat, vytvoříme si předlohu určující, jaká data (či prvky) a v jaké formě se mají v tomto detailu zobrazovat. Tuto definici provedeme pomocí DataGrid.RowDetailTemplate. Uvnitř tohoto tagu si následně můžeme nadefinovat téměř vše, co nás napadne. Od vypsání dat přes zobrazení galerie až po spuštění videa. V našem případě si vystačíme s vypsáním doplňujících dat k našemu kontaktu a jako bonus si můžeme přidat tlačítko na smazání kontaktu.

Šablona datagridu

Ještě nesmíme zapomenout na definování toho, jak se náš detail bude chovat. Definujeme to pomocí RowDetailVisibilityMode. V našem případě si zvolíme možnost, kdy se detail zobrazí až ve chvíli, kdy uživatel označí daný kontakt.

Datagrid s RowDetailVisibilityMode

K dokonalosti nám chybí jen zprovoznit tlačítko pro smazání kontaktu. Na to budeme potřebovat přidat metodu do třídy Adresar.cs.

Smaz kontakt

A ještě přidání obslužné metody do třídy Page.xaml.cs, která zavolá naši metodu na smazání kontaktu po stisknutí tlačítka.

Smaz kontakt

V tuto chvíli můžeme naši aplikaci spustit. Nic by nemělo bránit tomu, aby vypadala po naplnění kontakty podobně jako na našem screenshotu.

Hotová aplikace Můj Adresář

Kompletní zdrojový kód aplikace je k dispozici ke stažení: MujSiverlightA­dresar (ZIP 1321950 bytů).

Co nás čeká příště?

Příště si ukážeme práci s UserControl. Budeme mezi nimi přepínat a vnořovat je do sebe. Do adresáře implementujeme druhý způsob zobrazení detailních dat, vyhledávání a vkládání nového kontaktu na separátní stránce.

Zdroje

Použili jste někdy datagrid?

Autor pracuje ve společnosti Sprinx Systems a.s. jako Project Manager ve „webařské“ skupině.

Zdroj: https://www.zdrojak.cz/?p=2899