Praktické užití Silverlight 2.0: DataGrid

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:

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

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.

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.

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

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:

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

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

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

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

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.

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.

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.

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.

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.

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.

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.

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.

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

• Silverlight 2 Learning Resources
• Silverlight Geek
• ScottGu's Blog
• Mining the Web for Silverlight